2023
Coffe Ordering App
Project Overview
What is Sweeter coffee app
Sweeter is a chain of small cozy and aesthetic coffee shops in Kharkiv. A few years ago, they started growing in other cities.
When a company starts expanding to new audiences and markets, it's time to offer users an improved experience of interacting with the service. So I decided to create an app that would allow users to order drinks online and pick them up at coffee shops without waiting. Having your own app is not only a better experience for users and an opportunity to compete with larger companies, it is also an opportunity to effectively show potential customers your unique offers and keep them informed.
And so the work on Sweeter app began.
Problem of Order & Pick up
The main goal I tried to achieve with this application was maximum speed and convenience.
The user creates his order → confirms the order → comes to the cafe →
pays for order and takes just prepared, hot drink.
Why a standard flow such as the one used by McDonalds is not good for this application?
The main reason is that the restaurant doesn't know when you're coming, so you either have to wait for your order to be prepared or your order will be prepared before you arrive. In the case of coffee and other hot drinks, this can lead to the drink getting cold before the customer arrives, which makes this feature almost useless
User Flow
The key function of the app is Order and Pick up. So my task was to make the ordering process as simple and convenient as possible.
At the same time, the fact that this is a coffee shop app that should provide you with hot and tasty coffee makes User Flow different from other apps with a similar purpose, such as McDonalds
Key Change
One of the features of the Sweeter app's user journey is that there are no additional screens to start an order. To order, just click the "New order" button on the main screen and start ordering
One of the features of the Sweeter app's user journey is that there are no additional screens to start an order. To order, just click the "New order" button on the main screen and start ordering
In my opinion, this option is closer to people's usual life, because first people have wishes, and only then they choose a way to achieve these wishes.
The ability to specify the time of arrival and not wait for the order to be prepared improves customer interaction with the coffee shop service
Home Screen and Menu
Main Screen
The main screen contains the user's favourite or last ordered drinks, if the user has not marked any drink as a favourite, the drinks from the last order will be displayed last. However, there are also special seasonal offers at the top of the list. Sweeter has exclusive seasonal drinks at every time of the year, so the user will always know what is available now. At the bottom is a large and bright button to place a new order.
At the top of the screen, there are activity buttons (a special feature that I will talk about later) and a user avatar that leads to your personal account.
The navigation bar contains 4 main sections of the application: Home, Menu, Sweeter Cafe on the map, and Shop (Sweeter also sells coffee beans and home brew kits, so I decided to add a separate page for purchasing these products as well, but today we are focusing on the main function of the app - ordering)
Menu/Ordering
The order page displays all drinks and desserts. At the top are filters that allow you to quickly switch between drinks, desserts and sets.
All drinks and desserts are divided into their own categories. For beverages, these are Seasonal Specials, Hot Drinks, Cold Drinks and Teas. There is also a text button at the top called Filters, which allows you to quickly switch to a specific type of drink.
There are two buttons at the top of the screen: Search - for searching for drinks and Favourites - which will display the drinks added to your favourites
The bottom of the screen displays information about the products in the Cart, it shows the number of items added to the basket and the total price
Activities
Sweeter coffee shops have a variety of promotions and special offers, both seasonal and permanent. Therefore, it would be a terrible decision not to inform the user about the best features of the brand
Therefore, next to the user's account, there is a bell icon that lights up red when new offers appear. I decided to present the offers in the form of stories, as in social networks. Users are familiar with this method and it is perfectly suitable for displaying timed offers
The information about promotions is also clearly structured.
Above is for the period of the promotion
Catchphrase: catches the customer's attention
General brief / clear description of the offer and its conditions
The story should also contain an Image. It's an emotional connection, and of course, instead of photo can be used a video.
There are also several quick actions for users at the bottom: Read more (a secondary action, in case there is a more detailed description of the action, the user can read it immediately).
The Proary action: It can be "Start ordering", "See nearest cafe" or "Go to menu"
Product page
The product page is designed to be as simple as possible to display information in the most convenient way, without distractions
On the product page, users will see a large photo of the product and its name with a description. In the upper right corner, there is a button to add a drink/dessert to favorites
Image
The main selling element and emotional aspect
This is a really important element, because it attracts the attention of a potential customer, and it, along with the price, are usually the main aspects that decide whether a customer will buy a product
That is why the product is presented on a white background, without any distracting objects
Description and customization
This section is important for users because here they get important information about the product, can personalize it, and this section can influence the decision to buy the product. Here you can find a short description, select the number of units and size.
Any options to personalize a drink or dessert are also displayed here, and if any option affects the price, there will be a cost value next to the option name
Action
And the buttom part of the app is sticky field for confirmation, users can add the product to the cart seeing the total price.
For different types of products, there are different display options for changeable options
For example, in the case of a dessert, it would be more appropriate to have a picture of the filling, rather than a text, to show the flavour of the product.
Finishing order
Checkout screen
A simple checkout screen is the key to a good user experience, because according to a study by the Baymard Institute, bad design and checkout process is often the reason why users abandon the purchase
To simplify the process, I decided to divide it into two parts.
First, the user is taken to the Checkout screen of their order. After that, the user selects a cafe to pick up their order and is taken to the order confirmation screen, after which they choose a payment method
Now the checkout process looks like this:
View your order
Select the cafe where to pick up your order
Choose estimated arrival time (optional)
Сonfirm the order and choose a payment method
Choosing cafe to pick up
I also decided that the user would choose the restaurant after placing the order, this option seemed more familiar to people, besides, in applications with the Order & Pick up service, users are often asked to confirm again the place where they will pick up their order, which only tires the customers
Map of cafes
The cafe selection page is also as simple and intuitive as possible.
Above is a map with Sweeter cafes marks, And below is a list of nearby cafes. Each cafe on the list is named by the street it is located on, and the user also sees information and distance about the approximate walking time to each cafe.
There is also additional navigation at the top. The first button is to go back, and there's also a zoom button to focus the map on the user's location.
The second button displays the establishments added to the favourites list
Cafe screen
If the user selects a casino, he or she will see the information screen of that casino.
The information includes opening hours, distance and walking time, and the number of seats in the cafe.
Additionally, the user can view photos of the place and a list of entertainment. Sweeter cafes offer a variety of entertainment, such as game consoles, board games, books, vinyl music players, etc.
The main actions: Order here (Primary action), add a cafe to favourites (Secondary action) and view it in the default maps app (Secondary)
Arrival time
Users will also be offered to add a time of arrival to the coffee shop, in which case they will not have to wait in queue for their order
By default, the time selection interface shows the time it will take the user to get to the venue. The app takes the current time + the time shown in the maps as the time it will take the user to get to the cafe on foot + 2 additional minutes
The user can specify the time of arrival or decline
As a result, this app would be a great addition to the company, as it aims to provide the most convenient experience for users. This is exactly what the growing chain of cosy coffee shops needs