top of page

Vida Health Bar

Mobile + Website Design

A web redesign project for a local cafe that specializes in all-natural smoothies, protein shakes, and fruit bowls.

My Role

UX Researcher

UX/UI Designer

Duration

Jul-Nov 2022

(5 months)

Tools

Figma

Photoshop

Discord

Premiere Pro

Sketch

Key Contributions

Interaction Design

Visual Design

Branding

Research

MY APPROACH

Empathize
Define
Design
Prototype
Test

WHO ARE THE USERS?

This persona informed the targeted customers' age group, goals, and frustrations. Other issues included readability, emphasis on food restrictions, and non-intuitive features. Understanding the persona's goals allowed me to develop a problem statement that helped support my design decisions down the road.

GOAL

Order and pickup for herself and her brother.

PROBLEM STATEMENT

As a college student with Type-1 diabetes, I want to see the food restrictions on the menu so that I can stay within my recommended sugar levels.

USER PAINT POINTS

READIBILITY

Small text on a harsh background and low-quality images makes the experience hard to enjoy for those with visual impairments.

FOOD RESTRICTIONS

Labels are essential for users who have restricted diets.

CAN'T FIND IMPORTANT INFO
NON FUNCTIONALITY

Needs a better way to access info more interactively.

Important info should be easy for users to find, like contact and location.

2
3
4
1

DEFINE THE PROBLEM

While reviewing the site, some notable design icks included:

  • No functionality

  • Navigation is nonexistent

  • Important information unreadable

  • Plain and boring

THE GOAL

  • Understand targeted users

  • What users feel while navigating website

  • What frustrates users most

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

USER FLOW

To make the design simple and easy to navigate, I split the content into five pages -- Home, About, and one of the different categories of food they had at the restaurant.

START DESIGN

COLOR PALETTE

TYPOGRAPHY

Architect's Daughter

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Arial

Caption | Bold 16 | Spacing 26

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean vel elit scelerisque mauris.

Body 1 | Bold 14 | Spacing 22

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean vel elit scelerisque mauris pellentesque pulvinar.

Body 2 | Spacing 20 | Bold 12

ASSETS AND COMPONENTS

Accessible Information

The footer has clear information about store hours, directions, and phone numbers users can contact.

Ease of Navigation

The site is less plain and boring with more features that make navigating the site easier for the user.

THE SOLUTION

HQ Images + Ingredients

Now users can see menu items along with ingredients so they can make informed decisions about their orders.

Mobile Wireframes

SKETCHES

Desktop Wireframes

While the client did not take all of the suggestions from the prototype, they were very pleased with how the design helped organize their navigation.

FEEDBACK

REFLECTION

Some additions that I would have liked to implement given more time...

More Icons/Illustrations

Debunk text walls by using more illustrations and icons so information can be transmitted faster and easily.

Pop Out Overlays

While making the experience more enjoyable, it allows more info to be added where it could not with the limited space.

Login Function

A login function that remembers regular customers and their orders.

PROTOTYPE

Watch for the video prototype OR interact with the Figma prototype externally by clicking the button.

bottom of page