Teen Health Network UX Design

The Product: Teen Health Network is a San Francisco-based organization focused on empowering teens with the knowledge of how to make smart and healthy dietary choices. The organization needs an app and responsive website that helps tutor teens about nutrition. Teen Health Network’s primary target users include teens and young adults who are trying to gain knowledge about health and nutrition.

The Challenge: There is a wealth of misinformation and miseducation surrounding diet and nutrition. The team at Teen Health Network discovered that 85% of those afflicted with eating disorders develop their condition between the ages of 12 and 25 years of age. The team at Teen Health Network has identified a correlation between eating disorders and a lack of education surrounding nutrition.

The Goal: Design an app to educate teens and young adults about the truth surrounding diet and nutrition with the hopes of lowering the rate of eating disorders and creating healthy relationships with food.

Project duration: June 2023

My role: UX Designer leading the app and responsive website design from conception to delivery.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Research: I used the facts presented to me by Teen Health Network as well as their goals to come up with interview questions that were used to conduct user interviews. A primary user group that was identified through my research was teens and their guardians who want to demystify food and nutrition information and develop a healthy relationship with food in a fun and convenient way.

Most participants expressed wanting to be more knowledgeable about diet and nutrition but found the amount of contradictory information out there overwhelming or just plain boring. The feedback received indicated that users wanted to gain knowledge in a fun and entertaining way.

Personas:

Key Insights:

Through my research I discovered some definitive user needs.

Education

Users want accurate information and tools that will help them demystify nutrition labels

Fun Ways to Learn

Users want fun ways to learn about diet and nutrition

Healthy Relationship

to Food

Users want to develop healthy relationships

with food and nutrition

Ideation: I designed multiple iterations of the app in order to address gaps found during research. My focus was specifically on providing tools to demystify food misinformation and create fun ways to provide information

surrounding nutrition.

Paper wireframe of the homepage design for The Teen Health Network app

Process: After ideating and sketching some paper wireframes, I developed the initial designs for the Teen Health Network app. The initial designs focused on providing teens with various resources to increase their knowledge including recipes, articles, videos from popular social media applications, and in-app games to test their knowledge.

Home page digital wireframe

Articles page digital wireframe

Game play page digital wireframe

Scanner page digital wireframe

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow and enabled the user to navigate the site and explore the trivia games.

The low-fidelity prototype can be

viewed here.

Usability Study Findings: I conducted two rounds of usability studies, using the findings from the first round to iterate the mockups that would be used for the second round of studies. The second study involved providing users with a high-fidelity prototype to determine what aspects of the mockups needed refining for the final product.

Solution:

Based on the insights from the usability studies, I applied changes like providing an organized, categorized result list of the ingredient scanned using the scanner feature.

It was discovered in the usability study that people want a fun way to educate themselves. I created two games, which I iterated upon to address issues such as adding a timer to up the stakes for the player as well as adding a white outline to all images to increase accessibility for visually impaired users.

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including the changes made based off of the usability study. The high-fidelity prototype can be accessed here.

Responsive Website Design: With the Teen Health Network app finalized, I started designing the responsive website. I used the sitemap that I created to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Sitemap for The Teen Health Network responsive website

Paper wireframes for The Teen Health Network responsive website

Paper wireframes of the Home page for The Teen Health Network responsive website

Paper wireframes for The Teen Health Network mobile responsive website

I connected the navigation of all the pages for both the desktop and mobile version of the website to test the user flow.

The low-fidelity prototype can be

viewed here.

I developed the low-fidelity prototypes into mockups with imagery, iconography, and elements from the app that would carry over well into a website format.

All mockups were then connected to create the high-fidelity prototype for The Teen Health Network various responsive website formats.

The high-fidelity prototype can be

viewed here.

Conclusion: The Teen Health Network's app and website design puts the power of knowledge and education surrounding food and nutrition in the hands of the user. Users shared that the app has inspired them to begin cooking healthy meals at home and feeling confident in making healthy choices.

The issues the Teen Health Network are seeking to resolve are massive and this project reflected that. However I learned that by breaking down the entirety of the project into approachable steps and aligning myself with the needs of the user I was able to come up with a cohesive app and responsive website that addresses said issues while also being useful.

A quote from one of the study participants:

“The Teen Health Network app makes learning easy because of the games and videos you can engage with.”