Group 361.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 each and every client the best product, service, and experience in their 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

Their website and mobile have a lot of problems. Both website and mobile are not accessible, it’s not responsive, and they are not designed very well.

Solution

Redesign both the website and mobile to look better and more accessible.

Website & Mobile Audit

Reviewed Salsa & Beer desktop and mobile experience .

Group 542.png
Group 542.png
Group 542.png

Header/Nav Bar

1

Salsa & Beer logo is pixelated.

2

The color is not used right. Red on yellow background does not pass the color contrast accesibility.

3

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

4

The nav link text for “About” is long.

Group 543.png

Landing Page

1

Social media posts on the right can be distracting to the user.

2

All content is centered. It doesn’t go full width.

3

The thumbnails on the cards and slideshow are not designed very well.

4

The landing page is using more than two fonts. It’s using 12 pxs which is not the appropiate mininum font size.

5

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

Group 544.png

Menu Page

1

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

2

Doen’t show any images of the food.

3

They show their Menu in bullet point list.

4

The website has a lot of negative space.

5

The drop down menu is long.

Group 545.png

Locations Page

1

They show a lack of hierarchy with the location name and its information.

2

Doesn’t show all of their locations and business hours.

3

They are again using 12pxs font which is not the appropriate minimum size.

4

The phone numbers are not specific if they are a fax number or if it’s a phone number.

5

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

Group 546.png
Group 547.png

Mobile Screens

1

The mobile screens are not responsive.

2

The screens for mobile is still seen as desktop

3

Everything is hard to see because the content is small.

4

The background changes color from a gradient to a solid color.

Audit Summart

  • Salsa & Beer website and mobile are not following the basic design elements.

  • They are not using hierarchy. 

  • They are not using the appropriate minimum font size.

  • Their pages have a lot of negative space.

  • They are using a feature that is outdated like telling the users the data of how many emails, retweets, and likes were shared. 

  • Their mobile view is not responsive.

Personas

User personas helps to shape product strategy and main points. Here we present two user persona which is describing the needs of our target user.

Group 551.png
Group 550.png

Site Map

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

Group 548.png

Mid-Fidelity Wireframes

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

Desktop Wireframes

low fidelity-desktop-Home.png
low fidelity-desktop-About.png
low fidelity-desktop-Menu.png
low fidelity-desktop-Menu drop down menu.png
low fidelity-desktop-Menu-pop up.png
low fidelity-desktop-Gallery.png
low fidelity-desktop-Gallery-1.png
low fidelity-desktop-Location.png

Mobile Wireframes

low fidelity-Mobile- home low fideliy.png
low fidelity-Mobile- home low fideliy.png
low fidelity-Mobile-menu -HF.png
low fidelity-Mobile drop down-menu -HF.png
low fidelity-Mobile-menu pop -HF 1.png
low fidelity-Mobile- locations.png
low fidelity-Mobile- Gallery.png
low fidelity-Mobile- Gallery-1.png

Style Tile

Once the user flow and mid-fidelity was complete. I started by defining the typography, color, icons, and buttons. 

Group 549.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

Group 555.png
Group 554.png
Group 557.png
Group 556.png

Shows the user

information of the

restaurant.

Logo is not pixelated and it's placed in the middle of the nav bar.

A button, so the user can see the menu.

The user can click on the button to book a reservation

The user can click on the down arrows icon to view the other menu options.

An image of the food item after the user clicks on the camera icon.

A camera icon on some food items, so the user can see an image of what the food looks like.

Mobile Wireframes

Group 558.png
Group 559.png

User can click on the hambuger menu to go to other pages.

User can click on

the image to view it

big in their

mobile  screen.

A pagination, so the user can view more images.

Same background color like the desktop to be consistent with color.

A carousel that the user can manually move to view some images that Salsa & Beer have in their social media accounts.

Reflection

This project is continuing, but I challenged myself to think deeply about how I can make this website look better and be accessible. I also make sure that I designed the website to look responsive on mobile. 

 

The next steps would be to come back and finish the design. I will also do some user testing to get some feedback on what I need to fix. 

More Case Studies

retro fit thumbnail.png

Branding

RetroFit Expo

recyclerefund_thumbnail.png

UX Design, UI Design

RecycleFund