Design Tool: Figma
PROJECT: Tokyo Sandwiches
DURATION: 6 months
GOAL: Design a user-friendly app for Tokyo Sandwiches that streamlines the ordering and pick-up process for fresh and healthy dishes, while reducing the number of steps required to place an order.
Overview
Tokyo Sandwiches is a local sandwich shop that has been serving the Tokyo area since 1983. Throughout the years, they have provided delicious, healthy, and affordable sandwiches to families, workers, and students.
Challenges
Create a recurring order feature that allows users to place orders quickly.
Streamline the payment process for users and reduce the number of steps required.
Provide clear and easy-to-understand order confirmation to users.
Present daily sandwich promotions in a clear and concise manner.
Add language options for users who are not fluent in Japanese.
RESEARCH
Key Questions:
Who are our users and what are their characteristics?
What are the goals and motivations of our users when using this app?
When do users typically need to use this app?
Where do users primarily use this app?
Why do users choose our app over other similar options?
How does our app provide better benefits to users compared to other alternatives?
We conduct a series of research to identify the target users, study competitors, determine user needs, and identify pain points. This research will provide direct insights to help us improve the product and deliver the best possible user experience.
Target Users
Users who reside in the Tokyo area.
Students and workers.
Users between the ages of 15-50.
Users who eat out at least twice a week.
Users who place food orders through the app at least twice a week.
Meet the Users
Persona 1
Name: Hiroto Komoto
Age: 27
Occupation: Financial specialist
Hiroto is a 27-year-old male financial specialist who works at a financial firm in Tokyo. His job is very demanding, leaving him with little time for lunch. To save time, he prefers quick and straightforward food ordering procedures. He usually opts for light meals for lunch because he is health-conscious.
User Journey Map
Persona 2
Name: Yui Kazuko
Age: 16
Occupation: High school student
Yui is a 16-year-old female high school student who often dines alone for dinner. While she has a part-time job on weekends, she can't afford expensive meals due to the low pay. She enjoys sharing good menu promotions with her friends. As a discerning customer, Yui prefers transparency and dislikes hidden information. She expects the menu to be easy to understand and navigate.
User Journey Map
Persona 3
Name: Russell Baker
Age: 19
Occupation: International student
Russell is a 19-year-old male international student who is currently studying at Tokyo College of Music. As a non-native Japanese speaker, he faces difficulties in communicating with local restaurants. Due to his busy schedule practicing with the orchestra, he often needs to grab food quickly on the way home. Russell needs an app to assist him with ordering food, and a tool to help him better communicate with the restaurants.
User Journey Map
DESIGN
I followed a structured approach to create the prototype, enabling us to conduct usability research and gather feedback on the product's user experience.
Initial design concepts
Competitive audit
Paper / digital wireframe
Accessibility considerations
Low fidelity prototype
Usability research
Mockup
High fidelity prototype
Usability research
Initial design concepts
In today's busy world, people are often occupied with work or studies, and prioritize their health more than ever. Tokyo Sandwiches offers delicious sandwiches made with healthy ingredients that are also budget-friendly. Our goal is to make it clear that there is a quick and easy way to order affordable and healthy food - by using the Tokyo Sandwich app. We aim to keep the user experience as simple as possible.
Competitive Audit
After analyzing several direct or indirect potential competitors, we identified their strengths and weaknesses. With the aim to stand out in the oversaturated market, Tokyo Sandwiches can leverage the following features to offer an easy-to-use system to the users:
Large images for menu items rather than relying on text descriptions only.
Quick order list to reduce the time it takes to place an order, instead of requiring users to select items every time.
Clear and easily accessible promotional information, rather than a complicated application process.
Clear order confirmation that provides all necessary details, rather than a confusing confirmation process.
Multiple language options to cater to users who are not fluent in Japanese, instead of only offering the app in Japanese.
Wireframes
Paper Wireframes
To kick off the design process for the home page, I created some rough wireframes on paper to explore different layout options. From there, I refined the wireframes to create the first version of the home page design.
Digital Wireframes
Mobile App
In order to create a prototype for usability research, I began by converting the paper wireframe into digital wireframes.
Accessibility Considerations
To make the app more accessible, we have incorporated the following features:
Voice search functionality: We understand that some users may have difficulty typing words into the search bar. Therefore, we have added a voice search function to help users search for their desired items easily.
Language setting options: We have also added more language setting options to cater to users who are not fluent in English or Japanese. This way, they can navigate the app more easily and comfortably.
Larger product images: For users with visual impairments, we have used larger product images to help them confirm their orders in-store. This will enable them to see the details of the products more clearly and order with confidence.
Wireflow
After creating all preliminary wireframes, we reviewed the research results to ensure that all wireframes we made met the users' needs. We then proceeded to create a low-fidelity prototype.
Usability Research
Introduction
Project background: Our team is currently working on an app for Tokyo Sandwiches, a local restaurant. Through our observations, we have noticed that many customers tend to order the same item repeatedly. However, some customers have been abandoning the app before they can complete their orders due to the time-consuming process of searching for items from different categories on the menu to make their desired combo. To address this issue, we aim to create a feature that allows customers to quickly order their favorite combo, thereby streamlining the ordering process.
Research goals: Our research aims to understand the reasons behind customers abandoning the app before completing their orders, as well as the challenges they face when placing orders through the app. By gathering these insights, we hope to identify areas for improvement and create a more user-friendly ordering experience.
Research questions
What factors cause users to abandon the order process before completion?
Are there any specific steps in the order process that users find difficult or confusing?
How long does it take users to select items from the menu and complete their orders?
Do users find it easy to locate desired items on the menu?
Are there any app features that users find confusing or problematic during the ordering process?
Key Performance Indicators (KPIs)
Time on task: How long it takes users to complete the ordering process, from opening the app to submitting the order?
Drop-off rates: What factors contribute to users abandoning the app before completing their order and what are the reasons for the drop-off?
Conversion rates: What percentage of users successfully complete their order?
System Usability Scale: How do users rate the usability of the Tokyo Sandwich app after using it to order their meals?
Usability Test Plan
Type of usability test: Unmoderated usability test.
Location: Remote (participants will conduct the study on their own computers) in Tokyo, Japan.
Date: The usability test sessions will take place on June 1-2 (during normal business hours) and June 3-4 (after business hours).
Number of participants: Seven participants will be asked to order a sandwich through the prototype.
Data collection: After the task completion, each participant will be asked to complete a questionnaire on their experience.
Duration of each session: Each session is expected to last 15-20 minutes.
Compensation: Each participant will receive a $10 coupon for Tokyo Sandwiches.
Participants
Participants should meet the following criteria:
Reside in the Tokyo area.
Students or workers.
Aged between 15 - 50.
Eat out at least twice a week.
Have ordered food through the app at least twice a week.
Tasks
Task 1: Log in to the account
Prompt: Please log in to your account.
Follow-up question: Did you find the login process easy to use?
Task 2: Order foods from the saved favorite combo
Prompt: Please select your saved favorite combo and order it.
Follow-up question: Was it easy to find and select your saved favorite combo?
Task 3: Confirm the order
Prompt: Please confirm your order and complete the checkout process.
Follow-up question: Did you encounter any issues during the checkout process?
Additional prompts:
Please add a new item to your cart.
Please remove an item from your cart.
Please navigate to the menu and find a new item to order.
Follow-up questions for these prompts can include asking about the ease of finding and selecting the item, the ease of adding or removing it from the cart, and any issues encountered during the process.
Engage with Users
To gather feedback on our low-fidelity prototype, we will conduct a remote survey with selected potential users. The survey will consist of 12 questions, and we will have 7 participants.
The participants will be asked to run through different scenarios in the prototype by following prompts and answering follow-up questions. The survey will be conducted remotely, and we will gather all feedback for further steps in our design process.
Key Problems
Terminology
The term "My Favorite List" may not be immediately clear to users as it doesn't explicitly convey the idea of quickly ordering food. This can lead to confusion about when and how to use the feature.
Mockups
Mobile App
Turn all the low-fidelity wireframes into high-fidelity mockups. It's time to get close to the actual product!
Improvements
Terminology
We changed "My Favorite List" to "Quick Order List" to better convey the idea of quickly ordering food and reduce confusion for users.
2nd Usability Research
Key Problems
Color
The color combination is too complex. It's hard to define the theme of this company.
Improvements
Color
Quickly change the color design to make it looks simple and easy to identify.
Mockups v2
Mobile App
I rapidly created a new version of the mockup as we opted to implement a new color scheme for the product.
High Fidelity Prototype
Mobile App
3nd Usability Research
Key Problems
Navigation
Combining the food menu and the quick order list in the same section is confusing. It's hard to notice there is a quick way to order food.
Improvements
Navigation
Consider separating the Quick Order feature from the menu and creating a dedicated button for it to make it more noticeable and accessible to users.
Complete the Challenges
Challenge 1
Create a recurring order feature that allows users to place orders quickly.
Introduce a Quick Order feature that allows users to place recurring orders with ease. Users can save their preferred order combinations to the Quick Order list located on the "Order Confirmation" page. This way, when they want to reorder the same items, they can simply click the "Quick Order" button on the homepage and quickly find their preferred combination. Users can rename, edit, or delete combinations as needed to fit their preferences.
Challenge 2
Streamline the payment process for users and reduce the number of steps required.
To streamline the payment process, we have added the "Express Checkout" feature for users who have already registered and saved their payment method in their accounts. With this feature, users can quickly complete the payment process with just a few clicks.
Challenge 3
Provide clear and easy-to-understand order confirmation to users.
To provide a clear and easy-to-understand order confirmation, users can view pictures of the food items on the confirmation page. Additionally, users can access an estimated pickup time and a map to navigate to the pickup location. The pictures and map can be zoomed in for better visibility.
Challenge 4
Present daily sandwich promotions in a clear and concise manner.
To better present daily sandwich promotions, we added a "Daily Deals" section to the homepage where users can easily see the top three deals of the day with discounted prices. Users can click on each item to see more details and add it to the shopping bag with just a few taps.
Challenge 5
Add language options for users who are not fluent in Japanese.
To accommodate non-Japanese speakers, language options can be added to the settings menu, allowing users to choose their preferred language. This will help to make the app more accessible to a wider range of users.
Style Guide
To show how glorious this traditional business is and show the users a warm viewing experience on screen, I design the primary color theme - #867047 and background color - #F8F7F4.
