overview
PROBLEM
Lack of interactive educational tools that promote a more enriching learning experience. Need to complement learning from textbooks with the use of dynamic media to keep students engaged.
Having identified the problem, the process entailed using empathy maps and surveys to determine the users needs owing to the technologically advanced environment they are a part of. Using checklists available online helped me determine the credibility of my source for data collection. Undergoing a rigorous iteration and testing process allowed me to make the tool interactive through dynamic media.
PROCESS
Designing a user-centric, interactive educational tool for children to learn information about the languages of India, by presenting data in a fun and engaging manner.
SOLUTION
USABILITY GOALS
LEARNABILITY
75%
SATISFACTION
90%
MEMORABILITY
80%
EFFICIENCY
ERRORS
25%
85%
research
SCENARIO
Rahul is frustrated of studying from text heavy textbooks and gets constantly distracted. He has to study for an upcoming test on the regional languages of India. Both his mother and teacher are pushing him to study. He thus looks online hoping to find some tools that might make his learning experience more enjoyable.
user research
PAIN POINTS
frustrated
Rahul experiences frustration every time he looks at content heavy pages with black and white text and no visuals aid.
lack of motivation
As a result of this frustration he is not motivated to learn and constantly gets distracted. He is seen on his phone on social media or playing games on his computer.
inability to retain information
Information learnt by Rahul with an inattentive manner prevents him from retaining any of the learnt information for a long period of time. As a result of this he is unable to participate in class discussions or perform in examinations.
PRECEDENT research
OPPORTUNITIES
use of dynamic media
Rahul being in an environment surrounded by dynamic media through social media, games etc. is more likely to be receptive to information dispersed through dynamic media like images, short videos etc.
active interaction
Learning from textbooks can be rather passive. Rahul however requires a more active form of learning in order to retain the required information. This can be possible by creating a multi sensorial experience.
ITERATION PROCESS
ux features
VISUAL STIMILUS
The user first sees a word in the chosen language, written in that specific script. This acts a visual aid and may create curiosity to know more.
Upon choosing the language they wish to learn more about, the user encounters a series of visual and auditory elements that make their experience with the language more enjoyable.
The user receives an auditory stimulus as they hear the word being said in the chosen language.
AUDITORY STIMULUS
ACTIVE INTERACTION
The user repeats the word they heard, back to the operator. This will make the user more receptive to the learning process.
DATA VISUALIZATION
Upon accurately repeating the word, the user sees the a data point regarding the language. This data is presented using the word itself. The highlighted portion depicts the value. It is similar to a graph.
user FLOW
The following user flow allowed me to determine the sequence in which the actions will be performed by the user.
ONBOARDING
chooses language
visual stimulus - word written in the script
auditory stimulus - hears pronunciation of the word
auditory stimulus - repeats word
visual stimulus - sees data about the language
process repeats till all data points have been covered
user interface
Designing a user interface that keeps the user engaged in the learning process.
LAYOUT
Each slide has minimal information. The elements are bold and spaced out. This is unlike textbooks with large amounts of information presented in extremely small, black and white text. This makes the information accessible.
DATA VISUALISATION
The data points related to the language are presented using the words that the user hears and repeats as a part of the experience. The highlighted portion represents the value. It is similar to a graph.
This unique representation reinforces the visual stimulus making the learning process more enriching.
STYLE GUIDE
typography
To keep the learning process authentic, the words are displayed in the script of the chosen language.
colour palette
#DFD699
#E4A7A7
#9EC1D8
The use of yellow, red and blue to present different data points aids in keeping the user engaged.
Yellow : catches the users attention
Red : increases alertness
Blue : boosts productivity
prototypes & user testing
Creating low, medium and high fidelity prototypes with simultaneous user testing.
low fidelity prototypes
Creating low fidelity prototypes using cardboard and paper to get initial feedback.
names of the languages should be in the shape of the map of India.
speaker and microphones should be on the left
the data representation in the form of the users sound wave seems a little disconnected
FEEDBACK
medium fidelity wireframes
User testing the UI features through medium fidelity prototypes.
upon choosing the language, there should be screen with the name of the language in English and in its script in a bold font
the bar with the data point should be in the centre
FEEDBACK
refinements
Considering all the feedback received and making the necessary changes.
Should the names of languages be presented in the shape of the map of India or should they be spread across the screen?
Upon choosing the language, the user will see the name of the language in its script for a few seconds. This acts a as a visual stimulus generating curiosity.
Change in the data visualization : The data point is represented using the word just learnt by the user. Similar to a graph, the data is plotted.
conclusion
Keeping in mind the context the user is in
Considering the age of the user and the technologically advanced environment they are being brought up in, creating a multi-sensorial experience, seems suitable. Thus, unlike textbooks which only allow for passive learning, this tool promotes active involvement of the user.
Being open to feedback that may involve drastic changes
From this project I have realised that a design decision that I feel is apt, may not be the most accurate. In order to become aware of this I have learnt the importance of use testing after every modification. As an example, I was confident about presenting the data using the users sound wave. However, when I tested it I was advised to re-think its connection to the overall purpose of the theme. This in turn gave me a chance to come up with a more relatable data visualisation.
LEARNINGS
Adding sound effects to the tool
At the beginning of the interaction when the user has to choose a language, I would like to add an audio of people talking in the different languages in the background. It will add to the authenticity of the tool and will generate curiosity within the user.
Coding the tool to make the transitions automated
Since I used Adobe Xd to create this tool there were some restrictions. For example, once the user has heard the word the screen should automatically change. However since the software does not allow two interactions on the same element, the user has to click the next button to move on. Thus coding the tool would help clean up the transitions.
Brainstorming more data visualization ideas
While I am satisfied with the data visualization using the word in the chosen language, I would like to spend time brainstorming more ideas. I feel there is potential to modify the visualization to present the data more clearly.