INTRO
My initiation into the field of UX began with a practical exercise within the first stages of Google UX Design course. The challenge involved devising a solution for a bustling metropolitan café branch, where customers encountered issues such as extended wait times for their take-away beverages and the complexities of managing batch orders.
This hands-on assignment provided a structured approach to comprehending user research, the creation of user personas, constructing empathy maps, formulating problem statements, and mapping out user journeys - a comprehensive introduction to the essential steps in the Design Thinking process. Moreover, it served as an exciting opportunity to delve into and familiarise myself with Figma, a tool that would soon evolve into my creative canvas.
A STORY OF SO MANY POTENTIAL USERS
Hey, this is Josh!
CONTEXT
It doesn't matter what age Josh is or what his hobbies are, Josh represents a not so small sample of users of all ages, genders and motives to order multiple coffees that have experienced the anxiety of having to memorise or read from a piece of note a large group order and say it without a mistake, stutter and preferably without sweating through a brand new shirt.
Josh has been honoured with the task to go and bring his colleagues and himself some coffee. Or he volunteered to get some extra points, who knows.
He can have them write what they want on a piece of paper he'd drop on his way to the cafe.
They can text him a name of the coffee that actually doesn't exist on the menu.
They can even let him choose! (Which is his worst nightmare)
But even if Josh stands in front of the barista with a ready list of correctly spelled list of orders, he may not find the voice loud enough to make sure the barista with a breath taking smile catches it right.
And if he somehow, by miracle, recites 9 orders of different variants for cappuccino with unicorn sprinkles and free range mammoth milk, the ice in the matcha latte will melt by the time the newbie barista in training makes the last caffeine-free rainbow cocktail.
JOSH IS A LITTLE NERVOUS
JOSH SEEMS TO BE SET FOR FAIULURE
Since the chances of this being a success story are pretty slim, Josh needs a tool to help him with this.
Josh would for sure appreciate if he has one less thing to worry about and if his mates or whoever set him up for such traitorous task, shared the responsibility of making sure their orders are placed correctly.
DON'T SHOOT THE MESSANGER
If the responsibility of placing orders correctly is stripped from poor Josh and all drinks and snacks are ready to be picked up at specific time, any potential error can occur in the hands of the barista, which is risk worth accepting as for Josh this is better than being the one to blame.
CHALLENGE
HOW CAN WE EXPEDITE A BATCH PICK-UP FROM A COFFEE SHOP?
Running a hospitality business in a bustling metropolitan area presents numerous challenges. Even well-established restaurants face intense competition and must continually innovate to retain their customers.
CAFÉ - THE URBAN JUNCTION
In a cafe, diverse scenarios unfold as customers come to either sit and chat or work on their laptops, while others simply need to swiftly pick up their orders and be on their way. This dynamic creates a unique intersection of experiences throughout the day. Despite the differing destinations where the purchased products are ultimately enjoyed, they all converge at the bar where the preparation and processing take place, serving as a common ground for customers with varied needs and preferences.
This can create congestion.
A SEPARATE PATH FOR TAKE-AWAY CUSTOMERS?
Prolonged wait times for customers who exclusively visit the café for take-away purposes pose challenges not only for the individuals themselves but also for the overall business and seated customers. The presence of extended queues not only constrains available space but also leaves departing customers with little control over the time required for their pick-up, impacting the overall efficiency and satisfaction levels of both customers and the establishment.
Digitalising the order placement process not only streamlines in-person service but also enhances the overall efficiency of the customer's visit to the cafe.
MORE ORDERS, MORE SPACE FOR ERROR
Placing orders for more than one person is not uncommon, especially among colleagues. If such scenario occurs for a take-away order, it can be very stressful for the one who's up to the task to make sure everyone's wish is ordered and delivered correctly.
What if we eliminate the dual-order path between the individual picking up the order and other members of the party, and streamline the process to its bare minimum? And minimise the potential for errors along the way?
A CoffeHouse Business scenario was provided by the Google UX Design Course for this exercise.
"CoffeeHouse is an international coffee store chain with locations in New York, Chicago, San Francisco, Cleveland, London, Nantes, Reykjavik, and more. It aims to serve quality coffee with local flair. Their drinks range from $3 - $8. The shops are minimalist, clean-lined, and feature a variety of freshly brewed house blends from the world’s major coffee regions. They offer both ready-to-drink and whole or ground beans by the pound. Their specialty drinks are made to order at their counter For each of the cities they currently operate in, they have crafted an exclusive coffee-based beverage that can only be ordered in its city. This has inspired fans to seek out CoffeeHouse shops in other cities in an effort to try all of the exclusive creations.
Services:
-
A counter where CoffeeHouse baristas make drinks to order.
-
A selection of pastries and scones sourced locally from the cities they operate in, but made to CoffeeHouse specifications."
RESEARCH
RESEARCH TAKEAWAYS
-
The benefit of extending the service scope to an app that can help make orders online and provide things like book a table or service to table is that now customers don't need to be contained by which coffee shop is the closest in order to speed up the take-away process and compromise on taste they prefer.
-
The purpose of this app is to improve the overall experience and save customers time and so it should be simple and straightforward enough to replace the current ways of for example having a take-away for a group where the customer would walk up a bit earlier and have all the orders on a paper note. These task are not too complicated nor time consuming however provide a lot of space for mistakes and anxiety and in the end they are an extra task that can be skipped if there was an app to take over.
TAKEAWAYS
Not every activity or business necessitates an app or a dedicated digital product to thrive, attract customers, and generate revenue. However, to excel in the fiercely competitive hospitality market and deliver exceptional customer care, businesses can gain a significant edge by offering something extra. For them, this means extending a metaphorical red carpet to their doorstep. Winning customers involves more than just the product; it's about providing effortless access to it.
From the customer's perspective, a supporting digital product must prove its worth in claiming space on their phones. Beyond conventional incentives like loyalty points or discounts, businesses in large cities understand the necessity of going above and beyond in engaging their customers. Simplify my life, and I'll readily spend my money with you.
Ultimately, any well-crafted digital product, especially one designed to support a business, is a transaction in itself. It strives to deliver a seamless user experience for customers while proving to be a successful investment for the business.
Straight to the point. The user is greeted with CTA buttons of two main reason for this app to exist in the first place and of course a menu with highlights of the week or monthly promotions.
DESIGN
BASKET
Menu is divided by category to beverages and food and furthermore to hot and cold drinks etc.
Bottom navigation bar
- relevant pages on click
- user page for quick access to current orders or bookings
- map of branches with option to save favorites
- basket for online orders
Place for relevant marketing
- a place to promote main deals
- scrollable
- redirects to the item inside menu
Main CTA buttons
- easy access to key functions
- large buttons with icons for clarity
Personalised greeting
- indicates the user is logged in
- personal touch
COLLABORATIVE FLOW, STEP BY STEP
Menu
- Basic info included such as price
- Allergens and calories
- Button for quick add to basket
Categories
- Quick and easy access to relevant items
Search-bar
- Quick access to relevant items
Buttons
- Add to basket or customise before adding
Info
- Information sorted by importance
- Followed by description
- Price is separate to be easy to identify
Image
- Large product image
MENU
Just like an actual basket user can put anything for check-out now or later. Frequently purchased items are shown in upward dropdown menu for quick access.
Upwards dropdown list
- Have fast access to frequent items
- Scrollable and collapsable
Basket items
- Option to add or remove items
Interactive Checkout button
- Button confirming purchase with total being reflected in real time
Invite
- Option to collaborate is placed in the basket where the action will be monitored
Select friends
- From app users in contact list
OR via SMS invitation
Search and sort
- Find friends by search of filter recent/frequent etc.
COLLABORATION
Ordering just one coffee in advance to pick it up fast is certainly handy however it does not make a huge impact on the overall experience unless it is a hush hour at the cafe. What makes a noticeable impact is ability to delegate the responsibility on each member of the party for their order when ordering a batch. Ordering a batch from a single account can be convenient in many occasions such a company order at a group meeting for example. In this case the chosen person could have himself the trouble our Josh had experienced in the story above. Here's how such collaborative order could work:
Instructions inputs
- Choose how to get your order
- In case of pick up, choose the branch, time and payment method
- Remember or favorite branch or corporate card to pay with
Order details
- Retrievable on the account page
- Both QR code and order number for double identification in case QR reader doesn't work
- Receipt can be found under user account page
CHECK-OUT
Once beverages are chosen and appetite starts building up all left to do is choose whether to do take-away, have the purchase delivered to the table (this is great when working in the cafe not being able to leave the desk) or it can be delivered to you via partner delivery service. Delivery charge or other service charge specified in the next step if applicable.
CONFIRMATION
User will not be left empty handed once purchase is made. The order will need to be matched with the user for delivery and pick-up. Each order will generate unique number and QR code.
HOME SCREEN
USER INTERFACE
Retro is the theme of our imaginary Cafe and so the choice of colours, rounded shapes and curves are inspired by 70s when earthy colours were vibrant and playful as opposed to today's sleek design.
COLOURS
In order to help gently guide the user through the flow, the background of the app changes based on the place or part of the flow they're in.
Part of the base palette, used as contrast colour for primary elements as a dark
Wine Cellar
# 533432
Part of the base palette, used as contrast colour for primary elements as a highlight
Antique White
# F4EAD8
Used as a background
Grand Avenue
# 5C5237
Used as a background
California Roll
# A19C81
Used as a background
Cosy wool
# C9B89A
Error and timer colour
Brick
# C24E00
Primary accent colour used for CTA elements
Retro Blues
# 336170
Secondary accent colour used for CTA elements and highlights
Plastic Vanilla
# EED698
Basket space has a light background. It was chosen to contrast and catch users attention and indicate a change of mood from browsing to shopping.
Home, Menu and all default pages of such sort have same, mild green background
Finally confirmation page has its own background colour that has enough contrast to be read from distance or by QR reader.
Mild green is the background of making choices. Just like menu, users are invited to choose between pick-up and delivery as well as branches and payment method
Collaboration countdown
- Whatever time the collaboration is set to it'll start the countdown visible for all
- Also visible on top of the screen for all once accepted
Items being added IRL
- The manager user can add Qty and decrease only where for their share of the order
Order button
- Disabled as long as the collaboration is on, enables once period ends