Asian Perms for Men

Kids Nutrition App and Website - Case Study

Project overview

The product: The Healthy Kid is an app and responsive website that's geared towards helping kids make healthy choices in their daily lives.

The problem: Many kids don't know what foods are good for them or they don't like the taste of healthy foods. We want to build an app and responsive website to help kids learn what is good for them.

The goal: Create a kid user friendly app and responsive website to keep them engaged and learn about nutrition in a fun way.

My role: UX designer and researcher for the nutrition app and website.

Responsibilities: Conduct interviews, user research, usability studies, paper and digital wireframes, low and high fidelity prototyping, design iterations and responsive designs.

User research summary

I conducted user interviews and created affinity maps to understand the users and their needs. The user group consisted of children from the ages of 12 to 16 years old and adults with children.

The research revealed that they want a fun way to learn about nutrition with interactive activities.

Design

Paper wireframes
I created some paper wireframes to quickly get ideas and screen iterations for my app. These would eventually become digital wireframes.

Digial wireframes

Though this process, I really started to think about how and what the user would want to see. I made sure to base screen designs on feedback and findings from the research.

Low-fidelity prototype
Using the digial wireframes, I created a low fidelity prototype. The main focus was to test users to navitate to various activities and learning articles and blogs.


Usability study findings

I ran a usability studies and these findings were able to help me with iterations of my low fidelity prototype to the high fidelity prototype.

Findings:
Users want many options for fun activities such as games and puzzles.
Users want an easy way to find what they want through search filters.
Users want easy acces to recipes and or healthy tips.

Refining the design

Mockups
In my low fidelity wireframe I didn't have a search funtionality present. I added this feature after the study.



High-fidelity prototype

My high fidelity prototype allows users to search and select articles or games.