Vida Health Bar
Website Design
For customers looking for a health-packed meal, Vida Health Bar is a health-focused smoothie cafe in Yakima, WA, that offers fresh smoothies, acai bowls, and lunches made with organic ingredients. I was tasked with redesigning the site to showcase its menu for users browsing the website from any device.
UX Designer
Jul-Nov 2022
Research, Prototype, Design
Design Process
DISCOVER
Problem Statement
The main issue was the website's lack of interactivity, failing to engage users or showcase what they offer.
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 Information
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
Reviewing the main competitors, like Starbucks and Dunkin Donuts, revealeld some pain points users felt with the old website.
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
User Interface Design
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. To further showcase their header image, we could switched the coloring of the header background and text.
Before
After
Before
After
2. The initial footer design took up too much digital real-estate, so we pivoted the design to a smaller height.
3. Moving the sub-navigation from the top to the side, we highlighted the selections with color change rather than underlining.
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 do more was to test the design with more people, but given the short deadline, I was unable to get more participants for my test.
High-Fidelity Prototype
Watch video prototype OR
try Figma prototype below it
