Salsa & Beer
Duration
January 2022 - March 2022
Role
UX Designer, UI Designer
Tools
Figma, Adobe Illustrator
Overview
Salsa and Beer go to great lengths in offering every client the best product, service, and experience in our cuisine and brand. They serve high-quality authentic Mexican food from Jerez Zacatecas. They have four locations in the San Fernando Valley. They have three locations in the city of North Hollywood and one in Lake Balboa.
Problem
The original website is not following the accessibility guidelines, it’s not responsive, and the design needs to upgrade.
Solution
Redesign the original website by following the accessibility guidelines, being responsive, and reorganizing the layout with a new style guide to engage more users and be user-friendly.
Website & Mobile Audit
Reviewed Salsa & Beer desktop and mobile experience.
Header/Nav Bar
Salsa & Beer logo is pixelated.
The color red on yellow background does not pass the color contrast accesibility.
The “Click To Order” does not take you to an ordering page. It takes the user to their locations page.
The nav link text for “ABOUT SALSA AND BEER” is long.
Landing Page
Social media posts on the right can be distracting to the user because this feature is outdated.
The CTA cards are not legible and consistent with theirs fonts and buttons.
The website is using 12 px text size which is not the appropriate minimum body text size for desktop and mobile.
The “FULL SERVICE CATERING AVAILABLE” is not a button and can confuse the user to click on it.
Menu Page
It’s hard to see the nav link title when the user hovers over a page link.
The page doesn't show any photography of the food.
The menu list is shown in bullet points. There's also not enough leading between each menu item.
The drop menu contains, so much information and is not entertaining for the user.
Locations Page
The page shows a lack of hierarchy with the location name and the information.
The page doesn’t show all of their locations and business hours information.
The phone numbers are not specific if they are fax or landline numbers.
The page has a huge google map at the bottom that only shows one location.
Mobile Screens
The mobile view is not responsive.
Due to not being responsive, it makes the content hard to read.
Audit Summary
Design
The website does not follow UI elements like spacing, leading, hierarchy, and color contrast. It needs better branding colors to pass the web content accessibility guidelines.
Typography
The website is not using the appropriate minimum body text size. They need to use 16 px instead of 12px.
Layout
The website content is hard to see on mobile because it’s not responsive.
Competitive Analysis
With a competitive analysis, we can establish what makes our product or service unique.
Personas
User personas help to shape product strategy and main points. Here we present two user personas which is describing the needs of our target user.
Site Map
This is a visual map of the pages for the new website design.
Mid-Fidelity Wireframes
Organized all the pages based on the site map, and began to build desktop and mobile mid-fidelity wireframes.
Desktop Wireframes
Mobile Wireframes
Style Tile
Once the sitemap and mid-fidelity were complete. I started by defining the typography, color, icons, and buttons. I recreated the brand’s color and fonts to make the site visually appealing. I went with a light creme background with dark black and red foreground color to pass the web accessibility guidelines.
High-Fidelity Wireframes
After designing my mid-fidelity wireframes & style tile. I moved on to my high fidelity screens with real content, color, icons, and imagery. Here are some screens of the new design and updates.
Desktop Wireframes
Mobile Wireframes
Reflection
This project is continuing, but I challenged myself to think deeply about how I can make this website visually appealing and user-friendly.
The next step is to come back to do some user testing to get feedback on the recent prototype.
More Case Studies
UX Design, UI Design
CSUN Connect App
UX Design, UI Design
RecycleFund