Mobile Ordering Experience with Widget
Café Kisuné

Personal Project I 2023

Challenge

Why we should wait in loooong queue?

Each time, do we repeat all steps for our go-to menu?

May I opt for pre-order, swift pickup? no hassle!

My order is already get ready? not yet?

** This project showcases my design process and is not linked to Kisuné nor this app was not implemented.

The app

S K I P the queue
S E I Z E the app
O R D E R in a snap

This app allows users to easily order customized beverages for individual preferences using a smartphone application. It exactly fit the needs of consumers who wanted to order fast without waiting for long queues at busy hours. You can order and pay in advance, tack your order with a live update widget, and then pick it up right away.

Why order via an app?

I believe that mobile order service has an opportunity to make our daily life more meaningful and delightful by saving time and by managing their pick up.

First, we need to understand market, benchmarks, user's needs and insight.

Benchmark
Starbucks
Siren Order

Starbucks app is the first launched O2O(Online to Offline) service in 2014.

In 2020, the cumulative number of Siren orders reached 180 million. High utilization rate on the way to work and during office workers’ lunch hours. The highest in offices districts where there are many office workers.

680,000

500,000

2018

2020

Average number of people visit (day)

170,000

70,000

2018

2020

Average number of Siren orders (day)

Siren Order
25%

Drive-Thru
Counter
kiosk

Customer Order Method

Usage per hour

26%

14%

8 a.m - 9 a.m

12 p.m - 1 p.m

Source;
https://easybiz.kr/starbucks-4/
https://english.hani.co.kr/ (News analysis)

The data

After user interviews, I gathered insights on their frustrations during the order placement process, their expectations from a mobile order system, and potential improvements to enhance the overall user experience.

What I find?

What I can do?

User research indicate that users spend less than 30 seconds on home screen.

Home

Design on engaging home screen with one-click features

Users repeat custom options each time whenever they place an order.

Customize Menu

Save customized menu, Placed them at the forefront and one click to put a cart

What is seasonal and new menu to explore new taste

Featured Menu

Sparking customer curiosity and seamlessly guiding them to placing orders

Research shows that users add items to their cart but not complete the purchase process because of tons of steps

Place Order

Simplify the process.

Displaying the nearest store, favo menus on home for a quick order

Through interviews, user wish to manage their pick-up during doing other activities

Manage Order

Place the prep-time and distance from the store to manage their pick up time

From the user survey, it's clear that users want easy access to order status updates and key app features

Real Time

Widget

Prioritize real-time order status updates and streamline access to features

Now that we know which data to start with and have a better idea and solutions.

Our next focus is to highlight key functions and demonstrate the app's functionality through user scenarios and wireframes

Wireframes

User journey involves two distinct processes: one for placing an order and another for tracking the status of that order. When creating wireframes, I make sure to focus on clarity, simplicity, and ease of use.

Place an order

Statue of the order

What is the merits of real-time widget then?

Once you’ve placed
an order, you want to know the status
at a glance

Through user survey, I have learned that users'd like to track their order without re-opening the app. Plus, they also want to skip tons of processes to order their go-to menus.

I believe that mobile order app has an opportunity to stay informed on their orders and access key features without navigating through the entire app interface.

Widget

Now that we've completed the main pages and functions, let's take a closer look at how to build a widget.

To nail down the widget's features, we start with the explanation phase, considering:

What features hold the most value for users?
How to prioritize essential info and functions within the limited space?
Which functions require quick access in the widget?
How to make the visuals are clear and intuitive?
What relevant info can enhance the overall value?

What to keep, What to remove?

During this explanation phase, we should cluster the features and information to figure out what stays in the widget and what gets removed. Putting too many in a tiny space would just make it less valuable. Remember, a widget's all about giving quick info and functions at a glance, whenever you need them.

When we focus on these points, it's obvious we need to highlight two big things: Easy Access and Real-Time Updates.

Easy Access

Favorite menu : Simplify re-ordering process on their go-to menu
Store Nearby : Skip the exploring process to select the nearby stores
Rewards : Get rewards without opening app

Real-Time Updates

Status of order : Update real-time status of their order on home screen to avoid re-open the app

Easy Access

It's about the features users frequently use and the main purpose of this app. Once users are familiar with interfaces, they naturally would like to skip unnecessary steps to get right to their favorite stuff. If they want to discover something new, they would open the app and explore.

When we get that, it becomes easier to identify key features; what we should add into the widget.

Access with A single tap even without a tap.
Reduce steps.
Provide personalized functions.

Rewards

Display QR code to get rewards without opening app

One-Tap Reorder

Simplify reordering process for their favorite items with just a single tap.

Order Nearby

Easily order without searching for nearby stores, just check store info.

Real-time updates

After placing an order, nobody wants to stay glued to their phone. Reopening the app and sifting through tons of text and visuals can be a hassle for users. They just want to intuitively check the status without any extra actions.

In selecting content for the real-time update widget, I categorize the different types of information and triggers from the main order status page, helping us prioritize what to show ;

1- Current status of your order,

2- Estimated prep time,

3- Triggers (track order, share, cancel, distance…)

Dynamic : contents that update until you get your order.
Static : frozen information that won’t evolve during the process.
Triggers : actions for getting further information.

Visual hierachy

To design intuitive visuals on widgets, I put a hierarchy within three contents and transform them into 3 components; illustrations with status, texts with estimate prep-time, and a progress bar.

Plus,I divide the widget space into three blocks to create visual hierarchy.

Illustration

Texts

Progress bar

Contextualizing

Adding relevant elements helps users contextualizing what they've done and what's coming up. Plus, By emphasizing each steps with familiar illustrations and a progress bar to highlight each step, users feel more at ease and can quickly see what's happening.

Order status

Order status

Order status

Widget on lockscreen

Let's take it one step further. What if users could see real-time order status right on the lock screen, as soon as they pick up their phone, even without accessing the home screen?

Imagine, after placing an order, order status updates appearing on the lock screen at a glance. Wouldn't that provide the ultimate user experience?

Splash Screen

Designed the screen keeping the rule of minimalism. Enhanced the brand identity with the illustration and french flag.

Home Screen

Showcasing Saved Menu and Store near by user, it ensure a direct link to order without additional search steps. Order and get a reward through a QR code on the home screen.

CLOSE STORE

Displaying the nearest store on the top of the list with the distance and open hour info. Connect users instantly with the favorite store.

Order

One-click order your pre-customized menu in favorite section.

Check allergies and nutrition info before adding item.

Order history allow users to reorder the same items again easily

Checkout & payment

Efficiently plan product pickup before payment by providing prep time and store distance, all while enjoying fast payment through gift card and various payment systems

Live update widget

Optimize the ordering process with illustrations, brief text and petite motion effects to provide an intuitively clear overview of the status at a glance