Salsa
Website Redesign
SALSA is a nice & spice mexican inspired restaurant.
Client: Located on the ground floor of an office building in the Palas complex, SALSA brings customers closer to the exotic flavor of Mexican food.
Timeline: Mar - Apr 2021
UI/UX Design
The Assignment.
• The client wanted a redesign for their business local website. It looked outdated and did not reflect the brand's tone and style.
• The task involved large changes to the website’s functionality, in addition to the overall look and feel.
Goals & Objectives.
• Make more visitors take the action of purchasing items from the website and increase their interest in Salsa products for future orders.
• Tidy up the layout, make it more intuitive and easy to understand. Make sure that the website general look and feel stays consistent and on-brand.
01.
WEAKNESSES & POTENTIAL IMPROVEMENTS
Identifying the potential setbacks in the previous web design.
• It was designed as a single page website, which made it difficult to use, considering the abundace of content and lack of structure.
• No headline to set the tone and explain what they are all about.
• The page lacks personality and brand presence.
• UI looks outdated.
• There is no option to add several products of the same category to the shopping cart.
• It is difficult to navigate through the main categories of food items. There is no filter or drop-down menu for the categories, makes it difficult for the user to decide between the vast amount of products.
The Before
& After
02.
SOLUTIONS
Homepage.
• After the redesigning, it’s very clear what they are selling, what is their specialty. The image and the headline on the hero section reflect the Mexican cuisine they are specialised in.
• In general, I went for a much modern/current look to the whole design, adding more negative space, making the content easier to follow.
I added more personality and visual flair according to the brand identity.
• I reorganised and simplified the navigation elements, some of them were repetitive, which made the overall user experience a bit confusing.
• I also added a CTA button to invite users to access the food menu page in order to explore the many different food items.
The food menu page.
I organized all the food items into different categories with the possibility to view a specific one without having to scroll all the way down and back up the entire page.
The categories are displayed on the fixed navigation menu, which remains visible and in the same position as the user scrolls down and moves across the page.
• I also added some filters in order to allow users to narrow down the number of items displayed.
• Next to the CTA button (add to shopping cart), I included the option to add more than one item at once, feature that was missing from the previous website.
03.
UNDERSTANDING THE USERS
User Persona. Defining the user persona helps me better understand the target group and address its needs.
User Flow. Displays the complete path a user takes when navigating the website.
04.
Starting the design
Skeletal Framework. The simplicity of wireframes allows me to quickly test ideas and to craft content without diving into details, by taking into account user needs and user journeys.
High Fidelity Wireframes.
05.
VISUAL SYSTEM
I started to work on this project by focusing as well on the visual system, making sure that the interface follows the same visual style, has the same shine across the entire product’s visual communication.
I made an inventory of all the colours, text styles and assets which I was going to use in the design process.
06.
DELIVERABLES
Below you can see previews of the mobile and desktop version of the UI design.
