Se lee en 5 minutos

The challenge is to create a very simple and straightforward app for coffee sales, which will operate either on site or at home. These are the requirements:

1. Coffee shop App

1.1. Brief: the challenge is to design an app to sell coffee.
To do this, I have to create:
Flowchart or information flow diagram.
Wireflow to show the information architecture in detail.
– UI design of the key pages.

1.2. App details
– Purpose: App for ordering coffee on Android and iOS.
– The store only serves one kind of coffee.
– The user can add from 0 to 2 portions of milk.
– The user can add from 0 to 2 servings of sugar.
– The user can choose the size of his coffee: Small, Medium or Large. 
– They can send it to you wherever you are, as long as the delivery time does not exceed 30 minutes.
– You can choose a time to pick it up yourself at his place.

Let’s start!

Once we have read and understood all the requirements, we will prepare the flowchart and the wireflow. This process is essential for the development of the following phases. It is the time to apply our creativity and ask ourselves what the App has to do and how it has to do it. This is a divergent phase of ideation. We will use a methodology created by the British Design Council in 2005 and fundamental in design thinking called double diamond. This methodology gives us the flexibility we seek to bring different ideas and solutions, and then focus on those that are most realistic and commercially and logistically viable.

In this case study we know that ease of use is crucial to make the process of ordering coffee fast and efficient, as well as to rigorously meet the requirements that are asked of us. Please, check the handmade sketch and flowchart for at least a minute and return to it after we have explained each of the screens that make up the wireflow.

1. Splash screen: the first screen we will find when opening the App will be the Splash screen or welcome screen. It will be shown while loading the contents of the App and is the perfect place to put the logo or name of our App.

2. Delivery options: we ask the user to choose whether he wants to have the coffee delivered to his location or prefers to come to the shop himself to pick it up.

3. I want it here in 30 no more than minutes: the App must have a very precise system of geolocation of the address entered by the user. Precision is essential to assess whether a delivery person will be able to reach that place in 30 minutes or less. Being able to deliver the coffee by hand before 30 minutes is a differentiating value of our App / business with regards to the competition. We need to strictly adhere to the times to provide confidence and credibility to our users. These two values will make the difference and can open the doors of success for us.

4. The customer will pick up his coffee in our shop: the geolocation informs us that the user is more than 30 minutes away and it would be impossible for us to bring him the coffee in that time. Or perhaps the customer simply prefers to arrange for collection from the premises himself. In both cases we give the option of selecting a time frame in which we will have the coffee ready for collection.

5. Choose the coffee you fancy: the next screen is reached in all cases and allows us to choose the size and “extras” of our coffee.

6. Order confirmation: the typical and essential display confirming the choice the user has made.

7. Payment methods: we offer the client a variety of payment methods so that they feel as comfortable as possible and this process does not become a pain point.

8. Order verification and collection: by means of QR or some similar solution we will identify the order, whether we bring the coffee to the customer or if he comes to pick it up at the premises.

Below you can review the wireflow with all the screens we just explained and its navigation flow.

Once both the flowchart and the wireflow are perfectly matched, it is time to move on to the final design of the application. For our example, only those screens considered key have been designed:

1. Splash screen

2. Delivery options:

3. Collection time:

4. The coffee you’re craving:

5. Acknowledgements and identification of your coffee:

Finally, here is a PDF with the final artwork in high resolution for you to enjoy and analyze. 


Once again, I want this case study to help you learn and internalize the process of ideation and interface design to create an App.