Sushima
How we enhanced Sushima's user experience and created an online ordering feature
Product Photography
is from Mudrá
TIMELINE
DELIVERABLES
4 weeks
UX Research - High Fidelity Prototype
Sushima is a high-quality Japanese restaurant in Xativa that lacked a suitable online presence, including no online ordering option. We redesigned their website to enhance customer satisfaction and prevent revenue loss.
OVERVIEW
Vicente Malonda - Ana Calvo - Ricardo Baquero
TEAM
The challenge.
Sushima is a japanese restaurant located in Xativa, Valencia (Spain) that offers high quality sushi. They have a private room for guests, but they mainly offer a delivery/pick up service. They lack an online ordering service and their website has a poor user experience.
Except for a couple of japanese restaurants in town, they have no direct competition in a ratio of 20km. Sounds like the perfect opportunity to boost its business!
INTERVIEWS AND SURVEYS
Understanding the business.
We decided to gain some insights from Sushima’s stakeholders, their clients and food delivery app users to understand the business and its needs. So we conducted some interviews and a survey. This is what we learned:
Meeting user expectations.
Once we gathered all those insights, we created a User Persona: a fictional client, an archetype that represents all the needs of Sushima’s users. Meet Neus López!
Neus, as the food lover she is, wants to order sushi for dinner on a friday night. We mapped a user journey that focuses on her user experience.
How does she interact with Sushima? What does she find helpful? Does something frustrate her?
Some of the pain points she faces during the process are limited food delivery offer, no sushi deliveries in her town and when it comes to Sushima’s website, no delivery option, no photos, promotions or reviews displayed and orders blocked in peak hours.
User Journey
Alignment of users and business’ needs.
Sushima’s biggest issue was that its kitchen was too small to handle different orders at peak hours. So, how could we help users on their ordering journey while also adressing this problem?
Xativa food lovers need to find a way to order sushi from Sushima’s website with an optimal user experience
PROBLEM STATEMENT
DESIGNING THE SOLUTION
Let’s get on with it!
Once the problem was defined, we started crafting the solution. We created a Minimum Viable Product (MVP): a prototype we could launch as early as possible, so that it could undergo continuous iterations and improvements until the final product was created.
We brainstormed the features it should have and prioritized them.
Low Fidelity Prototype + Concept Testing
We sketched the initial prototype with all these ideas in mind. Then, we conducted a concept test with some people, to see what users had to say about it. Were we really listening to their needs? They had some interesting things to say:
Users didn’t understand the Vegan toggle button we displayed in each product.
We had a “Hurry up!” message to notify users it was peak hour. However, they perceived it as aggressive.
Mid Fidelity Prototype + Usability Testing
Round 2! After applying all user feedback, we finished the second version of the prototype: the Mid Fi.
Then, again (yes, again), we conducted a usability test, in order to evaluate how easy it was for people to use it. These were the final outcomes:
Users missed a vegetarian section in the menu.
Some of the buttons used to add and remove products from the cart were confusing.
The option to track an order with a code was not very intuitive. We had to display that feature somewhere visible for the users.
the new Sushima.
Introducing
Curious about how we turned Sushima's website from a basic prototype to a final product?
First step was picking four brand attributes that best described the new Sushima's vibe: young, experimental, open-minded, and trendy. Once we had our adjectives, we created a mood board to set the look and feel of the project.
Color Palette.
We moved on to selecting a color palette that would align with the desired look and feel of the Sushima website. Using the mood board as a guide, we meticulously evaluated a range of color options before ultimately deciding on salmon, cream, and dark brown as the primary colors.
To ensure optimal usability and visual hierarchy, we further employed a split complementary color scheme to designate success and error messages within the interface. In this approach, we utilized blue and yellow to create a striking contrast that was both visually appealing and effective in providing users with clear feedback.
Fonts.
To give the website a modern look, we chose sans serif fonts: Helvetica Lt Std Black Condensed for headlines and Avenir Bold for some titles, links and the body.
We also paid attention to color combinations for text on different backgrounds and checked color accessibility for good readability and contrast.
WEBSITE ELEMENTS
Components and more components
With the new style defined, next step was creating website components, ensuring that all design elements were cohesive and aligned with Sushima's brand attributes.
High Fidelity Prototype: a feast for the senses.
Big farewell to the old interfaces! Step into the new website to find mouthwatering dishes and optimized user experience!
Menu page
In the menu page we put a banner on top, in order to reduce user effort and offer them combos and most popular products.
Checkout
We also created cards for each of the products. We displayed features users value when they order online:
Price
Description
Allergenics information
Picture of the dish
For the next screen, we thought it was crucial to let users choose a time slot when they wanted their food to be delivered. This helped sushima organize the orders in their small kitchen and also led to a happier user experience, leading to no surprises at the end.
Responsive design.
We then constructed the final result of the prototype with a responsive behavior for desktop, tablet, and phone. The end result? Sushima's new and improved website, designed to perfection to showcase their brand attributes and make a lasting impression on their audience.
