VitaChoice Supply

UX Design | UX Research | Visual Design

Mockup screens of VitaChoice Supply website

Project Overview

VitaChoice Supply

An online store that helps you find health supplement products based on your body, lifestyle, and fitness goals.

Figma Links:
VitaChoice High-Fidelity Prototype - Desktop
VitaChoice High-Fidelity Prototype - Mobile

Role

UX Researcher, UX Designer

Duration

August 2023 - October 2023

The Problem

Most people aren't sure what supplements they should be taking to meet their specific health goals. The overwhelming amount of options at stores can leave beginners confused and discouraged. It also doesn't help that there is tons of contradicting information and misleading advertising out there. Doing your own research to find reputable resources would take too much time and effort, and hiring a personal nutritionist expert would be too expensive.

The Goal

An online store that helps users find health supplements by recommending trustworthy products and providing factual information based on their specific needs and goals.

User Research

I identified my target audience as people who are working towards a fitness goal and are interested in purchasing health supplements. After finding 6 participants that matched those characteristics, I conducted interviews with them to learn about their motivations and pain points.

Pain Points

01.

The amount of options for supplements is overwhelming and it takes too much time and effort to do research.

02.

There is a lot of misinformation and shady advertisements on the Internet for products with false promises.

03.

Hiring a personal nutritionist to figure out what supplements are compatible with your specific health needs is too expensive.

04.

Supplement stores that are targeted towards body-builders and gym junkies are intimidating for beginners.

Survey Results

83% of participants weren't sure what supplements they should be taking.

83% of participants were discouraged by the amount of time and effort it would take to research what supplements would be good for them.

100% of participants were not willing to hire a personal nutritionist because it is too expensive.

User Persona

Profile of a man in his late twenties.

Accountant | Richard Wilde

Age: 28
Location: Hilo, HI

Background

  • Works at a nonprofit organization as an accountant
  • Married and lives with his wife, 3 year old daughter, and pet cat
  • Usually stays active by jogging around his neighborhood, but recently started a gym membership with his wife

Goals & Frustrations

  • Lose weight and gain lean muscle in a healthy way
  • "Walking into GNC is pretty intimidating...there's so many options, I have no idea where to even start."
  • "There's all kinds of ads online to 'lose 50 pounds in 4 weeks,' but they seem pretty scammy and I'm not sure how healthy they really are."
  • "I don't time to do the research, I would rather have someone just tell me exactly what I need."
Profile of an older woman.

Retired | Martha Henson

Age: 65
Location: Honolulu, HI

Background

  • Retired and stays at home with her husband who is also retired
  • Occasionally babysits her 6 year old grandson
  • Walks her dog in the mornings every day

Goals & Frustrations

  • Become stronger, build endurance, and gain weight
  • "As I get older, it's become even more important to me what goes in my body."
  • "I don't really know much about nutrition, so I need someone to explain things in a way that is easy for me to understand."
  • "It's hard to find supplements that are okay for me to take with all of my diet restrictions."

Ideate

After I got a good idea of what my target audience was looking for, I started brainstorming the overall structure of the website and what features to include.

Low-Fidelity Prototype

Figma Link: VitaChoice Low-Fidelity Prototype

Multiple low-fidelity prototype digital screens for VitaChoice Supply

Usability Study

I met with 5 participants over video call to test my low-fidelity prototype and find areas of improvement.

Findings & Iterations

Before usability study. Users found it hard to tell how many questions they had left to complete, even with a progress bar. Users weren’t sure when you could select more than one answer.

After usability study. Added percentage so that users know exactly how close they are to completing the quiz. Increased font size of form instructions. Changed the styling of multi-select options to be checkboxes instead of radio buttons.Before usability study. Users felt that the quiz options didn’t always cover every possibility (e.g., no option for ½ serving a day). Users did not notice the “Back” button.

After usability study. Increased size of “Back” button and relocated it to a more obvious/expected area. Changed verbiage to cover all possibilities (e.g. use “less than” and “more than”).Before usability study. Users weren’t sure what product they were looking at and how to return to their list. Users weren’t sure why products were recommended and how to compare them.

After usability study. Added a link to “Go to My List”. Added a header and short description of the product. Added tags to bring attention personalized product details.Before usability study. Users wanted to see how the product meets their specific needs (e.g. gluten free). 

After usability study. Added tags for personal product details based on quiz results and filters.Before usability study. Users weren’t able to confirm all of their Contact information before paying because the summary only the email. Users mistook the “Apply” button for the “Next” or “Pay Now” button.

After usability study. Included the Contact name and phone number to the summary. Changed styling to be a secondary button so that the “Pay Now” button stands out more in comparison.

Final Design

The final design addresses all the main pain points I collected during the user research phase and also applies the feedback I received from the usability testing.

High-Fidelity Prototype

Click through the prototype or see links here:
VitaChoice High-Fidelity Prototype - Desktop
VitaChoice High-Fidelity Prototype - Mobile

Solutions

These are all the features that directly address the four main pain points from my user research.

VitaChoice homepage desktop and mobile screens
Welcoming and convenient

Unlike other supplement stores that specifically target body-builders, VitaChoice's branding and tone is friendly and inviting to anyone simply looking to improve their health. Customers do not need to leave their house or speak to anyone to get personalized, quality products.

Going Forward

After going through the full design process from start to finish, I was able to create a final product that successfully helped users find trustworthy health supplements based on their specific needs and goals. Now is time to reflect on what I learned and brainstorm next steps if I were to continue with this project.

What I Learned

Since the end users of this particular project are people of all ages, backgrounds, and lifestyles, I had to empathize with various perspectives and realized just how important user research really is. Every interview with participants was valuable because I discovered something unexpected that I would have never thought of before. Even when something seems obvious to me, I learned that it is never safe to assume and it's best to learn from the end users themselves.

Next Steps

01.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

02.

Execute ADA tests on screens to find areas of improvement for accessibility.

03.

Design and implement more features, such as creating your own lists, comparing items, and learning more about certain benefits