IntroA SIDE PROJECT
|
DurationApril 2019
|
TaskInterviews, Competition analysis, sketch, user journey, User Flows, User Persona/scenarios
wireframes, prototype, visual design |
ToolsADOBE XD
MILANOTE COOLOR.CO PEXELS BURST PENCIL & PAPER |
A LITTLE BACKGROUND STORY
|
This concept was initially an idea for a competition until I realized that I was ineligible to apply, However, I couldn’t let it "waste" so I decided to turn it into a side project If you’re interested in collaborating to bring it to live shoot me a mail Usually when I have to come up with a name for a product I'd find out what solution it is providing and summarise it in a word and then search for the Greek, Roman or Latin equivalent of that word, in this case, I searched for the Greek equivalent of the word Coffee and decided to use it as the name of this product |
|
APPROACH
|
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.
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
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
The Process
I’ll take you through the process i used to design the app below.
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)
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 selects "Proceed to checkout"
Step 4: User Selects Preferred Payment method, If payment requires verification, user verifies payment.
Step 5: User previews details with the option to makes 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
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 selects "Proceed to checkout"
Step 4: User Selects Preferred Payment method, If payment requires verification, user verifies payment.
Step 5: User previews details with the option to makes 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
User Flow Map
USER JOURNEY MAP
Included in the User journey map is some information about our user and how she navigates through the app
User Journey Map
SKETCH & WIREFRAME
Sketch
|
WireFrames
|
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. While Wire-framing 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.
Change in Sketch and Wireframe
In this case, I made 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 user previews the Order, the user would have to try to figure out how that happened already giving rise to a potential decrease in usability
I also decided on including the Buy Now feature while I was designing the wireframe. i realized 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.
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 user previews the Order, the user would have to try to figure out how that happened already giving rise to a potential decrease in usability
I also decided on including the Buy Now feature while I was designing the wireframe. i realized 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.
THE UI DESIGN
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 "favorites" 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.
I chose to use the term "My Usual" over "favorites" 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.
FEEDBACK
ISince 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
I shared the design with friends for feedback.
The only feedback I received was that the background image for the status bar was distracting. To fix that I blurred it out a bit and it helped with the colour contrast between the text and the background making it easier to read.
I also effected the changes I highlighted earlier to the final UI design
I shared the design with friends for feedback.
The only feedback I received was that the background image for the status bar was distracting. To fix that I blurred it out a bit and it helped with the colour contrast between the text and the background making it easier to read.
I also effected the changes I highlighted earlier to the final UI design
Re-Designed Interfaces
TAKE AWAYS
Working on this project reinforced the importance of having a process, following design principles and standards as it was much tougher for me to evaluate my design but knowledge of those principles helped to make it easier to do so. It also ensured that i ran into fewer issues given that the design concept is familiar.
It also reinforced the fact that design is an iterative process as i kept finding ways to improve the usability whilst working on the project.
It also reinforced the fact that design is an iterative process as i kept finding ways to improve the usability whilst working on the project.
