Experience Design

Sushiro Canada

Timeline
August 2023, 2 weeks
Project Type
Mobile App
My Role
Sole Designer
Tools
Figma, Adobe Illustrator, Lottie File
Overview
Sushiro, a restaurant I truly appreciate, is renowned for its extended wait times, frequently exceeding an hour for a table.
My role involved examining the restaurant's expansion into Toronto and devising a solution to address this issue by developing a reservation app for customers.
Sushiro - Cover Photo

Process

What was my design process?

This design process encapsulates the stages I've navigated through during this project.
Iterating between Design Exploration and Prototyping & Testing as necessary, I've supplemented my progress with further research whenever questions arose during the design phase.

Discovery

This initial phase involves understanding the problem, empathizing with users, mapping user journeys, and conducting competitive audits, white paper research, and user interviews to grasp the problem's essence.

Define

After identifying gaps and user needs, I brainstorm solutions, define product requirements, and formulate How Might We questions to shape the app's features and functionality.

Design Exploration

Here, I translate concepts into wireframes, experimenting with various design possibilities to visualize potential outcomes.

Prototyping & Testing

I create prototypes from my wireframes and test them with users.
This phase uncovers user struggles, strengths, and weaknesses, leading to further iterations or design refinements.

Design Refinement

High-fidelity designs are developed, refining layouts, elements, and overall aesthetics.
Design adjustments are made, and the final design is polished.
This phase concludes with documenting the design process and composing this comprehensive case study.

Since this is a personal project aligned with a certificate requirement, it doesn't include a hands-off and validation phase.
I'm excited for an opportunity to develop a project that enables me to launch a product and validate it in the market.

Discovery

Why does Sushiro needs a reservation app?

"Sushiro brought back an item I wanted to try, but when I arrived after work, the walk-in line was closed. Thanks to a friend, I got a ticket, but by the time I reached the restaurant, the item was sold out😟"

Sushiro Customer Review @ Tripadvisor.com

Current Problems

Sushiro needs a reservation app for several reasons:
icon-alarm

Customer Inconvenience

Without a reservation app, customers often experience inconvenience due to long wait times, discouraging them from dining at the restaurant.

icon-group

Difficulty for Large Groups

Managing reservations for large groups becomes challenging without a dedicated system, resulting in inefficiencies and frustration for both customers and staff.

icon-waving hand

Limited Customer Engagement

The absence of a reservation app limits customer engagement opportunities, preventing the restaurant from building stronger relationships and personalized experiences.

Ultimately, this situation leads to missed business opportunities. Potential customers who prioritize efficient dining experiences and wish to avoid long queues are likely to be discouraged, resulting in lost revenue for the restaurant.

Project Goals

Our project's purpose revolves around the management team at Sushiro, while our target audience encompasses the customers.
Our objectives are twofold:

1. Resolving Customer Issues

Address a customer-centric problem by introducing online reservations, which eliminate the need for long queues.

2. Enhancing Revenue and Satisfaction

Boost revenue, nurture customer loyalty, and elevate overall satisfaction.

In essence, our goal is to create an appointment app that streamlines reservation processes, offering customers effortless booking and the ability to avoid lengthy queues.
We will measure its success by monitoring the percentage of app users who return to the restaurant for additional reservations, indicating the app's impact on cultivating customer loyalty.

Discovery

Can't we just copy the Sushiro app from another country?

While this approach may expedite the process and meet our immediate requirements, the current app's functionality falls short in terms of user-friendliness, failing to incentivize prolonged usage.

Analysis of the Current App

While direct replication isn't ideal, we can glean insights from the strengths and weaknesses of the existing app in another country.
Sushiro Existing App

Problem #1

Inconsistent Elements & Layout

Elements, fonts, spacing, and color choices lack uniformity across screens, leading to confusion for users trying to navigate and identify key elements.

Problem #2

Confusing Hierarchy & Redundancy

Multiple buttons leading to the same screen complicate hierarchy, unnecessarily complicating the user experience, as seen in instances where four buttons on one screen lead to the same shop list.

Problem #3

Limited Solution Options

When users can't book their preferred time, the app lacks alternative options, forcing them to manually check day by day. The absence of efficient alternatives hinders users' ability to easily find suitable reservations.

Cultural Variations

I've observed distinct cultural differences between Canada and Hong Kong. To delve deeper into these disparities, I looked into various white papers and research studies.

1. Dining Frequency

Hong Kong exhibits a higher dining frequency compared to Toronto. According to Rakuten Insight and Statistics Canada, 87% of Hong Kong residents dine out at least once a week or more, in contrast to 54% of Canadians.

2. Reservation Patterns

In Hong Kong's densely populated environment, reservations are commonplace due to high demand and limited seating, especially at popular eateries.

This led me to consider the integration of a loyalty points system for reservations. Such a system could encourage Canadian users to make reservations through the app, paralleling Hong Kong's dining culture.

Discovery

Let's meet the users.

User Interviews

To understand better of individuals' reservation behaviors and perceptions of the booking process, I conducted interviews with a diverse group of 7 users aged 25 to 65. This range encompassed varying dining preferences and levels of familiarity with Sushiro.

Interview Questions

How often do you dine out at restaurants?
Do you typically make reservations in advance?
Can you describe a recent experience you had while making a restaurant reservation?
What factors influence your decision to choose one restaurant over another?
How does the reservation process play a role in your decision?
Can you describe a situation where you had to modify or cancel a restaurant reservation?

Key Insights

From the interviews I conducted, three key themes emerged as significant insights.

Group reservations are essential

All interviewees stated that they prefer to make reservations when dining out with others, particularly in larger groups.

Special Event Reservations

The majority of interviewees emphasized the need to make reservations on special occasions like Valentine's Day, Christmas, and birthdays.

Influenced by Recommendations

A significant number of interviewees highlighted their reliance on others' recommendations and restaurant ratings before finalizing their reservation decisions.

User Persona - Aya Tanaka

Aya Tanaka (27) Marketing Manager

“A table filled with friends, laughter, and sushi – that's the recipe for an unforgettable night.”

Aya's passion for food is only rivaled by her desire to create lasting memories. She often dines out twice a week, either with her partner for intimate evenings or with a group of lively friends. As someone who enjoys the company of others, she often organizes dinners with friends.

Ideation

How might we create an app that enables customers to make reservations efficiently and with flexibility?

Unused Ideas

During the brainstorming phase, I worked on creating various ideas to achieve the project goals. The ultimate objective is to enhance customer satisfaction by minimizing long waiting times and preventing potential customer loss.

AI Chatbot for Staff Simulation

Despite its welcoming appeal, this AI chatbot concept demands substantial resources and costs. It exceeds our project scope.

How about we introduce a voice accessibility feature to aid users less familiar with app usage, ensuring easy booking for everyone?

Sushi-Related Games for Wait Entertainment

While games could ease wait times, they divert from our app's core purpose. Our focus is simplifying reservations, not providing gaming distractions.

How about we  implement a virtual queueing system that aligns better with our core purpose?

Initial Concepts

During the brainstorming phase, I worked on creating various ideas to achieve the project goals. The ultimate objective is to enhance customer satisfaction by minimizing long waiting times and preventing potential customer loss.

Feature #1

Reservation Process

Core functionality of the app, making booking hassle-free.

Feature #2

Virtual Queue System

Provide customers with digital tickets instead of physical waiting in line.

Iterations

The Wireframe

Wireframe Version 01

In my initial wireframe design, I aimed for utmost simplicity with just three primary buttons: "Reservation," "Get a Ticket," and a shortcut for calling the restaurant. I prioritized a clear and straightforward flow. For dropdown selections, I utilized pop-up screens to guide users through the required choices. Once all selections are made, the booking process is completed.
Wireframe 01
Wireframe 02

Usability Test

I've conducted 7 unmoderated usability tests with participants ranging from 25 to 65 years old, encompassing various dining preferences. Testers were tasked with completing 5 tasks:
Book a Reservation, Confirm the Reservation, Explore the Menu, Modify the Reservation, and Add Remarks.
Lo-Fi Framework
Affinity Diagram

Image: Lo-Fi Framework & Affinity Diagram

Key Insights

Following the usability test, it became clear that users sought more than just a "simple" app, they desired an application that was both easy to use and fulfilled their requirements comprehensively.
Taking into account the feedback and comments gathered from users, I undertook significant enhancements. These improvements were guided by four key insight themes that emerged from the usability test, helping me pinpoint the areas requiring focused improvements.

Theme #1

Home Screen’s call-to-action button

Users often struggle to differentiate the three buttons due to their identical spacing, scale, and placement

Theme #2

Menu details and reviews

Users seek menu details and reviews, indicating a desire for more comprehensive food information.

Theme #3

Booking confirmation visibility

Users experience anxiety over unconfirmed bookings; a dedicated confirmation section would alleviate this concern.

Theme #4

More comprehensive booking details

Users want more comprehensive booking details, including branch location and cancellation policy.

Iterations

Wireframe Enhancements

#1 Enhanced Navigation Ease

Several users have noted that while the overall navigation is relatively straightforward, certain features might require extra time to locate for those who are new to the app.

Wireframe Enhancement 01

1.1 Add Home Screen

Introduce a home screen featuring shortcuts catering to essential user functions and frequently accessed information.

1.2 Revemp Tab Navigation

Reconfigure tabs to provide distinct shortcuts for major functions, streamlining user experience by reducing clutter and minimizing confusion stemming from information overload.

1.3 Merge Menu with Home Screen

Rather than placing the menu button within a navigation tab, I integrated it directly into the home screen. This features a carousel view of items, drawing users in with enticing photos. Should they desire the complete menu, they can easily access it by clicking into the dedicated full menu screen for comprehensive information.

#2 Enhanced Shop Identification

Users face difficulty in assessing a shop's offerings before committing to a reservation, leading to uncertainty about their selection. This prompts users to repeatedly enter and exit the process to verify shop availability.

Wireframe Enhancement 02

2.1 Availability Overview

Search results will display a comprehensive list of shop availabilities based on user input, providing a clear overview of available shops and reservation times.

2.2 Detailed Shop Information

Detailed information about each shop, including address and contact number, will be showcased. This empowers users to evaluate details prior to making a reservation and eliminates the need to independently search for shop information online.

#3 Enhanced Food Exploration

Users desire access to food reviews, easy categorization (like desserts and drinks), and comprehensive food details.

Wireframe Enhancement 03

3.1 Categorized Menu

Users can effortlessly navigate specific food categories for a streamlined view. This offers a clear presentation of available options.

3.2 Comprehensive Information

Users can thoroughly examine each shop before confirming their reservation. They can review recommendations and look into food specifics by clicking on individual listings.

3.3 Review Recommendations

Enable users to access reviews and recommendations through a straightforward count system, giving them insight into the popularity of specific items. Additionally, users should be encouraged to share their own recommendations, fostering interaction within the app.

#4 Confirmation Indicator

Users feel uneasy about unconfirmed bookings, a designated confirmation section can address this concern.

Wireframe Enhancement 04

4.1 Confirmation Page

After completing the reservation process, implement a clear message and icon on this page to reassure users of successful completion.

4.2 Incorporate Animation

Integrating subtle animations can provide users with a sense of accomplishment and satisfaction, reinforcing the notion of task completion.

Iterations

Design Enhancements

Following the enhancements to the wireframes, I conducted another round of usability testing. Additionally, I gathered feedback from users after finalizing the design. Combining their insights with my self-critique, I implemented further design improvements.
Design Enhancement 01 + 02

#1 Drawer Layout

Initially, a card highlighted shop info but hindered map navigation. So, I switched to a drawer layout. Users can expand the map or shop details as needed.

#2 Availability Listing

Initially, I showed all timeslots, but users found it overwhelming with unavailable options. Now, I display only available times in shop info and show the complete list during reservation.

Design Enhancement 03

#3 Location History Listing

Initially, I aimed for a cleaner layout to display the search history for user locations. However, upon reviewing all the screens, I decided to maintain a consistent design for buttons. They are uniformly styled as round rectangles to signify their clickable nature, especially for primary actions.

Design

Style Guide

When crafting the interface style, I prioritize three key considerations:
icon-branding

Brand Alignment

Align design with Sushiro's branding using color and rounded shapes.

icon-cycle

Consistency

Maintain uniform components, typography, and spacing for a streamlined UI.

icon-tapping

Usability Focus

Employ color and spacing strategically to enhance user navigation.

style guide - typography, colour, spacing
style guide - button state

Final Solution

#1 Reservation System

Highlight #1

Flexible Selection

Users can check shop availability with various options like same-day times, preferred weekdays, and location-based choices.

Highlight #2

Shop Details

To help users make informed decisions, not only provided shop details like address and directions but also allowed them to preview the menu.

Highlight #3

Clear Flow

Consistent color and buttons guide users, ensuring a smooth reservation process.

Reservation System Design 01
Reservation System Design 02
Reservation System Design 03
Reservation System Design 04

Final Solution

#2 Virtual Queuing

Highlight #1

Effortless Waiting Time Check

Users can see waiting times for different shops and plan their visit without standing in line.

Highlight #2

Seamless Tracking and Notifications

Users can refresh for updates and receive push notifications when their table is almost ready, eliminating the need to wait at the shop.

Virtual Queuing 01
Virtual Queuing 02

Accessibility

#1 Colour Contrast

When making color decisions for backgrounds and elements, I always keep in mind the importance of strong color contrast.
This ensures that everyone can easily read and interact with the app's content, making the information more accessible and understandable.
Colour Contrast

Accessibility

#2 Focus Order

Even though I'm not making an actual app that needs to be built, I'm still designing it by considering the order of importance in the app.
I'm also thinking about how a screen reader would go through it for users who might use it.
This includes deciding what the screen reader would say about each part, so that the app is easy to use for everyone.
Focus Order

Accessibility

#3 Language Selection

To ensure that people who speak various languages can easily use the app, I believe having language options is crucial.

Automatic Language Detection

If the app supports the user's native language, it adopts it. Otherwise, users can pick a language upon app launch.

Flexible Choice

Users can always change the language in their profile settings.

Language Selection

Accessibility

#4 Voice Assistant

While I couldn't include this entire feature in the final design due to time constraints, I'm still enthusiastic about the concept.
I envision a voice assistant that simplifies the reservation process for those less familiar with technology, providing step-by-step guidance through audio instructions.
Voice Assistant

Edge Cases Consideration

What happens if there's no availability?

No Available Timeslots

If none match, offer the next available day within the same timeslot to provide an alternative.

Edge Cases Consideration - No Available Timeslots

Changing Dates

When customers modify the date, their original timeslot might be taken. Thus, they'll have the choice to select a new timeslot from a list or maintain their initial preference.

View Figma Prototype

Interaction Design

#1 Expected Direction

When it comes to interaction design, my aim is to enhance usability through navigational aids that guide users seamlessly through the experience.

Direction #1

Right and Back Buttons

Buttons with right-pointing icons signal the reservation flow. Subsequent pages slide in from the right for consistency, and going back slides the previous page to the right.

Direction #2

Up and Down Drawer

Drawers emerge from and retract to the bottom. This common behavior fosters user familiarity with the app's interface.

Interaction Design

#2 Popup Notifications

All notifications and warning messages will appear as pop-ups with a lively bouncing animation.
This animation is designed to capture users' attention when action is needed. For instance, when their ticket is next in line or if their chosen time slot isn't available.

Interaction Design

#3 Confirmation Animation

Since testers emphasized the significance of a confirmation page for a sense of completion, I aimed to imbue users with the feeling of accomplishment and satisfaction.
To achieve this, I integrated a subtle animation on the confirmation page, enhancing the perception of task fulfillment.

Interaction Design

#4 Scroll Down to Refresh

For the refresh functionality, I've chosen the widely used scroll-down method to refresh for the next group and estimated waiting time.
Constantly refreshing the app every second could strain its technical aspects, so I've opted for refreshing every 5 or 10 minutes.
This way, users can also manually refresh whenever they want to check the current status.

Reflection

If I were to have more time, what would be my next steps?

More Research:

icon-world

Worldwide Sushiro

If I had more time, I'd like to dive deeper into how Sushiro apps work in different countries. It would be cool to chat with their teams to understand what they emphasize and how they design their apps.

icon-doc

Variety of Research Methods

I'm curious about how people use reservation apps. I'd want to do study how people use reservation apps through quantitative surveys and qualitative research to gain insights from diverse perspectives.

Features Implementation:

Feature #1

Ticket Registration

Recognizing that customers often acquire tickets in person, I aim to create a functionality that allows them to register their tickets through the app.
This way, they can receive updates and notifications about the ticket status, saving them from waiting at the shop for extended periods.

Feature #2

Waitlist System

For peak periods like Christmas or New Year's Eve, when demand exceeds availability, I propose incorporating a waitlist system.
Even when all bookings are taken, customers can opt to join a waitlist.
If a reservation is canceled, those on the waitlist receive prompt notifications, allowing them to seize the available slot.

Feature #3

Onboarding Screen

Recognizing the effectiveness of onboarding screens in familiarizing users with app features, I plan to include an onboarding screen that provides a concise introduction to the app's key functionalities, further enhancing user understanding and engagement if additional time permits.

Feature #4

Voice Assistant

Though I didn't fully explore it now, I'm intrigued by the voice assistant concept.
It would aid not only those unfamiliar with tech or challenged by small text, but also offer convenience for all users.
Given the opportunity, I'd further investigate this potential feature, involving diverse users to ensure its effectiveness.

Reflection

Lesson Learned.

User Feedback is Vital

In my first usability test with users, I discovered that their responses and actions in the app may differ.
This underscores the importance of conducting usability tests at every stage to understand true user interactions and create an app that genuinely caters to their needs.

Consistency Enhances Usability

Maintaining consistency across all elements is essential for guiding users seamlessly through the app.
Reflecting on this experience, I would prioritize consistency in design, flow, behavior, color usage, and interactions for future projects.