Loading
00
UI & UX Design
Coffee
House
Client: SELF PROPOSED
Year: 2020
Platform: MOBILE
THE IDEA

The idea behind the app is really simple. We all enjoy a cup of coffee in the morning, that gives up the energy necessary for the entire day. But for some of us, even grabbing a coffee is sometimes difficult due to our stressful lives. This is where Coffee House comes into play. Wouldn't it be easier if someone could grab a coffee or a hot drink and deliver it to you?

THE CHALLENGE

The goal for this project is to design the app so it can be used by anyone, even if they are in a hurry.

The high level goals were to:

1. Make it simple to use for everyone and have a similar interface like the food delivery companies.
2. Give the opportunity to the restaurants / pubs / coffee shops to sell their products faster and easier to their customers.

HOW IT WORKS

Initial Steps

First things first, after the app has been installed on your device, you are greeted with the starting screen and then required to login or sign up in the app. In order to speed up the process for the user, the option to login using their social media accounts was added.

Getting Started
Login
Sign Up

Setting up the location

In order to avoid the confusion (for customers and sellers), after the login, the user is required to either manually search for his address or to activate the device's location. This process is required, because in large cities, some of the restaurants / coffee shops / pubs won't sell due to high distances that the rider has to travel in order to make the delivery, which would result in a loss of profit.

Search
Location Result

Device location settings can be activated from the grey button from the search bar.

Get Location

After pressing the device location button a pop-up will appear to confirm or decline access to your current location.

Store and product selection

Instead of relying on finding stores just based on their location, a rating system that displays the quality of the services / products has been implemented (based on Google Review System). This system should inspire confidence among customers to explore other shops also, thus creating more opportunities for shop owners. And if a rating system isn't enough to convince a person, then an beautiful image with the place where can order, might do.

Places to order
Product List

Filters to sort products have been added to increase the efficiency of the search.

Adding a product to cart
Product description

Shopping cart, payment and address details

These sections were designed with one idea in mind and that is to facilitate speed ordering. If we were to be honest, typing addresses or card details is possibly the least favourite / boring part of shopping for products. In order to minimise the number of the interactions, the shopping cart allows to increase or decrease the quantity of the products in case of a sudden change of mind.

Shopping cart
Payment and address
Address details
Card details
Empty shopping cart

Orders

After placing the order, the customer can relax and enjoy as the app updates the status of the order. An order number is generated for every order, for the customer to use, in case there is any problem with the app, delivery or the products.

Order Status
No order

Quick re-order

Quick re-order is a feature that makes the Coffee House app stand apart. In a realistic world, the customers usually tend to order their hot drinks from the same shops, depending on their locations (if they are either at their workplace or at home). The app can track the number of orders that the customer places and based on that it can provide suggestions from previous purchases. This reduces the time spent on the app to order the same products and could potentially reduce stress in daily activities.

Quick Re-order

User profile

Allows the user to change or update their account details and some of their personal ones (such as credit card info or delivery address).

User Profile

HOW IT STARTED

APP FLOW

I designed the flow of the app based on the users needs (primarily for daily usage) and their needs usually revolve around getting things done as fast as possible. The process of purchasing a product is quite straight-forward, allowing even the users that are not that familiar with online shopping, to be guided from one step to another and complete their order without the assistance from another person.

Coffee House App Flow

WIREFRAME

When I built the wireframe, I have encountered a series of design and ux problems (from a regular user's perspective) which I've taken as a challenge to solve them by using simpler solutions.

CONCLUSION

In conclusion, I really enjoyed how Coffee House turned out especially the user interface design. This together with the UX and the re-order option should allow Cofee House will be able to build a strong and lasting relationship with it's users.