top of page

Vida Health Bar

Website Design

Redesigning a website for a health-centric smoothie cafe to make it more interactive and user-friendly.

My Role

UX/UI Designer

UX Researcher

Product Designer

Duration

Jul-Nov 2022

(5 months)

Tools

Figma

Photoshop

Discord

Premiere Pro

Deliverables

Figma Prototype

Information Architecture

User Flow

Video Prototype

Design Process

Discover
Design
Prototype
Deliver
PROBLEM

Hard to read info on site

Hard to find important Information

Navigation had no interaction

RESEARCH GOALS
  • Understand targeted audience

  • What users feel while navigating website

  • What frustrates users most

  • How we can avoid pain points as we redesign the site?

Discover the Problem

The first step was to make an evaluation of the old website design through a ux audit. The following heuristics needed to be addressed in the old design:

Design

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

After reviewing the main competitors, such as Starbucks and Dunkin Donuts, it revealeld a lot about the pain points users felt with the old website.

Ease of Navigation

More features that make navigation easier for users.

RECOMMENDATIONS
HQ Images + Ingredients

Virtual presence for menu, and info on ingredients

Accessible Information

Clear info about hours, address, and contact info in footer.

USER FLOW

To ease the navigation, I split the content into five pages -- Home, About, Smoothies, Bowls, Lunches.

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 + Tablet
Desktop
LO FIDELITY WIREFRAMES

After defining the features needed for each page in the user flow, I sketched the lo fidelity wireframes, exploring new ideas as I iterated into the next stage of the design.

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
ASSETS AND COMPONENTS

TEST AND DELIVER

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 showcase their header image more, so we 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.

PROTOTYPE

Watch video prototype OR view Figma prototype externally

bottom of page