Wagamama: Personalized Ramen Ordering

Improving Customer Satisfaction and Dietary Inclusivity

Overview

The main goal of the "Wagamama Personalized Ramen Ordering" project was to make dining a smooth and inclusive experience. The project aimed to create a customized online ordering system for take-out that caters to individual dietary requirements. This system not only simplifies the process for all customers but also has the potential to improve customer satisfaction by offering personalized choices.

My Role

As an independent project, I led the creation of Wagamama's tailored ramen ordering system, covering mobile web, tablet, and desktop platforms. I conducted user research, ideated concepts, and crafted user flows, wireframes, visual designs, prototypes, and oversaw all design aspects.

Problem Statement

Customers with specific dietary needs faced challenges when ordering take-out from Wagamama online. The menu's lack of customization options made it challenging for customers to access allergen information and provide input on their dietary requirements.

Client

Wagamama, Self-directed

Timeline

12/14/2023 - 01/06/2024

Team

Individual Designer

ACTIVITIES

  • User Research
  • Ideation & User Flow
  • Wireframing
  • Prototyping
  • Visual Design
  • Usability Testing

Tools

Figjam
Adobe Photoshop
Midjourney
Figma
Maze

Challenge

Crafting a Ordering System for Dietary Needs

A gif animation of Wagamama online ordering menu on a tablet.

Figure 1. There are no features on the website that allow for ingredient modifications or input in their dishes.

Understanding User Needs

I obtained valuable insights into user needs and pain points through user research, which involved analyzing customer reviews, conducting in-depth interviews, and creating user personas.

Defining the Problem

The research revealed the primary challenge: maintaining transparency and concise communication regarding allergens and meeting specific dietary preferences. This understanding influenced the design direction for the personalized ordering system.

Figure 2. User Personas helped me make design decisions in creating a solution that focused on the user’s needs.

Solution

Crafting the Solution Process

Establishing Visual Harmony

The existing brand identity and website served as inspiration for establishing a cohesive design language. This ensured visual alignment with the established brand experience.
Two variations of “wagamama” custom font. The top variation is the regular wagamama font, and the second variation is bold. The “wagamama” brand colors are white, red and black. This image is from a style guide for the Wagamama restaurant chain.
Figure 3. Wagamama's Style Guide

User-Centered Approach

I created a user task flow and interactions to outline the steps necessary for making a purchase. This proved to be useful in developing initial wireframes for comprehensive mockups, as well as a functional prototype.
The user begins by picking their soup base, then moves on to selecting their preferred noodles, protein, toppings, and finally enters any dietary restrictions or extra comments before completing their order.
Figure 4. The user task flow diagram illustrates the ordering steps for customizing ramen.

Figure 5. Low-fidelity wireframe for desktop and mobile screens.

Figure 6. Mid-fidelity wireframe for mobile and tablet screens.

Prototyping

A screenshot of a Figma design and prototype workspace. On the left side are mobile, tablet, and desktop prototypes of a Wagamama custom ramen ordering system. The prototypes show screens for selecting ingredients and customizing a ramen bowl. On the right side are various menu component elements for the ramen customization screens. These menu components include buttons, text labels, and image placeholders.
Figure 7. Figma workspace displays device prototypes on the left and menu components on the right side.

Usability Testing

To assess the prototype's effectiveness, six participants were recruited for usability testing, focusing on a specific scenario involving a peanut allergy. The valuable feedback obtained through usability testing and surveys has offered me key insights on addressing usability issues and will be crucial in refining the design and navigation for the next round.
The initial round of testing for the mobile prototype was done using a usability test and survey summary. Overall satisfaction with the experience was rated at 4.2 out of 5. The survey also evaluated user satisfaction with specific aspects of the prototype, such as the allergy input form (rated 3.7 out of 5), ease of ordering (rated 4.2 out of 5), menu clarity (rated 4.2 out of 5), and customization options (rated 4 out of 5).
Figure 8. The first round of usability testing and survey summary from Maze, a usability testing tool, included 6 participants. Each participant spent an average of 4 seconds per step, resulting in a 27% misclick rate.

Design Features

The main objective of the solution was to develop a user-friendly interface that promotes a seamless and enjoyable dining experience, in line with the project's primary aim of enhancing transparency and effectively addressing allergy concerns.
A gif animation of the tablet navigation showing a streamlined order navigation menu with a 4-step process. The steps are: 1. Choose your soup base, 2. Select your noodles, 3. Pick your protein, and 4. Add your toppings.

Streamlined Order Navigation Menu

I selected a navigation style inspired by the Wagamama theme for this iteration, which includes a simple 4-step process to help users easily navigate through the ordering process and avoid any confusion or frustration.
A custom ramen selection is shown in a gif animation with clear labels. Each part shows pictures and explanations of the different choices. The feedback mechanism and stroke outline highlight the user's selected item, making it easy for them to navigate and make informed decisions when customizing their ramen order.

Intuitive Item Selection

I labeled each section carefully and added clear feedback mechanisms to make it easier for people to access and choose items.
Before the checkout page, there is a section where users can input their allergies and dietary restrictions. This section includes checkboxes for common allergies and a text box for users to add any extra comments.

Allergy and Dietary Restrictions Input

To cater to different dietary requirements, I have added several choices for users to pick from before finalizing their purchase. The available choices comprise of checkboxes for allergies and a designated space for users to provide comments. This enables users to effectively communicate their specific dietary needs.

View Prototype

A phone display showing a Figma model of a Wagamama personalized ramen ordering application. The application has a simple 4-step system to help users with their order. This picture acts as a connection to the interactive model in Figma.

Preview the mobile prototype in Figma here.

Results

Project Impact

Enhance User Satisfaction and Usability Experience

The ordering process was tested with 6 participants, and they took an average of 4 seconds per step. It took them a total of 12 seconds on average to complete an order. The usability survey indicated that the participants were highly satisfied, rating “satisfaction”, "ease of ordering" and "menu clarity" with an average of 4.2 out of 5.

Lesson Learned

Prioritizing Accessibility

Ensuring accessibility was a key focus throughout the design phase. Ongoing refinements, rigorous testing, and necessary adjustments are essential to improve accessibility for users.

Next Steps

Broaden Menu Personalization

Wagamama can make itself more appealing to a larger group of people by offering a variety of customizable main courses in addition to ramen. By including options that cater to different dietary needs, such as allergy-friendly choices, Wagamama shows that it is dedicated to creating an inclusive and welcoming dining experience for everyone.

Thank You!

I trust you found as much delight in observing this project as I did in crafting it.

Next Projects

UX/UI design project, QuantaCam 3D, a 3D AI generation concept app showcased on mobile mockup devices, featuring 3D designer screens, voice input screen and main logo loading screen.
Case Study

QuantaCam 3D

AI-driven 3D Modeling

UX and UI Design

View Project
Home page screenshots of KW Realtor marketing landing page, featuring real estate website design.
Case Study

Keller Williams Realty

Landing Page Design

UX and UI Design, Development

View Project
Made in Webflow