THE CHALLENGE
While the website had one structured landing page when it got to me, it was missing key components to draw users to their website. They needed more functions other than getting directions to the store, such as having their menu online or telling their customers about themselves. A big challenge in this project was also keeping up with native interfaces that work for both desktop and mobile settings.
THE GOAL
The goal is to understand what users of this type of business need and what they are feeling as they navigate a cafe website. It will show what frustrates users the most when navigating these websites, and how we can avoid those pain points as we redesign the site.
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.
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.
UI ELEMENTS
The following UI elements are components whose instances are reused and repeated throughout the website. This include menus, buttons, the footer, and some other interactions that are preset before adding them to the prototype.
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.
Mobile/Tablet Wireframes
Desktop Wireframes
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
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.
A LOOK AT THEIR CURRENT SITE
Too Much White Space + Little to No Contrast
Looking at their current website, there is too much white space left for free use. On top of that, with the tiny amount of contrast available on the site, it is hard to read any text on the page if the font size is too small. This could be especially bad for those with bad eyesight. So immediately the first step is to create a new color scheme for the company to use in order to strengthen its branding. The only flash fo color we get is from the top, and the rest is essentially in black and white.
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-no in design.
Entire Website = 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 text for the user to have to scan and find information, instead of easily finding specific info from the menu or the navigation architecture. 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.
INFORMATION ARCHITECTURE
Desktop
Menu Items separated by category
Describes business appeal
Navigation bar that allows users to travel between pages easily
Seasonal Specials
Tablet
Logo + Home Button
Navigation Menu
Contact Info
Menu Categories
Menu Button (mobile + tablet only)
Mobile
