UX Design

Responsive E-Commerce Website

UX Designer: Mark Mlynarski

Tools Used
Background
Los Gorditos is a casual dining restaurant serving Mexican & Tex-Mex comfort food for dine-in, delivery, take-away, catering, parties, & events. Now that Los Gorditos has a more reputable reputation in the restaurant business, they are looking to expand by creating a more streamlined way of reaching new customers with the internet, while also setting priority on the dining-in aspect of the restaurant.

A restaurant’s website is the new front door to their business and Los Gorditos is not looking to miss out. Although Los Gorditos has a website up and running, they have not taken it to its full potential. With a redesigned responsive website, Los Gorditos will have all the necessary features that will make their online restaurant experience worth visiting.
Goal
  • Redesign the look and feel of the website while making it responsive; with a focus on a redesigned homepage with a new refreshing new UI Kit to go along with the theme of the restaurant.
Solution
  • Create an in-house online ordering system where the user can easily access the menu and order for delivery or pick up.
  • Create an efficient and user-friendly online reservation form that seamlessly integrates with the restaurant's website
Problems
  • The restaurant website that is not responsive which can lead to a poor user experience for customers who try to access it on mobile devices. The website is difficult to navigate, the text is too small to read, and images are not displayed properly. This results in frustrated customers leaving the site without making a reservation or placing an order.
  • On their website, the restaurant does not offer an online menu for customers to view and place orders
  • Cannot make reservations online
Design Process
Empathize
Interview Process and Insights

Before starting any design solutions, I first had to familiarize myself with, and better understand, the pain points and challenges that users may face when using the current website or similar platforms, that way I can identify areas for improvement. To do this, I decided to interview 5 participants in the ages between 20-35.

When conducting the interviews, I wanted to better understand the process the user might take when placing an order online and making an online reservation. Furthermore, I also wanted to know what features would take priority over others when the user first enters a similar website.
‍

Needs
  • Streamlined ordering system that is easy to navigate
  • Place an order with customizable options
  • A clear menu for the user to be able to see the prices and details about the dish
  • Option to select another language
Frustrations
  • Too many step when trying to place a simple order
  • Poor mobile optimization
  • Lacking the possibility to make reservations online and through phone
  • Misplacement of content and irrelevant content
Motivations
  • A memorable design and flow that is consistent throughout the site
  • Visual representations of dishes when ordering online
  • A system that remembers the users last order information
  • A downloadable PDF menu is a big plus
Card Sorting
Once the interviews were completed, it was time to start content into meaningful groups. By asking users to group information into categories that make sense to them, I can gained insights into how users expect to interact with the website and where they expect to find information. This information helped me make informative decisions about the website's information architecture and navigation, ensuring that the website is intuitive and easy to use for all users.
Based on the card sorting matrix, items were consistently grouped together by most users, while others were more difficult to categorize or ended up in multiple categories.
Overall, the insights gained form this exercise helps ensure that the final product meets the needs and expectations of the target audience.
Competitive analysis
To furthur my research, I took began evaluating the strengths and weaknesses of competitors to gain insight into best practices, emerging trends, and opportunities for improvement. By analyzing our competitors, I am able identify opportunities to improve the restaurants current website user experience.

A restaurant's website is often the first point of contact today for potential customers, and it is crucial that it reflects the restaurant's brand identity effectively.

When looking closely at each of these restaurant's websites, they all covered all the basic necessities, especially in mobile optimization, but lacked in consistency and strong branding.

By using consistent branding elements such as color scheme, typography, and imagery, a restaurant can create a cohesive and engaging website that reflects its brand identity.

Define
Persona and Empathy Maps

From the research gathered, I was able to create a detailed persona of my target audience. Using this persona as a guide for my design decisions, I am better able to consider the user's goals, like finding an enjoyable dining experience, and pain points or frustrations.

Meet Joseph, he enjoys trying out different restaurants around his community and usually orders food online when he is busy at work or at home.

By using this persona, I can create a more effective and engaging user experience that this more likely to be adopted and successful in the market.
To further deepen my understanding of the user's needs, behaviors, and motivations, I created this empathy map.
With this empathy map we can see visual representations of the user actions and feelings related to a restaurant's online experience.
Ideate
User Flow

The userflow chart below was created to help me better understand the user's journeys they navigate through the  redesign of the website along with the new features that will be offered. By understanding and visually seeing the user's journey, I can make sure that the most important tasks are easy to find and easy to complete. Additionally, the userflow chart will help in finding any flows that seem confusing or required correction.

Task Flow

To further understand how to meet my goals, a task flow was generated to represent the user’s journey through each specific task. By mapping out the user journey, I was better able to identify potential pain points or areas where the user might get stuck or confused. This information was then used to create potential solutions in the design that make the user journey smoother and more intuitive.

Design
Wireframes and Sketches

When it finally came to the design of the website, I gathered all of my research and began brainstorming on how to combine all the information into a meaningful design. I began with sketches and with having the larger picture in mind, I then proceed to create Hi-Fi Wireframes.

A single page layout design for a restaurant is an effective way to showcase the restaurant's brand, ambiance, and other important information in a visually appealing and easy-to-navigate format. This can be particularly beneficial for customers who are browsing on mobile devices, as it reduces the need for excessive scrolling and clicking.

Homepage
Homepage
Other Wireframes

The new ordering online and reservations feature can be highly beneficial for the user as it will as it will provide customers with greater convenience and flexibility, as they can easily place an order or make a reservation at any time of the day or night, without having to wait on hold or physically visit the restaurant.

Ordering Online
Reservations
Establishing UI Design

By redesigning a few of the elements and a new typography, I look to bring a livelier feel to the website and user experience. This UI design will help enhance the restaurant's branding by incorporating its colors, logos, and other visual elements. The new look and feel will give the website a more professional look and feel.

Los Gorditos Design
Homepage

After combining the wireframes with the UI design template, the new restaurant website design I created boasts a stunning minimalistic design. The simple yet elegant layout of the website creates an immersive user experience that highlights the restaurant's key features, such as its history, vibrant atmosphere, menu items, location. The use of clean typography and vivid imagery helps convey the restaurant's brand message effectively while ensuring a smooth browsing experience for the users.

Original Design of the Website
New Design of the Website
Other pages

I improved the design of a restaurant's website by incorporating features that were previously missing, namely the ability to order online and make reservations.The addition of these features to the restaurant's redesigned website will provide a better experience for the customers, increase customer satisfaction, and ultimately lead to more business for the restaurant.

Online Ordering
Placing the Order
Reservation Online
Prototype Here
Let’s talk now!
Test
Usability Test

To further validate the design choices and changes I made for the Los Gorditose-commerce website, I ran a usability test for the prototype.
The test consisted of 5 participants.

The main tasks included:

All usability tests that were conducted in person or via video chat were successful.
Some questions and concerns did come up when completing the tasks via using an Maze.

Once the user had made their order, I included a feature where the user can select the option of having same thing ordered to them on a regular basis.
To my surprise, 4 out of the 5 participants stated that they would not use the subscription proposed in the prototype but it is a nice feature to have and possibly use on future orders.
Participants stated they like to frequently switch what they order which is why they would not necessarily use the feature.
Post Test Iterations
By reducing the amount of information that was being presented to the user during this phase, it became easier for users to understand and process the information that is presented. When there is too much information on the screen, it can overwhelm users, leading to confusion and cognitive overload.
Lightbox Menu Before
Lightbox Menu After
Conclusion
Takeaways
Creating a responsive design

If I have to take one major thing out of this project, it would have to be the importance of responsive design which ensures a consistent and user-friendly experience on different devices.

Another key takeaway is the importance of imagery and how one structures it. A restaurant's website relies heavily on imagery to showcase cuisine and the atmosphere it provides for it'c customers. When designing a website for a restaurant, it is important that we as designers clearly create a product that relates to the restaurant's branding.

Next Step
When looking forward, there are a few things I am considering
  • Include feature where the user can set up a profile for a more streamlined experience of ordering online
  • Because design is an iterative process, I will continue looking for feedback and make improvements as they come along