Salsa & Beer

Duration
January 2022 - Match 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.

Audit Summary

Design

Salsa & Beer doesn't follow the correct UI elements like spacing, leading, hierarchy, and color contrast. For example, the colors on the site it doesn't pass the web content accessibility guidelines.

Typography

They are not using the appropriate minimum body text size. They are using 12px instead of 16px.

Layout

Their content is hard to see on mobile view 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

Style tile is an essential part of a project as it helps create a standardized system of colors, fonts, buttons, and many other components that will be combined and displayed on users screens. I went for a modern and friendly design look, so users can feel welcome and comfortable.

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

Thanks for stopping by, let's connect!