THE CHALLENGE
While the website had one landing page, it was missing many key components to draw users to the website. Many necessary features were missing, such as having their menu online or introducing themselves to their customers. A big challenge in this project was also keeping up with the current interface design for desktop and mobile.
THE GOAL
-
Understand what users of this business target
-
What users feel while navigating website
-
What frustrates users most
-
How we can avoid those pain points as we redesign the site.
VIDA HEALTH BAR
Live La Vida Healthy
Mobile + Desktop Website Design
About Vida Health Bar
Brothers Tony and Freddy Alcazar and Aaron Barba are the owners of Vida Health Bar, located at 502 W. Nob Hill Blvd. This small healthy food choice business has begun to pick up popularity with its delicious and healthy meal choices via social media posts on Facebook and Instagram. They specialize in gluten and dairy-free, all-organic smoothies, juices, grain bowls, fruit bowls, and even pudding made from Chia seeds, coconut milk, strawberries, and banana.
INCONSISTENT FONT & STYLE
As the user scrolls down, there are more features, such as yelp reviews or the company story that talks about their origins. However, all the font styles seem to jump all over the place and remain inconsistent with one another. The inconsistency is especially prominent when moving from paragraph to paragraph, which is a big no in design.
FULL SITE = 1 PAGE
Thinking in terms of what the users might need most from this website, the fact that they squeezed so much information onto one page of a website does not benefit their customers in any way. In fact, it creates a wall of information the user has to actively read, instead of easily finding specific info from the menu or the navigation. To remedy this, I broke the information into manageable pages that include the Home, Life Menu, and About pages. Other texts on the page are emphasized with icons and images to draw the user's attention toward certain parts of the page with the most necessary info for the users.
IDEATION
With the results from my research in place, it is time to start putting some ideas onto paper. I made wireframes for all the pages I thought might be useful to the user. I made a version for desktop, mobile, and tablet interfaces.
COLOR PALETTE
Using the client's logo design, I started with the two base colors in the middle of the palette on the right and then spread out from warm to cool colors that could be used as shadowing or accent colors. Below is the logic I used to come up with my color palette.
PROTOTYPE
With the research, visual design elements, and information architecture in place, it is time to put them all together into a functional website prototype. I used Figma to build the digital wireframes and high-fidelity prototypes as to ensure ease of collaboration and make it easier to share for feedback. Click on the video below to see the video prototype of the website.
MY APPROACH
Empathize
Define
Ideate
Prototype
EMPATHIZE & DEFINE
With the initial concept in place, I started this project by researching online opinions people posted online about coffee shops, cafes, smoothie joints, and etc. I also talked a few regulars of the cafe, and looked at online Yelp review which helped me shape my personas, user stories, and user flows.
ASSUMPTIONS
An assumption I am maintaining as I go into this research is that users are generally health centric folk, or people who are somewhat interested in picking healthier food choices. So gearing my research towards what those users want in a cafe website would allow me to create a more robust website tailored to their needs.
USER PAINT POINTS
"I want to know the ingredients of my order for health restriction purposes."
"I can't tell what the order looks like or contains from the blurry menu picture."
"I want to be able to read the text on any screen size."
"I want to easily navigate to the cafe."
USER STORIES + FLOWS
"I want to easily see the items on the menu so that I can tell what I am ordering without my glasses."
"As someone with Type-1 diabetes, I want to find out what the ingredients are so that I can stay within my recommended sugar levels.
Mobile/Tablet Wireframes
Desktop Wireframes
ICONS
While designing this website, I wanted to incorporate a fun and vibrant theme. To do that I found/created icons that are used to help users interpret information throughout the entire website. These icons are used to help ease the user's understanding of the information on the site visually.
TYPOGRAPHY
As per the client's request, the title font is Architect's Daugther and the body font would be Arial. In doing so, it also accounts for readability in the body text. It also allowed me to bold/italicize information that needed to be highlighted or attention-grabbing.
Key Contributions
Interaction Design
Visual Design
Branding
Research
Tools Used
Figma
Photoshop
Illustrator
Sketch
Duration
Jul-Sep 2022
(3 months)
My Role
UX Researcher
UX Designer
A LOOK AT THE OLD WEBSITE
TOO MUCH SPACE + TOO LITTLE CONTRAST
Looking at the old site, there is too much white space and too little contrast. It makes it hard to read the text if the font size is too small, especially for those with bad eyesight. So creating a new color scheme to use for the site becomes a priority, in order to strengthen the brand.
