×
![]()
With this website, you can learn Bahasa Isyarat Indonesia (BISINDO) through a tutorial video with interactive multiple-choice questions. Pay attention to the mentor demonstrating six commonly used words in BISINDO, and answer multiple-choice quizzes on it. Let's learn BISINDO together and create a more inclusive Indonesia!
Logo Design
Product Research
Technical Research
Copywriting
Information Architecture
UI/UX Design
Sitemap
Design Systems
Design QA
Website Development
6 months
Maurelle Viyurdy
All screen sizes
June 2022
After finding out about the significant number gap between deaf people and Indonesian Sign Language (BISINDO) speakers, we were motivated to bridge this divide and foster a more inclusive society by teaching some basic BISINDO.
Through this interactive learning approach, users can quickly master basic BISINDO words via quick interactive tutorial videos and multiple-choice questions. This method is chosen to increase the public's interest and motivation to start learning BISINDO.
Designing the video learning page for portrait modes on smaller devices was challenging. When accessed in portrait mode, each video answer in multiple-choice questions would be too small to view.
Therefore, for smaller devices, this page is accessible only in landscape mode. If users try to access it in portrait mode, a pop-up box will ask them to rotate their device and refresh the page to proceed.
As this website's main aim is for the users to do the interactive video learning, we had to brainstorm on the best placement for the “Start Learning” button. We placed this button on the above-the-fold after a heading and text that explains the website briefly and invites users to start learning BISINDO.
At first, we planned to use motion sensor detection from the webcam. For this concept, users must follow the mentor's sign language and the website can detect whether it is correct. However, in the development process, we encountered various errors when using Tensorflow on my hardware.
Therefore, we changed the plan to a multiple-choice-based questionnaire. This alternative method is developed with JavaScript.
Developing the interactive video learning environment was quite complex, especially the progress bar and questionnaire pop-up system.
The progress bar is made with <progress> whose value is toggled based on the current video time using a JavaScript If Else statements. When the progress bar's value is more than or equal to 100 (which means the video is finished), a function that displays the questionnaire pop-up box is executed.
1. Researching on sign language
We started by reading articles and publications about BISINDO. Our target market is teenagers to young adults as their brains are more wired for curiosity, and they're more familiar with technologies like online learning than older generations. Therefore, they will find it easier to navigate through our website.
2. Branding and identity
We named this website ”Isyarat Yuk“ where ”Isyarat“ means sign language and ”Yuk“ is an expression that Indonesians use for invitation.
3. Script and videography
The script starts with a mentor explaining briefly about BISINDO. Then, she teaches how to do sign language for the words learn, eat, help, thank you, and you're welcome. These words are chosen as they are frequently used so users can practice them daily.
4. Designing sitemap
This website consists of a landing page, privacy policy, terms and conditions, interactive video learning, and finish learning page. The finish learning page gives users a satisfying feeling of completing a full lesson and allowing them with share the site to their friends and families.
5. Designing the website and copywriting
We designed the high-fidelity layout for desktop and mobile on Figma. Since the site is targeted for Indonesians, we wrote all content in Bahasa Indonesia.
The video learning page is divided into two main <div>, one for the device orientation detector and another for the main content (consisting of all videos, progress bars, buttons, and pop up boxes).
Each video lesson has its own <div> that contains all the elements (videos, progress bars, buttons, and pop-up boxes). As there are six videos, there are six separate progress bars placed side by side. Each progress bar's intersection is covered with a circle that indicates a breakpoint where a questionnaire pop-up box will appear.
The <progress>'s value is toggled according to the current time of the video with JavaScript If Else statements. When the progress bar's value is more than or equal to 100 (which means the video is finished), a function that displays the questionnaire pop-up box and pauses the current video will be executed.
Once the correct answer is clicked, there will be a pop-up to notify it. This pop-up displays for 1 second, then the current video's <div> will be hidden and the next video's <div> will be displayed with the next video playing.
