Take Five App
An online tool to designed to help children understand their feelings and teach them how to handle their emotions in a better and healthier way.
Role
UX designer leading the app and responsive website design from conception to delivery. Key responsibilities included: conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, information architect and responsive design.
The Problem + Product Goal
Children feel big emotions and often do not know how to express what they are feeling. They often don’t understand what caused them to react the way they did either. The goal was to design an app and responsive website to help children understand what they’re feeling through daily check-ins, videos, and games.
Target Audience
The target users are children between the ages of 5 to 12 years old. The target users also have a need to understand what emotion they are feeling and why.
User Research
When I conducted user interviews, I found out that many of the children and pre-teen users were going through changes in their lives that involved complex emotions; they needed help processing and understanding these emotions. I also learned that teachers and parents were looking for resources to support their kids and have open conversation surrounding emotions and expressing themselves. The feedback that I collected through research made it clear that an easy-to-access and interactive app would be helpful to users in learning about emotions as well as take a second to regroup their feelings.
User Journey
Design
Sketching a Solution
During ideation process I started off by drafting and iterating each screen. Shown to the right is the low fidelity sketches of the daily check in/mood page.
The stars signify the features that I liked for the final sketch.
Low Fidelity Digital Wireframes
Taking the lo-fidelity wireframe sketches, I digitized them by using Figma. These designs focused on building awareness around emotions and help user’s gain insight and help them understand their emotions. Shown below are the mobile app wireframes.
Responsive Desktop Low Fidelity Digital Wireframes
High Fidelity Mockups
Using Figma the low fidelity wireframes were turned into high fidelity mockups.
Color Palette
When designing the mobile app and responsive desktop my goal was to make the app very colorful. Since this was being designed for children, the colors chosen for each were fun and vibrant. This was the overall theme for the app as well.
Typography
For the typography I chose Mali for the logo and headings. I added this font in order to add a fun and playful look. For the subtext I chose Inter because it is gives a clean appearance and is readable.
High Fidelity Prototype
Takeaway
During this case study I learned the importance of breaking down a big problem like this one and breaking down each issue step by step. This helped me come up with solutions more easily rather than being overwhelmed, I also learned how important it is to address each iteration with openness to improve as well as keeping user needs in mind. Overall, I enjoyed working on this project and believe that educating young people on emotions and empathy is a great cause.