My Role
UX/UI Designer
UX Researcher
Product Designer
Duration
Jul-Nov 2022
Tools
Figma
Photoshop
Discord
Premiere Pro
Deliverables
Figma Prototype
Information Architecture
User Flow
Video Prototype
Design Process
Discover
Research
Ideate
Design
Test
DISCOVER
Context
Vida Health Bar is a health-centric smoothie cafe located in Yakima, WA that uses fresh and organic ingredients to deliver healthy smoothies, acai bowls, and lunches to their customers.
PAIN POINTS
Small text is difficult to read
Cannot to find important Info
Navigation was unclear
PROBLEM STATEMENT
The main problem was how uninteractive the website was. It didn't invite users to explore further and gives no insight into what they serve there.
GOALS
-
Understand target audience frustrations
-
Improve site navigation
-
Showcase Vida's menu for new customers
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
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.
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.
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
TYPOGRAPHY
Heading 1
Open Sans Bold 48pt
Heading 2
Open Sans Bold 22pt
Caption 1
Open Sans 18pt
Body
Open Sans 16pt
COLOR PALETTE
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
2. The initial footer design took up too much digital real-estate, so we pivoted the design to a smaller height.
Before
After
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.
