UX/UI FOR AN APP FOR CHILDREN: STICKSTUCK
UX/UI FOR AN APP
FOR CHILDREN - STICKSTUCK
Creation of a mobile app prototype through a combination of UX research and UI design.
Creation of a mobile app prototype
through a combination of UX research and UI design.
BRIEF
BRIEF
StickStuck is an educational app that is meant to provide guidance and support to children in case of a tongue-stuck emergency.
The mobile app features simple yet fun illustrations and welcoming, age-appropriate UI to make children feel comfortable, in a situation where immediate adult support might not be available.
StickStuck is an educational app that is meant to provide guidance and support to children in case of a tongue-stuck emergency.
The mobile app features simple yet fun illustrations and welcoming, age-appropriate UI to make children feel comfortable, in a situation where immediate adult support might not be available.
MY ROLE
MY ROLE
UX Research
UX/UI Design
Illustration
UX Research
UX/UI Design
Illustration
TOOLS
TOOLS
Figma
Adobe Illustrator
Adobe Animate
Figma
Adobe Illustrator
Adobe Animate
UX RESEARCH
UX RESEARCH
Competitor Analysis
Competitor Analysis
As there were no apps dedicated to dealing with tongue-freeze, the competitor analysis was done by analyzing illustrated online articles that provided written step-by-step guidance, similar to what StickStuck aspired to be.
As there were no apps dedicated to dealing with tongue-freeze, the competitor analysis was done by analyzing illustrated online articles that provided written step-by-step guidance, similar to what StickStuck aspired to be.
A particular article by WikiHow was chosen as the main possible competitor due to similarity in it's structure.
The user journey map seen below was used to pick apart the article for better understanding of it's weak and strong points.
A particular article by WikiHow was chosen as the main possible competitor due to similarity in it's structure.
The user journey map seen below was used to pick apart the article for better understanding of it's weak and strong points.
click on the image above to get a closer look
Key strengths:
Search bar and "suggested" articles for further education
Visuals that help show the steps alongside the text
Key strengths:
Search bar and "suggested" articles for further education
Visuals that help show the steps alongside the text
Key weaknesses:
Long list of information that could be easily forgotten
Lack of direct and personalized approach
Key weaknesses:
Long list of information that could be easily forgotten
Lack of direct and personalized approach
Empathy Mapping
Empathy Mapping
This step was dedicated to better emphasizing with the user experiences.
Thinking through the perspectives of both parents and children involved, I took the moment to better understand the immediate needs and concerns that StickStuck would be addressing,
This step was dedicated to better emphasizing with the user experiences.
Thinking through the perspectives of both parents and children involved, I took the moment to better understand the immediate needs and concerns that StickStuck would be addressing,
Therefore the key areas to consider are:
Child's fear in the moment of crisis - lowering the panic while providing appropriate guidance
Parental concern for safety - ensuring that parents feel in control and can respond in time
The child’s immediate needs - ensuring physical safety
Therefore the key areas to consider are:
Child's fear in the moment of crisis - lowering the panic while providing appropriate guidance
Parental concern for safety - ensuring that parents feel in control and can respond in time
The child’s immediate needs - ensuring physical safety
click on the image above to get a closer look
RESEARCH SYNTHESIS
RESEARCH SYNTHESIS
Key Research Findings
Key Research Findings
As outlined by the research, the main aspects that StickStuck needs to have are:
As outlined by the research, the main aspects that StickStuck needs to have are:
Engaging Visuals
Engaging Visuals
Direct and Simple Instructions
Direct and Simple Instructions
Choice of Options
Choice of Options
Journey Map
Journey Map
Taking into account the key focus points (making the app engaging yet direct while providing a range of options) I outlined a perfect user journey seen on the map below. This way I can identify potential pain-points and therefore aspects of StickStuck that would help resolve them, strengthening the overall experience.
Taking into account the key focus points (making the app engaging yet direct while providing a range of options) I outlined a perfect user journey seen on the map below. This way I can identify potential pain-points and therefore aspects of StickStuck that would help resolve them, strengthening the overall experience.
click on the image above to get a closer look
Further implementations include:
Customization (such as selecting emergency contacts) accessible only to a guardian would give them a sense of control
Illustrated rather than photographic tutorial to make the steps more digestible and less scary for the child
A small selection of options that would make finding the right solution faster
Further implementations include:
Customization (such as selecting emergency contacts) accessible only to a guardian would give them a sense of control
Illustrated rather than photographic tutorial to make the steps more digestible and less scary for the child
A small selection of options that would make finding the right solution faster
SiteMap
SiteMap
Finally, I created a simple sitemap to outline the main tabs. The sitemap visualized the navigation system of the app and began giving structure to all of the research findigns.
Finally, I created a simple sitemap to outline the main tabs. The sitemap visualized the navigation system of the app and began giving structure to all of the research findigns.
Key pages include:
“I’m Stuck Alone” and “With a Friend” to identify what level of help is needed
Step-by-step instructional pages that link together for continuous and adaptable support
Call for help with pre-entered numbers and optional 911 button
Key pages include:
“I’m Stuck Alone” and “With a Friend” to identify what level of help is needed
Step-by-step instructional pages that link together for continuous and adaptable support
Call for help with pre-entered numbers and optional 911 button
click on the image above to get a closer look
PROTOTYPE & DESIGN
PROTOTYPE & DESIGN
Wireframes
Wireframes
Relying on the structure of the sitemap, I drew up wireframes to help layout key features onto the screens. Main pages include:
Relying on the structure of the sitemap, I drew up wireframes to help layout key features onto the screens. Main pages include:
Choice based on accessible tools
Choice based on accessible tools
Illustrated & written directions
Illustrated & written directions
Customizable emergency contacts
Customizable emergency contacts
Illustration
Illustration
A snowman mascot was drawn in Adobe Illustrator.
Instead of using an actual tongue, the illustrations guide children through the process by demonstrating the steps on the snowman's carrot nose.
Made with simple shapes and bright colors, they help make the process less scary and "medical."
A snowman mascot was drawn in Adobe Illustrator.
Instead of using an actual tongue, the illustrations guide children through the process by demonstrating the steps on the snowman's carrot nose.
Made with simple shapes and bright colors, they help make the process less scary and "medical."
User-Testing
User-Testing
For the user-testing, 3 participants who all previously either got tongue-stuck themselves or had to have someone else in the difficult situation, were asked to navigate their way through the app.
Specifically they were all given a scenario that corresponded with 1 of the emergency scenarios that StickStuck is meant to address. While overall the success rate was 100%, some suggestions followed:
For the user-testing, 3 participants who all previously either got tongue-stuck themselves or had to have someone else in the difficult situation, were asked to navigate their way through the app.
Specifically they were all given a scenario that corresponded with 1 of the emergency scenarios that StickStuck is meant to address. While overall the success rate was 100%, some suggestions followed:
Provide a “go back” option
Provide a “go back” option
Add a "home button"
Add a "home button"
Improve text legibility
Improve text legibility
Final Screens
Final Screens
Seen below are some of the final screens
Seen below are some of the final screens
Parental control
Parental control
Main support options
Main support options
Specific illustrations & instractions
Specific illustrations & instractions
Emergency call options
Emergency call options
UI Systems
UI Systems
Colors
Colors
Typography
Typography
Kids zone
Kids zone
Inter - Medium
Inter - Semi Bold
Inter - Extra Bold
Inter - Medium
Inter - Semi Bold
Inter - Extra Bold
Additional Elements
Additional Elements
Final Prototype
Final Prototype
The final Figma prototype is available bellow and is accessible through this link.
The final Figma prototype is available bellow and is accessible through this link.
LEARNING OUTCOMES
LEARNING OUTCOMES
Designed and prototyped completely from scratch, the app required a lot of thought and attention to fully embrace and adapt to all of the opportunities and challenges.
Working on a product for children requires a higher level of thought and attention than an average adult user, as the content needs to be simple and digestible while staying warm and inviting.
Designed and prototyped completely from scratch, the app required a lot of thought and attention to fully embrace and adapt to all of the opportunities and challenges.
Working on a product for children requires a higher level of thought and attention than an average adult user, as the content needs to be simple and digestible while staying warm and inviting.
NEXT STEPS
NEXT STEPS
The next step would be to test out the app's structure and flow with the actual target user group, to see if the content would actually be understandable for the younger users.
The next step would be to test out the app's structure and flow with the actual target user group, to see if the content would actually be understandable for the younger users.