Evioghene Uwede Founding Product (UX) Designer

ABOUT

The Problem
According to statistics coffee is amongst the top widely consumed beverage in the world, However, there is one problem that persists when it comes to getting a cup of coffee "waiting on a queue" Often times users have to wait for unspecified periods of time in order to get their coffee, Data shows that an average of 24mins a day is spent making, serving, and drinking coffee at work this excludes time spent on waiting for coffee at coffee shops or cafes. Customers have to sometimes wait in long lines before getting their coffee.

In order to reduce the wait or make it less frustrating, I came up with a mobile app that lets you Pre-order coffee and pick it up when it is ready or to order and have it delivered to you.

Goal : ​To reduce or make coffee the waiting time less frustrating
How?

So i was thinking, if I was a coffee drinker and I met a long queue at the coffee shop I'd immediately start weighing my options asking myself how badly i wanted the coffee, if I could get another or if I should just wait and then I figured if I knew exactly how long I was waiting for I'd either just wait or I'd go away to come back few minutes to when it was my turn and it would make the wait less frustrating for me. I assumed most people would react the same way but i didn't want to just assume so I asked a couple of friends and the response was as I had predicted, most of them agreed that if they knew how long they'd wait for they'd most likely wait or leave and be back not necessarily few minutes to when it's time for their order but they'd be back and so with that I decided the following features would help reduce the frustration as well as improve the experience.

1) Delivery:
Instead of having to get to the coffee shop to decide whether or not to wait or come back the user can order via the app and have the coffee delivered to him. Another scenario would be for the user to get to the coffee shop and immediately decide he can neither wait nor come back and choose to place an order and have it delivered to his specified location. Whether or not this option is available however depends on the coffee shop and its policies.

2) Wait Time:
Wait time is the amount of time a user would have to wait till his/her order is ready. The user can decide to spend waiting time at the coffee shop which could in actual fact be of benefit to the shop as the user could decide to get something to snack on while waiting or have time to go really look around the shop and maybe find something of interest or the user can decide to leave and be back later to pick up the order.

3)Timer:
When Pre-ordering or choosing to pick up coffee rather than have it delivered, I added the timer feature with the default time set to 10mins it reminds the user when it’s 10 mins left to pick up coffee. This is in case the user is lost in work or in a conversation or has generally lost track of time

RESEARCH
Target Audience: Coffee consumers
Before going on to sketch ideas I wanted to know more about the product and my users so;

I researched on the different kinds of coffee and realized that each kind of coffee required different preparation times. This helped me understand why there was a queue or what contributed to waiting time as the coffee shop couldn't just randomly prepare any kind of coffee because customers can and do place orders for different kinds of coffee

I also researched on the time of the day when coffee is most consumed and found it to be in the morning, my hypothesis is that because there are so many people(coffee drinkers) who have to resume work in the morning it is most likely a reason for the queues and waiting time both at coffee shops and at work.

COMPETITIONS:
I also researched to see if there were pre-existing solutions to know how they were solving this problem and discovered that Starbucks just recently released a feature that allowed it’s users to order and pay for their coffee via the phone and pick it up (does not include delivery option/timer feature)

I also found another app Ordoo a mobile app for coffee shops that also lets the user order for coffee via the app and pick it up at the store. (does not include delivery option/timer feature)

USER FLOW
I came up with the user flow and the user journey map. To highlight the steps the user takes to achieve his/her goals. Then I listed out the features/elements of each page so as to keep track of what to include and what not to include.
Step 1: User selects preferred Coffee in the My Usual session
Step 2: User chooses what option she prefers options available are "Delivery" and Pick-up" and click on BUY NOW
Step 3: User previews order details and select "Proceed to checkout"
​Step 4: User Selects Preferred Payment method, If payment requires verification, the user verifies the payment.
Step 5: User previews details with the option to make a few changes to Information like Address and Payment method and then Confirms Order
Step 6: Order successful page, user can view order from this page

SKETCH & WIREFRAME
At this point, I had a clear understanding of what the app was to do as well as how to do it so I sketched out the ideas that came to mind.

Wireframing is a compulsory step for me as it brings my ideas to life more often than not my wireframes ends up being different from my initial sketch this is because an idea that looks great on paper may not be that great on a screen.

​Another reason for this is that while Wireframing I focus on the UI and I'm simultaneously trying to figure out if the design would aid or hinder the user's experience which is a contrast to my thought process while sketching which majorly focuses on putting down the ideas for the interface. In this case, I did make changes to my wireframes and included more features. Like the delivery to and pick up option, I had to change it's position because of the information Hierarchy if I had left it the way it was in my sketch it would mean that the user would have to start reading from Top - bottom and from the Bottom back up and then back to the bottom again before the BUY NOW button since depending on the option picked the information concerning the order changes.
However, moving the option to the top meant the user could read the page normally (i.e from the top - bottom). Another issue I realized was wrong with that approach in my sketch was that the user could miss out on the change in Order detail that occurred and that might lead to some amount of confusion when the previews the order and then the user would have to try to figure out how that happened already giving rise to a decrease in the user's experience. See diagram below for illustration

I also decided on including the Buy Now feature while I was designing the wireframe. i realised that if from the user's story our user had chosen one of her usual she would probably just want to pay for it next so i included that option so she's not stuck with having to go through the whole process of add to cart and then viewing the cart and then clicking on Buy Now when she could just click on Buy Now and go ahead with the process.

Since I was designing the app by myself I decided to not collect feedback using the wireframes and this is because for feedback I plan to upload the pictures to my Whatsapp status and send them to design communities so I wanted feedback from both designers and non-designers at the same time and it'd be easier for the non-designers to give meaningful feedback​

UI DESIGN
​I made three different versions of the UI because I wanted to try out the color combinations. I showed these to a couple of people and each preferred one over the other so I decided to keep all three. This was version 1 of the designs by the time I was done something didn’t seem quite right about the Home screen then I realized it was packed I was putting too much information and so I had to re-evaluate and then realized that there was no need to have the Tag information, taking that out made the design a lot less packed.

​ I chose to use the term "My Usual" over "favourites" because if you visit a particular bar pretty often it gets to a point where you no longer need to specify what it is you want so the bartender goes from just asking "what can I get you?" to "what can I get you? the usual?" or it's a situation where he asks what can get you? and your reply is the usual? so I used that with this scenario in mind. There's the option for more than one coffee in the "My Usual" category because I was thinking, the user would probably frequent two or more coffee shops for different kinds of coffee. So based on his mood or craving he might prefer coffee shop A's macchiato over that of coffee shop B so whenever he goes to coffee shop A his usual would be a Macchiato.

MADEIT CREDITS

Project featured: on 23rd May 2019

KAFES

*
*
*
*
*
*
*
*
*
*
*
*

Comments