New_thumbnail.png

UX Design, UI Design,

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.

Group 563.png

Header/Nav Bar

Group 550.png

Salsa & Beer logo is pixelated.

Group 444.png

The color red on yellow background does not pass the color contrast accesibility.

Group 435.png

The “Click To Order” does not take you to an ordering page. It takes the user to their locations page.

Group 436.png

The nav link text for “ABOUT SALSA AND BEER” is long.

Group 692.png

Landing Page

Group 550.png

Social media posts on the right can be distracting to the user because this feature is outdated.

Group 444.png

The CTA cards are not legible and consistent with theirs fonts and buttons.

Group 435.png

The website is using 12 px text size which is not the appropriate minimum body text size for desktop and mobile.

Group 436.png

The “FULL SERVICE CATERING AVAILABLE” is not a button and can confuse the user to click on it.

Group 693.png

Menu Page

Group 550.png

It’s hard to see the nav link title when the user hovers over a page link.

Group 444.png

The page doesn't show any photography of the food.

Group 435.png

The menu list is shown in bullet points. There's also not enough leading between each menu item.

Group 436.png

The drop menu contains, so much information and is not entertaining for the user.

Group 694.png

Locations Page

Group 550.png

The page shows a lack of hierarchy with the location name and the information.

Group 444.png

The page doesn’t show all of their locations and business hours information.

Group 435.png

The phone numbers are not specific if they are fax or landline numbers.

Group 436.png

The page has a huge google map at the bottom that only shows one location.

Group 710.png
Group 711.png

Mobile Screens

Group 550.png

The mobile view is not responsive.

Group 444.png

Due to not being responsive, it makes the content hard to read.

Audit Summary

Group.png

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.

Group-1.png

Typography

The website is not using the appropriate minimum body text size. They need to use 16 px instead of 12px.

Group-2.png

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.

Group 700.png

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.

Group 699.png
Group 712.png

Site Map

This is a visual map of the pages for the new website design.

Group 722.png

Mid-Fidelity Wireframes

Organized all the pages based on the site map, and began to build desktop and mobile mid-fidelity wireframes.

Desktop Wireframes

Group 724.png
Group 723.png
Group 725.png
Group 726.png

Mobile Wireframes

Group 727.png
Group 728.png

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.

style tile.png

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

High fidelity-Menu 1.png
High fidelity-Menu-1 1.png
High fidelity-Menu.png
High fidelity-Menu-1.png
High fidelity-Menu-2.png
High fidelity-Menu-3 1.png

Mobile Wireframes

Mobile- home -HF 2.png
Mobile- About.png
Mobile- home -HF- open hamburger.png
Mobile-gallery -HF- locations 1.png
Mobile-gallery -HF.png
Mobile-menu -HF.png

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

main small thumbnail.png

UX Design, UI Design

CSUN Connect App

recyclerefund_thumbnail.png

UX Design, UI Design

RecycleFund