Project 3: Create a responsive website + app in Adobe XD
The Product:
Do Something for Good.
A program that educates and guides kids to make independent healthy choices. While their parents/guardians can oversee their progress.
Project Duration:
September - December 2022
The Problem:
It can be difficult to keep kids engaged in their own health - and keep their parents/guardians informed.
The Goal:
Keep kids engaged with their own health, supportive of their peers and friends’ health in a fun way: all while keeping their parents informed as they make these independent choices.
My Roles:
My Responsibilities:
UX Researcher
UX Designer
Copywriter
Create Personas (target users)
Primary & Secondary research
Wire frame design
Low-Fi and Hi-Fi proto build + design Usability Studies on proto iterations
Understanding the User
User Research Summary
I performed secondary research first on a multitude of health and children’s apps that vary across ages. From there - i conducted interviews with both parents and their children to understand their day-to-day life & some opportunities they have in the health/meal sector.
Personas:
Goals
Frustrations
Problem Stories that we need to solve
Will & Joy
Ages: 38 & 9
Education: Bachelor's & 3rd grade
Hometown: Media, PA
Family: Single dad with Joy, daughter, and their pet iguana Scaler
Occupation: Restaurant Manager & grade school student
"We live a busy life & I want to provide the tools my daughter needs to stay healthy since we both have busy schedules"
Problem Statement:
Joy is a busy 3rd grader with a single working dad (Will) who needs a way to understand the nutrition of the foods she eats (and track them) because she wants to make healthy choices and share them with her dad.
Goals:
-
Will wants Joy to understand the importance of nutrition
-
Wants Joy to be confident in her decisions
-
Joy wants to if what she eats is good or bad for her
-
Joy likes to have the energy she needs for school and activities.
Frustrations:
-
Will cant be there all the time to help explain daily choices to Joy due to his job schedule
-
There are few healthy choices at school for Joy to fill up on
-
Joy does not know how to read nutrition labels nor their importance
Mary & Dane
Ages: 37 & 11
Education: Masters & in grade school
Hometown: Athens, GA
Family: Mary (mom), Dane (son), Tyler (husband/dad)
Occupation: High school teacher & 5th grade student with IEP
"We want to support our son in his independent decision making - whether he is with us or with friends."
Problem Statement:
Dane is a curious and avid learning 5th grader on the spectrum who needs a way to plan his meals, understand health benefits, and track his progress because he wants to continue to work on independent decisions while keeping his mom attuned.
Goals:
-
Mary & Tyler want their son to understand nutrition
-
Dane wants to know what is in what he eats
-
Dane wants to plan meals ahead for the structure he needs and the picky eater he is.
Frustrations:
-
The food choices within reach are not best for him
-
He doesn't understand why his parents make him eat certain foods
-
Dane gets frustrated when he feels forced to do something he doesn't want to do.
Starting the Design
Digital Wireframes
Being my third project, I felt comfortable starting with digital wireframes. Since I had a passion for this project/topic, I had immediately formed a vision that I could start with.
Since I started with the app - it was all about building out the experience from the kid's point of view since they were the primary user. The desktop & parental versions were for the parents to be made aware.
Wireframes to LoFi Protos
Usability studies drove improvements in initial designs.
Usability studies were unique in actually being able to test with the targeted child-parent dynamic.
​
Blow out to all app frames...
Establish Lo-Fi Prototype for Desktop Site
Iterating the Design into High Fidelity Prototypes
High Fidelity Prototypes for Mobile App + Desktop Web
Design updates were done based on usability studies as I progressed through this project.
Also ensuring to create the responsive experience for mobile app, as well as desktop web. ​
Mobile App HiFi Proto Video
Desktop (Web) HiFi Proto Video
Design with Accessibility In Mind
Ways I was able to make this app & site accessible:
1
Scanning Food:
This allows user to utilize their existing accessibility settings in terms of scanning an item for quick understanding.
2
Screen Reader:
Every icon, menu item & cue has a text label with it so that it can be read by all screen reader technology for those who need it.
3
High Contrast:
Those hard of seeing should have no problem with all call-to-action buttons and information as they are designed with high contrast ratio 4.5:1