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.
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, information architecture in place, it is time to put them all together into a functional website prototype. For this project, 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.
INFORMATION ARCHITECTURE
This project is a website design I worked on for Vida Health Bar, a small smoothie/acai bowl cafe in Yakima, WA selling healthy smoothies, acai bowls, and lunches for their customers. This high-fidelity prototype website includes a landing page, three menu pages, and an about page.
VIDA HEALTH BAR
Mobile + Desktop Website Design
Live La Vida Healthy
Role - UX Research, Design, Interaction, Visual, Branding
Duration - 4 months
Tools: Figma, Adobe Photoshop, Illustrator
Client - Vida Health Bar (under construction)
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 from the blurry menu picture."
"I want to be able to read the text on any screen."
"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
For more details on the research phase, see the full Google Slides presentation.