Design Process
Discover
Research
Ideate
Design
Test
DISCOVER
Problem Statement
Vida Health Bar lacked intuitive workflows for customers to explore menu options, place orders, and access info efficiently. The goal was to reduce usability friction to increase user confidence and engagement with the brand’s digital touchpoints.
GOALS
-
Understand target audience frustrations
-
Improve site navigation
-
Showcase Vida's menu for new customers
PAIN POINTS
Small text is difficult to read
Cannot to find important Info
Navigation was unclear
Business Opportunities
-
Invite users to explore the website
-
Provide business info (address, contact)
-
Promote the menu and products to customers
Old Vida's Menu
Recommendations
Ease Navigation
More features that make navigation easier for users.
HQ Images + Ingredients
Virtual presence for menu, and info on ingredients
Accessible INFO
Clear info about hours, address, and contact info in footer.
RESEARCH
User Persona
PROBLEM STATEMENT
"As a college student with Type-1 diabetes, I want to see food restrictions on the menu so that I can stay within my recommended sugar levels."
Competitive Analysis
Our main competitors, like Starbucks and Dunkin Donuts, revealeld some pain points users felt with the old site.
DESIGN
User Flow
Since one goal is to showcase the menu and contact info, the entire site is split into five pages -- Home, About, Smoothies, Bowls, Lunches.
Lo-Fidelity Wireframes
To define core features, I sketched lo-fidelity paper wireframes to iterate on ideas for the design.
Mid-Fidelity Wireframes
The layout structured around a navigation that allows the user to easily navigate across all the pages in the user flow.
MOBILE
DESKTOP
UI COMPONENTS
COLOR PALETTE
TYPOGRAPHY
Heading 1
Open Sans Bold 48pt
Heading 2
Open Sans Bold 22pt
Caption 1
Open Sans 18pt
Body
Open Sans 16pt
Hi-Fidelity Wireframes
Once the features and UI were compiled, I started using Figma to design the hi-fidelity designs.
Homepage
Smoothies
Bowls
Lunch
About
TEST
Priority Revisions
After developing the initial prototype, I tested the design for any revisions before delivering the prototype. A few priority revisions were quickly addressed before delivery:
#1: Transparency to showcase header image
Before
After
#3: More Contrast for Hovering
Before
After
#2: Smaller Footer Design
Before
After
Reflection
This was a great project to work on, as I learned a lot of heuristic values required in good website design. I learned how to create a clean user flow that allows users to digest a lot of information quickly.
I would have liked to test the design with more people, but given the short deadline, I relied more on interviews with a small number of users.
