UX Design, UI Design,
Salsa & Beer
January 2022 - March 2022
UX Designer, UI Designer
Figma, Adobe Illustrator
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.
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.
Redesign both the website and mobile to look better and more accessible.
Website & Mobile Audit
Reviewed Salsa & Beer desktop and mobile experience .
Salsa & Beer logo is pixelated.
The color is not used right. 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 you to their locations page.
The nav link text for “About” is long.
Social media posts on the right can be distracting to the user.
All content is centered. It doesn’t go full width.
The thumbnails on the cards and slideshow are not designed very well.
The landing page is using more than two fonts. It’s using 12 pxs which is not the appropiate mininum font size.
The “FULL SERVICE CATERING AVAILABLE” is not a button and can confuse the user.
It’s hard to see the nav link title when the user hovers over a page link.
Doen’t show any images of the food.
They show their Menu in bullet point list.
The website has a lot of negative space.
The drop down menu is long.
They show a lack of hierarchy with the location name and its information.
Doesn’t show all of their locations and business hours.
They are again using 12pxs font which is not the appropriate minimum size.
The phone numbers are not specific if they are a fax number or if it’s a phone number.
The page has a huge google map at the bottom that only shows one location.
The mobile screens are not responsive.
The screens for mobile is still seen as desktop
Everything is hard to see because the content is small.
The background changes color from a gradient to a solid color.
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.
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.
This is a visual map of the pages for the new website design.
Organized all the pages based of the site map, began to build website and mobile mid-fidelity wireframes.
Once the user flow and mid-fidelity was complete. I started by defining the typography, color, icons, and buttons.
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.
Shows the user
information of the
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.
User can click on the hambuger menu to go to other pages.
User can click on
the image to view it
big in their
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.
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.