UX Case Study
During this project, I conducted research and developed UX/UI designs of an app to teach first aid, Animedics. The app was targeted at (1) primary school-aged children and (2) their parents.
My role: UX/UI Designer, Researcher and Brand Designer.
The problem
Parents want a way to teach their children first-aid at their level without their children feeling like it’s more ‘learning’.
The goal
The app for Animedics combines both gameplay for the child and a parent portal. The gameplay will let users play as an avatar in an open-world where they come across first-aid scenarios and learn how to deal with them. In the parent portal, the parent can track their child’s progress, see their avatar and congratulate them on achieving points in the game.
Research
Interviews were conducted with 4 users who met the criteria of either being a parent to a school-aged child or a school-aged child. The two main user groups that came from the research were (1) children who like to play games and (2) parents who want their children to learn first-aid. These personas had separate pain points.
Persona: Sasha
Sasha is a primary-school-aged child who needs a platform that teaches first-aid in a fun and interactive way because they do not have the energy to learn in a traditional format, after spending their entire day/week at school.
​
Sasha's goals are to have an enjoyable experience while learning and be entertained by storytelling.
Sasha's pain points
1.
Too tired to learn in a traditional format after school
​
After a full day/week’s work at school, the last thing they want to feel is that they’re learning more. They want to play on their ipad or outside.
2.
Account creation can be difficult to navigate
​
Understanding what the fields mean and remembering emails and passwords are not their strong suits.
3.
Being nagged by their parents to show them their work
​
They don’t like it when their parents nag them to see their school work or homework. It makes them less motivated to do the work.
Persona: Joseph
Joseph is a parent of a child in primary school who needs a fun way to teach their child first-aid and track their progress because they want to know that their child is prepared if an emergency happens.
​
Joseph's goals are to prepare their child with knowledge in case they are faced with an emergency and they need to feel that their child is safe even when they aren't around.
Joseph's pain points
1.
Not being able to monitor their child’s learning progress easily
​
They like it when online learning apps have a detailed parent area or even mailing list. It makes it easier to check up on their child’s progress in their own time.
2.
Not having the time to study and teach their children these skills
​
They know they should learn these skills too but may not have the time to do so. What they need is a platform to teach their kids these skills at their level.
3.
Getting their child to focus on more learning after school
​
Learning in a traditional format does not suit the after-school routine after they’ve completed their assigned homework.
4.
Keeping their child progressing through a learning task
​
Even if an app or learning platform is fun at first, their child easily loses focus and motivation. Encouraging them to continue learning can make it a chore.
Starting the design
Over the course of the design process, the end users' needs were kept top of mind. The process included paper wireframes iterating on all of the main pages of the app, then digital wireframes, low-fidelity prototypes and then high-fidelity prototypes.
Paper wireframes
During the paper wireframing process, I envisioned the app more closely resembling a learning site e.g. with learning modules and quizzes. Character customisation would be the main reward for correct answers. See to the right the paper wireframes.
IA
After creating the paper wireframes and thinking about the users in more depth, I realised that the original format did not lean far enough into the gamification needed for the Sasha persona to feel as though she is playing a game as opposed to ‘learning’. I leant into gameplay for her persona.
Digital wireframes and low-fidelity prototype
The digital wireframes addressed the needs of the child persona through gameplay and customisation including:
-
Player-led gameplay - adventure storyline
-
Character customisation
-
Tokens and badges points that can earn them further customisations
-
Animated scenarios and quizzes throughout the game.
​
The digital wireframes addressed the needs of the parent persona through a simple learning summary portal including:
-
Visibility on the character that the child has created
-
Clickable badges section to see what topics the child has learned
-
Congratulate function when child achieves a new badge.
Usability Study 1
The moderated usability study on the low-fidelity prototype was conducted on 4 users who would be primary users. A number of findings came from the study and influenced the low-fidelity prototype.
​
Insights impacting the parent portal:
-
The ‘badge’ achievement popup for parents to congratulate their child was being missed.
-
During the sign-up journey, if the wrong button was selected on the account options page, the user could not go back to the previous page.
-
Users wanted more functionality to encourage the kids to continue through the game.
-
Users wanted to be able to view in more detail the progress stats, activity and more information about their child.
-
Users wanted to know what would happen if they had multiple children playing in the app.
​
Insights impacting the gameplay portal:
-
The sign-up page was difficult for the child users to navigate.
-
Child users wanted to be able to rewatch the video if they got the answer wrong or even before answering the question.
-
Having the controllers on the ‘worlds’ screen and the quiz screens confused majority of users.
-
Users wanted even more games within the app.
Amending the designs
The usability study highlighted a need to focus on the parent portal. A second lot of paper wireframes and information architectures were completed to brainstorm this section. See below some examples.
Paper wireframes
Updated paper wireframes were sketched for the homepage and the sign-up flow. I needed to clarify the way the parents and children login to the app and add more functionality into the parent portal to better meet the second user group's needs.
IA
The information architecture was reviewed after the usability study and was significantly changed to focus on the parent portal. Additional features were also added to the gameplay for the children to have other opportunities to learn while playing.
Usability Study 2
A second moderated usability study was conducted on the updated low-fidelity prototype. This was to test the additional functionality and new login flow on the same parent users. In the second study, the users easily found the progress report and naturally accessed additional features like the assign a pop quiz.
​
Insights:
-
Several users wanted to be able to assign a difficulty level when creating a pop quiz for their child.
-
The pop quiz section had an additional screen for subtopics that confused users. This insight reduced the pop quiz journey by 2 screens.
-
Users wanted to be able to personalise their 'praise' when congratulating their child.
Low-fidelity prototype - Version 2
The second version of the wireframes and low-fidelity prototype addressed the insights from both usability studies.​
​
The insights that shaped the parent portal included:
-
The sign-up screen was reconfigured. The users signing up for the app are likely to be the parents and the children would then log in via the same login details and select if they are a child. This allows for them all to appear within the same account.
-
Account structure imitates apps that have different ‘profiles’, which can be switched between to view their specific stats.
-
Sections added to the portal include: progress report, activity log, profile, and assign a pop quiz to test their child's knowledge.
-
Difficulty levels were added to the pop quiz section.
-
In the pop quiz journey, by including the subtopics in the topics screen, the journey was reduced by 2 screens.
-
Personalised message for 'praise' was added.
​The insights that shaped the gameplay included:
-
Removing the child from the sign-up solved their difficulties with the sign up page because the parent was the one creating the account.
-
Voice aloud functionality was added to help users who learn more from auditory-learning. This function would also assist them in understanding and comprehension of questions.
-
Rewatch and retry functions added to the quizzes.
-
Mini-games were added to the gameplay.
High-fidelity prototype
The high-fidelity prototype was created after the second usability study and addressed the needs of both the child user and the parent user groups, despite their very different needs.
The parent user group needs a fun way to teach their children first-aid and to be able to track and encourage their child's progress in the game. This was met with the detailed parent portal that had an in-depth progress report and several functionalities that would encourage their child within the game.
The child user group needs to learn first-aid in a fun and interactive and this was met with the game, which included character customisation, points that could earn them more customisations and unlock mini games, minigames and adventure-style user-led gameplay.
Accessibility Considerations
1.
Speak aloud function to help with varying levels of literacy.
2.
All colours used for text passed WCAG at a Level AAA and a feature to adjust the brightness and contrast was included.
3.
Change language function for immigrant parents whose first languages aren’t English.
4.
Font size changer to allow parents and children to increase the text size if they need to.
Takeaways
After the first usability study, I realised that I needed to be more flexible in the designs and I ended up doing multiple versions of the same paper wireframes. The direction I had taken with the parent portal required more work based on the insights from the study. Without the research, the app would not have fully satisfied the parent persona and failed to fully meet the goals of the project.