Fit Kids App Case Study
Project Overview
Speaking with many parents, we discussed our children spend too much time on screens and less time being active. I wanted to create a bridge between screen use and exercise to provide a healthy lifestyle by way of a fitness app that they would enjoy using.
The problem
Parents want kids to be motivated to exercise without it being a chore - lack of exercise can lead to poor eating habits, attitude and a sedentary lifestyle.
The goal
Develop an app that pleases both parents and their children with a desire to exercise using a fun approach and reward system for completing exercises.
My role
Lead UX designer: Researched with competitive audit, conducted usability studies, ideated, designed a low-fi prototype, mockups, and a high-fidelity prototype.
Understanding the user's pain points
Parents were in agreement regarding excessive screen time by their children and accepting it as:
"Being a part of the digital culture we are in”. While sports did play a role in their children being active, one completed,
children would immediately go back to their devices to kill time. Parents still want their children to have fun, but if there
was also an exercise opportunity while doing so, it would make Parents feel more at ease with them being on screens
being productive and developing good habits that would carry over into adulthood.
Key challenges & constraints
Kids are already familiar with using apps with many vying for their attention but providing little if any
growth. Parents want their children to develop better health in a way that appeals to their interests- by using a
mobile app designed with them in mind, they could track their progress over time. Also, the more exercises they
complete, the more points they earn to redeem for rewards- giving the app a video game like achievement system to
interact with. Constraints included: the time frame to complete this project within the Google deadlines, accessibility to a
large usability group, and learning new software such as Figma and Mural- as well as learning
about UX Design as whole through the Google Coursera Certification Program.
User Personas
Meggan
Meggan is a work from home Mom with two pre-teens who spend all their free time on their phones who needs a productive app for her children to be more active and possibly help in the community because she wants them to learn skills that can benefit their future.
"Being a work from home Mom has it's challenges. I fall prey to letting my kids use screens too often. I wish they could get more exercise on their own without adding another event to our already hectic family schedule."
Evan
Evan is a divorced Father in a new town with a troubled son who spends too much time online with his tablet being sedentary and distant who needs an exercise/journal app for his son to use while he’s away at work because he wants his son to be more independent and motivated. He wants a way to share in his son's progress and growth.
"My son is a great kid. But he's not how I was growing up..being outside until dinner. I love his passion for computers but wish he'd be more active than scrolling on his tablet for hours while I'm gone at work"
Research Study
After comparing the current fitness apps online in my competitive audit, I found most apps/websites were geared
towards very health conscious adults needing expensive devices and subscriptions to use, like Apple Fitness Plus.
Other websites like Sworkit Health offered fitness videos for kids, but it wasn't designed with the main user (kids) in mind.
There was a clear gap for an app designed specifically for kid's exercise and nutrition as well as tracking and rewards.
Initial Designs
Crazy 8 Sketches
Using the Crazy 8's exercise, I wanted to address gaps
I found in my competitive audit- focusing on fun interactions with the user to stay motivated to exercise and develop overall healthier habits in a user interface that was easy to navigate.
Digital Wireframe Sketches
Using my Crazy 8's as a basis for my concept, I sketched
designs for my digital wireframe. The design focused on
multiple exercise options from the home screen- to mimic the HUD screen used in the pause menu of most video games- appealing to my target market of screen inclined kids.
Digital Wireframe in Figma
Users would be greeted to the app with a custom avatar
of themselves and a list of possible exercises to choose from.
Negative space would be used to to direct the user to the large
buttons for navigation. A drop down hamburger menu would provide additional options like about us, rewards, and more.
Low-Fidelity Prototype
From my digital wireframe, I created a
low-fidelity prototype to connect all my screens
and test with users starting with a log-in screen
to the main page with the various exercise choices including My Stats, My Rewards, and Nutrition & Recipes. View the protoype.
Useability Study
I conducted an unmoderated usability study with 5 participants with a set of tasks to complete in a 20 minute
period to sign up for an account and navigate to specific pages within the app, then ask the following questions:
1. How easy or difficult was it to navigate the app?
2. Are there any suggestions you have for the chore list?
3. What are your thoughts as a parent regarding children’s tracking weight loss goals using an app?
4. Do you think having recipes within the app would be used by a pre-teen?
5. How did you feel about this Fit Kids app overall? What did you like and dislike about it?
User Feedback
Chores Page
To apply to all users, rephrase 'Mom and Dad' to 'Parent 1 and Parent 2'.
Weight Loss
Users agreed children shouldn't focus on weight loss, rather healthier eating and exercise to track over time and a visual guide of what they have accomplished by way of a journal.
Recipes
Users enjoyed seeing recipes for Breakfast, Lunch, Dinner, and Dessert as it provided a way to meal plan (grocery shopping) and meal prep together as a family activity.
Refining the Design: Mockups
Based on insights taken from the usability studies, color and iconography were added for easier navigation and appeal.
A sticker sheet was created for consistency throughout the app. Weight loss was changed to My Goals with drop down menus to journal what the user accomplished to show their progress. A post it note graphic mimicked the notes children would receive in real life from their parents reminding them about the importance of that activity. Chores was updated to Family Chores with an option for the Parent (by way of a finger print scan) to edit the list of options to cater to their specific family needs.
Before
After
Before
After
High Fidelity Prototype
Users would be greeted with a thumbprint log-in screen or the option to sign up. Users would create an avatar with an option to unlock more avatar designs over time by completing exercises- similar to unlockables in video games. For accessibility, I revised the standard text buttons to color coded iconography for easier readability and navigation. Also, the navigation to other exercises would reflect the ones remaining after completing the current exercise- helping the user know where/what to do next. Parents would have access to update the family chore list specific to their household. The nutrition page would be a virtual cookbook for meals and desserts and save favorite recipes. Stats of exercises, rewards earned to redeem towards gift cards or ice cream was also added for a job well done. View the high-fidelity prototype.
Example of a user journey:
Main Page
Jogging Selected
Jogging Complete
Rewards Tracker
Responsive Design
I modified the design for a tablet, the other main device for users of this app based on my research. To add to the now larger screen size, I wanted to feature an image that matched my sticker sheet and theme of the Fit Kids App. I found an image of a girl running on path on Vectezzy met both those requirements. Also, looking at my overall design again, I felt to best utilize the screen was to add a quick links footer for My Stats, My Rewards, and My Recipes pages. All pages would essentially act as it's own homepage with access to all the user choices with large colorful buttons and easy to read text. View the tablet high-fidelity prototype.
User selection pages:
Nutrition & Recipes Flow:
My Rewards & My Stats:
What I learned from users:
After sharing my completed designs with participants from the original usability study, the app was viewed with high praise. Most users were not familiar with the concept of wireframes and were happy to see a dynamic change. "Color makes such a difference! This looks like a real app now." "Love the colored icons- I have no trouble knowing where to go. I enjoy the text direction on each page for a kid friendly tone too." "I could see my kids continually using this app. My daughter though it was real and I let her play around in it- smiles all around. Great work!"
What I learned from the project and myself:
Having a work history of graphic design and applying it to UX Design, the transition was welcoming. However, the process wasn't an easy one. Learning the programs of Figma, Mural, and Google Templates kept me busy with a series of to do's and benchmarks to strive for. As this was my final case study in the course, I felt a little bit more at ease for developing the Fit Kids App. Also, I could relate to Parents who shared a similar struggle with their children and that passion made this project a fun yet challenging endeavor. I feel the options I created for this app and the feedback received from actual users have made Fit Kids a success.
Next Steps
If I continued to develop this app further I'd like to do additional research for actual use over an extended time to get real data and deliverables. I'd like to create a page for multiple users to track their progress together as a family for healthy competition and reaching goals. Also, I'd like to develop what Fit Kids could look like on a Smart Watch.
Thanks for reading my case study for the Fit Kids App!
-Jeff