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 nutritional information efficiently. The goal was to reduce friction in ordering and 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)
-
Bring menu and products upfront to entice 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
As the main goal is to showcase the menu and constantly display the contact information, the user flow of the entire site is split into five pages -- Home, About, Smoothies, Bowls, Lunches.
Lo-Fidelity Wireframes
To define features for each page, I sketched the paper wireframes to iterate ideas for the next stage of 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 the UI was compiled, I started using Figma to design the hi-fidelity designs.
Homepage
Smoothie Menu
Bowl Menu
Lunch Menu
About
TEST
Priority Revisions
After developing the initial prototype, I tested the design to make any revisions before delivering the prototype to the client. 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 that are required in good website design.
I learned how to create a clean user flow that would allow users to digest a lot of information quickly.
I learned how to integrate other technologies to make developing deliverables and prototypes easier.
I would have liked to test the design with more people, but given the short deadline, I was unable to get more participants for my test.
