CLOSE ✕
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

HEALTHIER

ux design / case study / Sep - Dec 2021

HEALTHIER is an app that focuses on healthy supplements, a tool to help people understand and learn the knowledge and cognition of healthy food. The main target users of HEALTHIER include college students and young adults. They care about their health and want to know more about what they can do to maintain their health.

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.

Challenge

The majority of people do not have a full concept or definition of nutritious food. Following research, it was shown that individuals want to learn more, but are frightened off by the vast number of proper nouns, which continues to lead to variances in the definition of healthy food.

Goal

Design an app that will improve education on healthy food and help people learn the healthy food they are interested in.

Research

I construct interview questions based on data from a study of young people about healthy foods, which I then use to perform user interviews. The majority of participants stated that they had no feelings about nutritious foods and do not consider they are necessary, but they are eager to learn more about them. The research results show unequivocally that if users have access to an easy-to-use tool to help guide them, they will be more open-minded and aware of nutritious foods.

Persona & User Story

type of user: An athlete

action: Learn the knowledge of nutrition

benefit: I can greatly choose the right nutrition to support my training

User journey map

Open the app to browse the nutrition types to learn the nutrition knowledge and find the right nutrition to support his training.

Problem statement

David is an athlete that needs to train every day who needs  to find and learn the knowledge of nutritional because he wants to find the right nutrition to support his training.

Ideation

paper wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Healthier app. These designs focus on delivering overview guidance to users to help them learn.

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to learn and using it in a browsing.

View HEALTHIER Low-Fidelity prototype

Usability Study

Parameters
  • Study type -> Unmoderated usability study
  • Location -> UK, remote
  • Participants -> 7 participants
  • Length -> 30-60 minutes

Findings
  1. Learn -> People want easy access to learning page that specifically use the healthy food they already known
  2. Add favourite -> People had difficulty adding favourite healthy food items to the app.
  3. Layout -> People preferred more images rather than words when browsing.

Affinity Diagram

Insights

Solution

Based on the insights from the usability studies, I applied design changes like providing a searching section from the home screen to browse healthy food specifically.

Additional design changes included adding an icon for saving favorite and providing a clear indication of images and fewer words of description.

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the HEALTHIER High-Fidelity prototype

Accessibility Considerations

Responsive Design

Information Architecture

With the app designs completed, I started work on designing the responsive website.I used the Healthier sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

Takeaway

Impact:

According to users, the app makes healthy food appear as if it might assist in identifying healthy food.According to one piece of peer feedback, "the Healthier app helps to elevate environmental care to a personal level simply and entertainingly."

What I learned:

I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

Next steps

  1. Conduct research on how successful the app is in reaching the goal to learn healthy food.
  2. Add more educational resources for users to learn about healthy food.
  3. Provide incentives and rewards to users for successfully learning healthy food.

Recent Projects

Top
Let's Work Together!!😉
Contact Me