S

alt-text

Quick Order

Android, UI/UX, 2015

Goal

To enable people to do more by simplifying their morning routine.

Nature of the project and my role

I had recently visited the US and while I was there, morning coffee had become a daily routine for me. Every morning, I used to go to the nearest Starbucks and have my favorite coffee to go, which was also what a lot of other people like me did too. Morning coffee was an integral part of their routine. And if they didn’t get it on time, then their frustration was evident. From seeing how it effects people, I thought of solving this problem by trying to make the process of buying that morning coffee more stremlined. Here, I’ve focused on only the morning coffee scenario and treated this as a quick design challenge. It took me a couple of days to arrive at the following solution.

Scenario

Today, Julie is in a frenzy. She was restless all night, thinking about a 9 am meeting she has been preparing for, and when she gets up, she can’t wait to get her hands on her first cup of coffee and plans to go to Costa Coffee to pick it up as usual right after she drops off her newborn at daycare around the corner. While on her way, her husband calls to say that his keys are in her purse and to please come back to the house asap. She drops off her child, drives home, throws his keys out the window into the driveway, honks her horn, then rushes to the store, just to see 6 people ahead of her in line. “Screw this,” she says, skipping her coffee and goes straight to work.

Outcome

Unfortunately, her first (and very important) meeting of the day didn’t go as well as Julie expected – she just didn’t have that special drive when pitching the new product to the group of customers she met with. When Julie has mornings like this, she wishes there was a faster and easier way to get a coffee.

Meet Julie

Julie is a 32 years old entrepreneur, working on her first start-up for the last six months. Before this, she was a Program Manager at Microsoft for 7 years. She is married. Her husband works with Boeing as a Sr. System Engineer. She is mother to a one and a half year old son.

alt-text

Empathy mapping and story boarding

On the basis of the created persona, I created an Empathy Map for the given scenario. This helped in taking the correct decision about user flows in the application. Then, I created detailed story boards for two possible scenarios. The first is an online ordering application – minimal clicks and maximum ease. The second is more ambitious and involves a wearable device.

alt-text

Userflows and wireframes

Since a lot of good coffee ordering apps are already available in the market, I wasn't creating the complete app. My sole focus was on solving the quick order scenario. I began with analyzing one scenario at a time. I started with analysisng the problem specifically for Mobile devices. This helped me getting the basic framework of the app in place.

alt-text alt-text

Visual design

I chose Costa as my brand partner and selected their brand palette. But the palette is designed with scalability in mind and any brand can customize this to their palette.

Since this was going to be used every day, the icons had to be intuitive and easy to remember. The icons would help in completing the mundane task easily and quickly.

alt-text alt-text alt-text

Scenario 01

Instant order

Julie is running late today, and wants to quickly order her usual coffee. She does not have time to customize or go through the tedious payment process.

Long press and pay - Julie opens her coffee app and goes to the quick order screen, where she has already saved her favorite coffee preferences. She uses the tap n hold option to instantly place her order. This simple interaction allows the user to merge the review screen with payment screen. The long press gesture ensures user confirmation and reduces chances of miss-clicks.

alt-text alt-text

Scenario 02

Edit and review order

Julie is not in so much of a hurry today, and wants to order her usual coffee, but without sugar. She quickly edits her usual preference and then proceeds to order her coffee. You can check out the following prototype to see it in action.

alt-text

Scenario 03

Wearables

The UI needs further simplification for wearables. Here, I've ignored a few technical difficulties to make the scenario stand out, such as payment confirmations without OTP. At your usual time it shows you a notification to order your regular coffee. Post the notification it is a simple process. You pay from your e-wallet and get a confirmation. It helps you navigate to the coffee shop. Also, it is always in sync with your phone app, so you can always open your phone to use more specific features.

alt-text
alt-text alt-text