Nuk Cafe Mobile APp

Online delivery and pick-up order

Overview

The Nuk Cafe mobile app offers customers the convenience of ordering pick-up and delivery of to-go food online. The app is designed with streamlined ordering features, including estimated ready time, re-ordering capabilities, favorites, and store location information. In addition to the benefits provided by third-party food online ordering services, the Nuk Cafe app offers even more advantages.

This case study will focus on the ordering process.

Project duration
May 2021–March 2022
My Role
Lead and sole designer
involvements
Research, User flow, Wireframe, Design system, Visual design, Prototype
Research
User flow
Wireframe
Design system
Visual design
Prototyping
Testing
Tools
Sketch, Zeplin, InVision, Adobe Illustrator

Process overview

Analysis
Business insight—Interview was done with business owner to gain insight about the business operation and their everyday customers behavior.
User research—Interviewed 5 normal everyday people who regularly make to-go orders through either phone call or apps about their journey and experience.
Secondary research—Research food delivery service apps and restaurant apps from different markets
Design
High level and low level user flow—The high level flow was provided by BA from the cafe. Based on it, I would design a deeper low level user flow that broke down the interactions.
Wireframe & Wireflow—I integrated wireframes into user flow to evaluate the flow with better ease.
Usability tests—Testing started as soon as wireframes were created, to spot any critical problems early in the design process.
Design system—Define the usage of space, padding, fonts, sizes, colors, etc. to standardize every component in the app.
Visual design—Pick and refine icon sets used within the app, and define the style of food and drinks photographs.
Prototype—Testing with prototype to make sure the usability the solutions and the visuals are well implemented.
Developer Collaboration
Sprints—The developer and I are constantly communicating. We planned sprints and mile stones for different use cases, and we share insights and feedback after testing.
SIT and UAT—Each time we finished a use case, I would write out different scenarios for internal testing. I also participated in UAT testing to gather feedback from testing group, then I would generate feedback reports for the developer and I.
Problem statement

The demand of online food ordering and delivering has been skyrocketed since the pandemic hit the world. People are avoiding going to places with crowd gathering, and they are turning to ordering food from their cellphones at their home and office.

Hypothesis:
The business owner is looking to create an app to expand its business by offering online purchase for delivery order and pick-up order. To boost customers' loyalty, the business owner would also like to include a Instagram-like social sharing feature.
Problem:
Due to social distancing policies, to-go food ordering is become a necessity for many people. Major players such as Foodpanda and Deliveroo have dominated the online food order market. Lesser known restaurants have a hard time standing out from the crowded market, thus hard to build brand loyalty and recognition.
Business goals:
While still offering delivery services through the major platforms, this app aims to be the main hub for customers to get all the best benefits (such as exclusive deals) from ordering directly from the restaurant itself, therefore strengthening brand recognition and getting more opportunities to directly promote to customers.
  • Loyalty—offering exclusive experience and benefits that customers don't get from other food delivery platforms.
  • Direct promotion—cutting out the middle man to directly promote to customers.
Project statement

The business owner is looking to increase customer loyalty by offering online purchase via an app for ordering delivery order and pick-up order, as well as providing a platform for customers to share their experience. This app will be used in Cambodia and Hong Kong.

Feature requirements

Whilst designing the app from scratch, which means basic functions such as sign-up, sign-in, setting menu, etc. are included, two main features were required by the business owner—a full-fetched ordering use case, and an Instagram-like sharing feature for customer review use case. The intricacies of these use cases will be decided by me.

This case study will focus on the ordering process, since the Instagram-like sharing feature leaves little room for exploration.

Research and Analysis

Interviews were done with the business owner and people who order to-go food on a regular base to gain insights about their ordering process. I also looked into similar and competitive apps and case studies to learn what new problems had come out since the pandemic started, and how these services attempt to solve them.
Since our team is stationed in Hong Kong, business insights from Cambodia store, while still essential, are treated as reference. While primary research was done locally in Hong Kong, my secondary research aimed at a more global scale.
Research and analysis

Business Insights

Interview was done with business owner who runs the restaurant in Cambodia to gain insight about the business operation and their everyday customers behavior. Here are what I learned from it.
Long wait time for walk-in customers. On weekends they lose customers due to the long wait time.
In Cambodia, riders sometimes have a hard time locating the customer's location in due to the complicated address system.
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
Listing on widely trusted delivery services makes a more confident ordering process.
Research and analysis

User Research

This was done locally in Hong Kong. I picked out a few working people who usually have limited time in the morning and/or at lunch for food and drinks. In order to save time, avoid queue and avoid crowd, they regularly make to-go orders through either phone call or apps. Here are the findings.
They have developed a habit since COVID, they would likely still use delivery service often even after social distancing.
Customer review with beautiful pictures give a better impression to the restaurant, and more likely to pick the restaurant.
To maximize time efficiency, make the order in advance to make sure they can get their order at a particular time.
Likely to order the same drink more than half the times, since it's a safe choice and they don't have to think.
Research and analysis

Secondary Research

Since business insight and user research done above are both based on one location, my secondary research aimed to look at researches done internationally. Popular food delivery service apps and restaurant apps from local and other countries, such as Grubhub, McDonald's US, Foodpanda, Starbucks, etc., were also studied to learn how they tackle and solve problems. Case studies about customers behavior were also looked at. Here are the findings.
Users should be allowed to reserve a time for their delivery or pickup.
Alert the user of any unavailability as soon as possible in the shopping process.
Inform customers as soon as possible if store is not opened yet, or any sudden issues that would cause delays.
Allow users to see out of stock products while shopping. Make this a part of the flow instead of hiding it.
Be upfront about extra costs that customer will have to pay.
Be transparent about  ordering status.
Direct-to-customer marketing is way more efficient than using other platforms as intermediaries.
Reference
Philz
Starbucks
DoorDash
McDonald's US
Foodpanda
Grubhub
Deliveroo
Primary Research
Interviews were done with the business owner who understand the business operation and their customers behavior, and random everyday people who make to-go orders through either phone call or apps.
Takeaways
From interview
Remark: these interviews were done during the pandemic, which might affect customers behavior towards to-go orders
  • They prefer to-go orders to avoid leaving the house/office
  • Delivery order is convenient
  • They get frustrated when apps "lie" about the ETA
  • To avoid crowd and avoid wait time
From business owner
Remark: delivery order has not been made available before this app was made
  • At peak hours, pick-up orders customers still form a long queue due to high number of ordes
  • Customers prefer sitting down to enjoy a cup of coffee

Interviews are conducted to find out. Here are the mutually common and exclusive key take-aways:
Common
  • Meeting people and/or joining events at unfamiliar/new places
  • Rely on landmarks for clues (e.g., next to a McDonald's)
  • Map app doesn't improve low sense of direction
Real world
  • Road signs are confusing
  • Map app doesn't improve low sense of direction
  • Find places of interest (e.g., restaurant, hotel, attractions)
  • Search is a primary function
  • Struggles to find destinations that are right next to them
  • ETA is important
Virtual world
  • Joining friends for events is one key reason why interviewees travel
  • Teleportation is usually preferred, but not always
  • Teleportation isn's always preferred. Enjoy walking to a place and looking at the surrounding places, socking up the scenery, experience what goes between two places (e.g., a chance to gain experience points)
  • Do not rely on road signs at all
  • Not a first-persona perspective
Research and analysis

Takeaway

Transparency matters—To minimize ordering friction, it is always best to let customers know what to expect every step of the way in the process.
Estimation—Communication with customers about where their food is and when can they get their hands on it is crucial to reduce anxiety.
Familiarity—Familiarity leads customers to reorder the same item from known restaurants. Encouraging customers to revisit by treating them with special offers.
Ideation

High-level concept

The stakeholder has provided a high level user flow that shows how would users navigate through the delivery order process.
Ideation

Wireframe

The main order screen was created in a mid-fidelity wireframe to provide a visual understanding of the most important screen of this ordering process. Since this screen is the most essential part of the ordering process, I have decided to do the first round of test on this screen.
User test and feedback—After testing with 5 users, following are the learnings of their feedback.
Cart button
  • The size and position make checking out feels trivial to the process.
  • It takes users extra time to spot the icon, failing to encourage check out.
  • The item count is not obvious due to size.
Item listing
  • Using a one column layout requires way more scrolls to get through all items. The items at lower position get less attention or even overlooked in the process.
  • A long rectangle shape with text overlay on image could potentially affect clarity.
Lacking call to action
  • While checking out is a crucial step in the process, there is no distinct visual cue to encourage users to go to the next step.
Ideation

Iteration

After getting feedback from testing, I reevaluate what the users should be focusing on when shopping for products. Eventually I decided on recreating the "checkout" button to make it more call-to-action with brief order summary at a glance, and put it at the highest priority in visual hierarchy. This button also acts as a guide to guide through the checkout process. I also added icons onto the item cards, following the same principle of brief summary at a glance, to let users know if and how many of that item is in the cart.
Laying out the principle—After decided on the main shopping screen, other screens can follow the principle set by the main screen, which is using the button as a guiding tool of the process.
Convert to wireflow—In this stage, I decided to recreated the user flow from my previous designer and converted it into a wireflow. Using this method gives visual context to the flow.
Mockup

Starting an order

Order type—When designing this page, the users have to be able to quickly identify delivery order and pick up order. The distinctive icons act as the first step of identifying the type, the "proceed" button acts as the confirmation step to make sure they see what they are picking.
Prioritize ongoing order—After placing an order, users' would be anxious about their order status, therefore I prioritized ongoing order status to be the first thing and easiest thing to see. Without clicking into the order detail, the most crucial information which from research shows is "when am I getting it", is immediately seen.
Mockup

Picking a product

Item count—With a simple item count indicator slightly sticking out of the image frame, users can quickly get a glimpse of which item and how many they have picked, so they don't have to go back and forth to check the cart. The total item count and price is shown in the "cart" button, so they know how much and how many they are ordering immediately
Product page—Picture is always the quickest to get an appetite going, which is why I chose to let the image occupy large portion of the screen. Options for the product is always the next thing asked in the ordering process in real life, therefore this section is also given a high visual hierarchy.
Mockup

Order placed

Scan to pick up—During research, one business insight points out a potential risk of human error is picking up the wrong order. Scanning a QR code when the order is picked up not only minimize this risk, it also directly let the POS know the order is completed. Saving time and minimize human error.
Anxiety of waiting—Waiting for an order to pick up or be delivered is an anxious process. Be transparent about the order status is crucial for the customer's experience. I chose to word the message in a more friendly language—"your order is being prepared". Choosing this language style is more human than using formal wording, which can also help easing the anxiety of waiting.
Real time status update—The order status and wait time are being updated real time, so each time when user check order status, they know exactly when to expect the order.
Prototype

Try out the prototype

A clickable prototype was created to demonstrate how the interactions are played out in real time.

A complete screen flow for all team members

During the design process, all screens and variables are put into a flow chart to make sure all the screens are seen together, so all members involved in the project can see everything in a structural manner, and can iterate with better ease.

Design System

The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.

Other Involvements

Besides customer app, there were also a few other employee applications that I was working on.
Rider app—Riders can receive and accept orders from restaurant.
Staff app—Restaurant staff can receive, update and assign orders to riders.
Admin portal—Admin can manage stock, offers, order, members permission, push notification, vouchers, etc.

Reflect and move forward

This was a really exciting and fun project for me to work on as it provides real value, involved a ton of research, and detailed interaction work. However, shifting priorities and changing roadmaps have delayed the launch so I could not witness the full launch of this app.
A planned Android OS version
As stated above, this app is designed following Apple Human Interface Guidelines, which is best suitable for iOS but not necessary Android OS. If I have time to take this app to the next step, I would like to adapt this app to Android OS following Google Material Design Guidelines.
After launch optimization
I and the development team worked closely together using the agile method, and numerous SITs and UATs were done to test the app, unfortunately the deployed PROD on the app store was still under active development before I left the company. I would love to see the full app launched, and start collecting real world user data from real customers so I could keep optimizing it.
Final take away
There were times that the client's requirement, my design process and the development team's limitations crashed. Listening to both parties and helping them find the right balance, while not sacrificing UX on my part, is a challenging but fun experience.  I really learned some important takeaways from this project related to product and business processes.
Copyright © 2024 Dennis Lam All rights reserved
EmailRésuméLinkedin