Salsa & Beer

Duration
January 2022 - Match 2022

Role
UX Designer, UI Designer

Tools
Figma, Adobe Illustrator

Overview

Salsa and Beer is committed to delivering the finest product, service, and overall culinary experience to each customer. Specializing in high-quality, authentic Mexican cuisine from Jerez Zacatecas, they have established a presence with four locations in the San Fernando Valley. Among these, three are situated in North Hollywood, while the fourth is located in Lake Balboa.

Problem

The original website lacks adherence to accessibility guidelines, is non-responsive, and requires a modern design upgrade.

Solution

Revamp the original website by adhering to accessibility guidelines, ensuring responsiveness, and reorganizing the layout with a new, modern style guide. This aims to attract more users and enhance overall user-friendliness.

Website & Mobile Audit

Reviewed Salsa & Beer desktop and mobile experience.

Audit Summary

Design

Salsa & Beer does not adhere to proper UI elements, such as spacing, leading, hierarchy, and color contrast. Specifically, the colors used on the site do not align with 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

I've taken on the challenge of thoroughly contemplating how to enhance the visual appeal and user-friendliness of the website. The subsequent step involves returning to conduct user testing to gather feedback on the latest prototype.

More Case Studies

Thanks for stopping by, let's connect!