Company
Atlas
timeline
q1 2023
product Role
owner + designer
platform
mobile • tablet • web
overview
An innovative solution that reimagines the mundane ordering process at restaurants. With differentiating features such as 'Call staff through phone', 'Pay at counter' and much more.
The project was lead by me and was designed (me), developed (3 engineers) and launched in 3 months time! Following was the steps of execution of the project:
Brace yourselves for a long a** case study! I have tried to pickup the core of the process and explain in very simple tone too 🙏
Direction
We wanted to build a new product module for Atlas that will:
be the differentiator in the market.
be the flagship “delightful” product of Atlas
Thats pretty vague. right? yes! So I decided to study the existing workflows and pain points.
Problem discovery
To kick off the project, I conducted user research by interviewing seven outlet managers from different restaurants in Singapore. The goal was to understand the current challenges faced with their existing QR ordering solutions.
Through these interviews, I gained valuable insights into the pain points and limitations of the current systems. I documented the research findings, identifying both positive aspects and potential risks associated with implementing new solutions.
Design Sprint time!!
A 5 day design sprint would be a bit of luxury and a big of an ask from the entire team. So I cut short the steps into a 2 day design sprint. Putting everyones time only on the first part of a design sprint - the most important part!
Design Sprint day 1
Collaboration session with the team to define the long-term goal for the product/business. We discussed and refined the project's metrics and goals, using sticky notes on Miro board to map out and vote on the preferred direction.
This exercise helped align the team's vision and set a clear path for the project.
For guiding the team towards the right values, I prepared the value metric and how it relates towards the business benefits (this blue yellow image >).
The flowchart explains how we should focus on the values such as productivity, cost reduction, diner experience and why.
7 participants wrote down their goals and we voted towards it (image below). We repeated the same for metrics.
Long-term goals [aligned]
Please don't mind the raw language used in the goals below. It is intentional and raw words that we came up with, during the timeboxed workshop session.
Diner
When diners see the QR code and the Atlas logo on a restaurant table, they think "Thank God!".
When they don't see it they are disappointed.
Merchant
Diner to have unique, engaged and exceptional experience using the digital QR and help increase the sales of restaurants and customer retention,
and when every new restaurant open, they will think we need Atlas immediately.
Metrics [aligned]
Diner
% of QR ordering + checkouts vs human-assisted checkouts >90%
Merchant
Merchants are happy to pay for this feature when priced 20% above market rate.
(3RD MONTH PAID)
User Journey Map
User journey of a typical scan to order + restaurant experience in diner and outlet staff perspective was created by me based on the learnings from interviews (+ experience as myself as a diner). This map served as a visual representation of the entire ordering process for the activities to come
how might we (HMWs)
I used this diagram to educate (or refresh) the team on how to generate relevant HMWs
The team added How Might Wes (violet sticky notes) onto the user journey map to identify specific problem areas to generate potential solutions.
There were too many HMWs from various perspectives. Being a small Startup, we cannot solve all at once. We needed to identify the most impactful ones for business so we can move closer to our targets, with haste.
So I organised a card sorting exercise to group the HMWs into categories. This ensured:
Focus on key categories.
Everyone is aware of each others HMWs
Take note of this sticker. It is added to those 3 categories as those helps with driving the metrics the most. It is to bring the focus to these 3 categories while brainstorm sessions that are coming up. And to keep the team focused towards the metrics!
hmw highlights
A few HMWs that stood out from those categories
Competitor research
A simple competitor research was done on the products available in the market to aid with the brainstorming (and partially for being a differentiator in the market).
Brainstorming
Crazy 8’s and voting were done with the whole team consider the HMWs and the competitor research
Impact x Effort analysis
I ported over the ideas / solutions from the brainstorming session into google sheet and did an impact effort analysis towards the following values:
Reduce manpower costs
Increase merchant sales
Increase NPS
Differentiator score
Ranking & Sequencing
Ranked it in order and decided Phase 1 (P1), Phase 2 (P2), Phase 3 (P3) sequence for them after discussing with the tech lead / CTO order that makes sense for the architecture of the system.
The phase 1
Decided to pick up and continue to UI design and usability testing for the following solutions for phase 1 of the project.
Seamless ordering experience.
Snappy menu loading.
Reduce Login/Signup friction
Good recommendations (TikTok like recommendations)
Group ordering
Call waiter feature
UI iteration 1
I took the pen and went to Figma (solo designer - me). Crafted the UI, frequently tested within the team and a few friends – as we all are diners ourselves too!
Many variations of UI were drawn and tested. The first one (the yucky one 😅) looked like this
It was "decent". But did not pass a few criteria.
1. Some buttons were small. A feedback we already were receiving from our online ordering system.
2. [Qualitative] It did not feel good enough to me. It did not stand out when compared to the competitors. Did not have a signature on its own.
So I went back and had some focus time to brainstorm and redesign a few things! Decided to start from a design system for the next iteration and not rush it!
Design system
It's always good to have a design system for fresh projects. Have learned from experience that later down the road, it's gonna be real tough to squeeze in and change component designs.
So I decided to spend some time as early as possible to setup a design system and aligned with the engineers. It looked like this:
The success of the system was that it used:
Full size images for the products.
From my interviews I understood that people really care about pictures as much or sometimes more than the description when it comes to ordering food.
In order to reduce confusion and to deliver it to all persona’s (literally), I had to make the choice that each button should follow minimum suggested thumb size (44px)
Making it neater, structured and making it easier to communicate.
Usability testing
To validate the design, I conducted usability testing that aimed to gauge the understandability of the product flow and UI, as well as analyse potential task success risks.
For this project it was pretty easier than other projects to find users for interviews as they could be any diners in Singapore.
I went down to various restaurants to interview diners. The results were not bad. Generally got people’s buy in that they would be using the niche features like recommendations, call staff etc.
Anyways, there were a few improvements to make at the login prompt pages in the checkout flow. I won’t be going into more details of usability testing for this case study. As things were pretty straightforward here (fortunately) just as one can imagine.
Product managment
As the project entered the final stages, I donned the hat of a product manager.
My responsibilities included obtaining buy-ins from existing merchants to ensure adoption of the new product once launched. Received buy ins (WTP - willingness to pay) from 3 merchants in 2 days from the demoes/pitch I conducted to them on the Figma prototypes I created.
I set deadlines for the engineering team, effectively sequencing the product into three phases.
To track progress and maintain effective communication, I managed Linear tasks (JIRA alternative) and organized weekly kickoff meetings.
Furthermore, based on our progress, I managed customer expectations, ensuring that they were aware of the upcoming changes and improvements.
Impact / Results 🎉:
The product has been launched for selected merchants on 17th April 2023 only. Hence it is not time yet to finalise the results or wrap up the project.
Here are the results at 3 weeks since launch (as of 11 May 2023):
85k Sales through Scan to order channel (from 704 orders) compared to SGD 80k on manual POS orders. ~50%
10/11 diners mentioned good words about their ordering experience and that it was very easy to use.
Results at 3 weeks since launch (as of 11 May 2023):
% of QR ordering + checkouts vs human-assisted checkouts = 40%
Merchants are happy to pay for this feature when priced 20% above market rate.
(3RD MONTH PAID)
Post-credits scenes
Scan-to-Order QR at Cajun on Wheels tables 🥹.
Me onboarding/training the outlet staff