Nikkou

Book a table and pre-order now or later

Featured Nikkou

Nikkou is a stylish yet cozy Japanese chain restaurant with many different locations across Australia that caters to small and large group functions and offers both à la carte and multi-course set meals for group booking. They aim to provide premium food with fresh ingredients and warm services.

Nikkou targets local customers who look for having an enjoyable dining experience with their family, friends, or co-workers.

Project duration

8 weeks

My role

UX/UI, Brand concept

This case study is part of my Google UX Design Professional Certificate.

Onboarding screen

Problem

Customers need to contact the restaurant by phone or via messaging apps to make a table reservation. Table booking itself also doesn’t save much time since there tends to be longer waiting times for a meal to be served during busy hours.

Goal

Design a MVP (Minimum Viable Product) of an app for Nikkou to create the perfect dining-out experience by enabling their customers to easily reserve a table and pre-order their meal to optimize waiting time at the restaurant.
Storyboard

Understand the users

A primary user group identified through research was the existing customers who look for a fast and easy table reservation process and be able to order online without having to call the restaurant.

This user group confirmed initial assumptions about Nikkou customers, but research also revealed that lacking an online reservation system and long waiting times for the meal and bills were not the only factors that put them to inconvenience. Another user problem was the inflexibility of modifying the booking.

Yuki
Yuki is an immigrant Japanese mom living with her family who needs an easier way to reserve a table for her family/friend’s special day and order food in advance because the large tables fill up fast and the food takes time to be prepared.
Paul
Paul is a software sales manager who needs a convenience way to reserve a table for short lunches with his co-workers. He wants to order the meals ahead of time because he has a limited amount of time to eat and get back to work

User journey map

Mapping Yuki’s user journey revealed how helpful it would be for users to have access to a dedicated Nikkou app.
User journey map

User pain points

1

No online booking

Users can’t see real-time table availability, order online, and get their reservations confirmed instantly.

2

Long waiting time

Users wait longer for the table, food, and bill during busy hours, especially for larger parties.

3

Low flexibility

Users need to call the restaurants over the phone if they want to make changes or cancel the booking.

Starting the design​

I drafted iterations of each screen of the app on paper first to create a basic structure of a page and to highlight the intended function of each element.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes

User flow

User task is to use the restaurant booking app to make a table booking and pre-order meal quickly and easily.

Usability studies​

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Additionally, A/B testing was solely used to test the pre-ordering screens.

Study type:
Moderated usability study

Participants:
5 participants

Location:
Australia, remote

Length:
10-15 minutes

Research Questions​

  1. Do users think the app is easy or difficult to use? Are there parts of the user flow where users get stuck?
  2. Do users think the pre-ordering and canceling features are helpful and/or useful?
  3. Are there more features that users would like to see included in the app?

Affinity diagram

Affinity diagram

Findings

Round 1

  1. Users want to know more about pre-ordering process
  2. Users want more intuitive way to skip pre-ordering
  3. Users want to see their booking again after the payment screen

Round 2

  1. Users want a quicker way to access booking calendar
  2. Users want a feature to reorder menu from past orders
  3. Users want a feature to modify bookings

Refining the design

Onboarding

After the usability studies, onboarding screens were added to briefly explains how the booking and pre-ordering work.

Onboardings

Streamline the booking process

I simplified the user interface and added Search widget to the home screen to reduce the entire booking steps. If users have booked before, the search field will be autofill with their latest location booked.

Alternatively, users can choose to view complete list of our locations.

Home screen
Booking process

The table booking process is straightforward. After selecting a restaurant location, users enter booking details (number of guests, date, and time). Availability of dates and times are indicated.

Enter booking details

Pre-ordering process

Users can either pre-order food at the time of booking or skip and go straight to confirm their booking.

On the menu page, users can select and add menu items to the cart. Each menu item provides detailed ingredients and a space to note special dietary requirements.

Pre ordering process

One-page checkout

To simplify the checkout process, all booking details and payment methods are now accessible within a single screen. This doesn’t allow the users to second guess their booking after the review screen.
Review booking

To ensure a smooth checkout for loyal customers,

  1. I created a “Contact book” where multiple contact details can be stored for future uses.
  2. On the payment section, users have the option to store card details for future transactions.

Modify bookings

During the second usability study, users expressed desire for flexibility of booking that allows for changes in booking dates or cancellations.

Modify bookings

What I learned​

Creating my very first mobile app and using Figma for the first time has been an enjoyable experience despite encountering several trial and error moments throughout the design process and implementing UI best practices. I intend to leverage these experiences to enhance my skills and knowledge for the next project.