Sushi Cart
Mobile app | Project
How I designed a QR code mobile app.
Purpose: Busy people want contactless ways to order and pay for meals, especially while dining at a restaurant during social distancing caused by the COVID-19 pandemic.
Goal: Improve user experience through designing a contactless QR code ordering app that is simple, quick and easy to complete an order. My role: Create, design and deliver the user experience of a simple QR code ordering app for a sushi restaurant.
Screenshot
Project overview
About: Sushi Cart is a QR code ordering app.
Purpose: I designed a simple app to attract and retain customers for a sushi restaurant to help stay in business during the COVID-19 pandemic.
Duration: December 2021 to March 2022.
Tools: Figma, Figjam, Miro and Google Docs.
Project goal
The goal is to improve user experience through designing a contactless QR code ordering app that is simple, quick and easy to complete an order.
Design role in the project
I managed all stages of the project process including user research, testing and usability studies, wireframing, prototyping, designing low and hi-fidelity mockups, including accessibility and iterating on designs.
I designed the project using the design thinking UX process:
1 Empathise 2 Define 3 Ideate 4 Prototype 5 Test
Target audience
The app is designed for busy people who want contactless ways to order and pay for meals, especially while dining at a restaurant during social distancing caused by the COVID-19 pandemic.
Key challenges
Paint points:
-
Working adults want to order and pay online quickly and easily.
-
Platforms for ordering food are not equipped with assistive technologies.
-
PDF menus can be difficult to read and order from mobile.
User research
To understand the users I’m designing for and their needs, I conducted interviews and created empathy maps. I identified the primary user group as working adults who don’t have much time to cook meals and want contactless digital ways to place orders for sushi.
This user group confirmed initial assumptions that customers have experience within online ordering, but are now transitioning back to table service, and seek contactless menus and digital ways to order sushi.
User persona - Meet 'Kaye'
Kaye is a busy remote professional who needs an easy way to order dinner and wants contactless ways to order and pay online.
User journey map
Mapping Kaye’s user journey revealed how helpful it would to offer contactless menus and digital ordering through a simple QR code ordering app.
Paper wireframes
I drafted six variations of a QR code home screen with elements that made it to a seventh refined screen that addressed user pain points and provided a clear actions and navigation for users to complete an order.
Digital wireframes
The primary action focuses on scanning the QR code to order table service. The primary action is to scan the QR code to begin an order. Features were removed to keep the app simple and easy to use.
Low-fidelity prototype
The primary user flow is to complete an order for table service by scanning, ordering and paying online.
Usability study findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to low-fidelity mockups. The second study used a high-fidelity prototype to reveal refining the QR code feature.
Round 1 findings:
-
Users need better cues to order quickly and easily.
-
Users want quick and easy ways to order and pay online.
-
Users expect contactless menus and digital ordering.
Round 2 findings:
-
Unnecessary steps were removed to complete an order online.
-
The primary action was to enable QR code ordering for table service.
-
Users expect a detailed menu with customisable items.
Mockups
The first usability study provided quick and easy ways pay online. To streamline this flow, I added a more ways to pay and better cues to review and complete the ordering process.
The second usability study revealed the need to remove all user distractions and focus on the QR code as the primary action to order table service.
Main user flow - scan, order and pay
High-fidelity prototype
The final high-fidelity prototype presented a clear user flow for QR code ordering. The prototype demonstrates the screens to complete an order for table service from the app.
Accessibility considerations
Reduce learnability of the app by using simple modern icons and simplifying the app bar navigation.
Assist vision impared users by providing alt text tags to images for screen readers.
Provide colour contrast ratio of at least 4.5:1
Design impact
The app turns customers into regulars with restaurant access to meaningful customer insights and user data to elevate the dining experience.
Result
I learned people want contactless ordering from their mobile devices. Users don’t want to line up to order and pay, and expect online ordering for dine-in table service. Ordering from a QR code is becoming normal practice for the restaurant industry. I improved the user experience by designing a contactless QR code ordering app that is simple, quick and easy to complete an order of sushi.