Coffee Ordering App | Case Study
A custom-built application for ordering from a coffee shop called "Coffee House"
Date
Feb - March 2024
Tools
Figma, Moon Design System
Project summary
“Coffee House,” a café located at the entrance of a large office complex with around 500 employees, approached me to design a dedicated ordering app. Although the shop had a steady stream of customers from nearby offices, the volume of orders placed through platforms like "Snap Food" and in-person visits was lower than expected. This indicated hidden pain points in the ordering process. My goal was to identify these issues and design a solution that would streamline ordering and ultimately boost daily order volume.
Project summary
“Coffee House,” a café located at the entrance of a large office complex with around 500 employees, approached me to design a dedicated ordering app. Although the shop had a steady stream of customers from nearby offices, the volume of orders placed through platforms like "Snap Food" and in-person visits was lower than expected. This indicated hidden pain points in the ordering process. My goal was to identify these issues and design a solution that would streamline ordering and ultimately boost daily order volume.
Empathize
Empathize
Empathize
What we did at the first?
At first, I did 18 interviews with the goals of identifying main frustrations that employees of this large office complex experience during the process of ordering from a Coffee Shop and understanding common challenges they face to manage a busy work time and have a drink to relax and get energy.
What we did at the first?
At first, I did 18 interviews with the goals of identifying main frustrations that employees of this large office complex experience during the process of ordering from a Coffee Shop and understanding common challenges they face to manage a busy work time and have a drink to relax and get energy.
Define
Define
Persona
Based on the results of the interviews and the obtained pain points, I designed this persona to better understand the real needs of users;
Persona
Based on the results of the interviews and the obtained pain points, I designed this persona to better understand the real needs of users;
Persona
Based on the results of the interviews and the obtained pain points, I designed this persona to better understand the real needs of users;
User journey map
I also drew a user journey map to better follow the user's ordering process from the coffee shop app and make sure that none of the user's needs were missed.
User journey map
I also drew a user journey map to better follow the user's ordering process from the coffee shop app and make sure that none of the user's needs were missed.
Ideation
Ideation
Wireframing
Wireframing
After study the competitors like “Snapp Food”, collecting ideas and analyzing and examining them, I chose a mental model and started designing wireframes and prototypes.
These are basic wireframes. Wireframes underwent many changes during the implementation phase.
After study the competitors like “Snapp Food”, collecting ideas and analyzing and examining them, I chose a mental model and started designing wireframes and prototypes.
These are basic wireframes. Wireframes underwent many changes during the implementation phase.
Competitive Audits
Competitive Audits
1- First Competitive Audits:
In my opinion, one of the best ways to order quickly is to use a widget, so I decided to design 3 Widget types to shorten and simplify the order process:
1- First Competitive Audits:
In my opinion, one of the best ways to order quickly is to use a widget, so I decided to design 3 Widget types to shorten and simplify the order process:
When you click on these widgets, the shopping cart page for that order will be opened directly:
When you click on these widgets, the shopping cart page for that order will be opened directly:
These widgets show favorite items:
As you can see, the user can combine several favorite items together in the form of an order.
For example: a single espresso + 2 chocolate cookies + 1 small mineral water.
These widgets show favorite items:
As you can see, the user can combine several favorite items together in the form of an order.
For example: a single espresso + 2 chocolate cookies + 1 small mineral water.
These widgets show a regular order:
this type of widget is suitable for employees who often have a repetitive and specific order. For example, a series of employees often order Turkish coffee every morning, a series of them order tea, and … .
Therefore, they can specify their usual order once and for all and every time with just a few simple clicks through the phone screen, they can place their order as quickly as possible.
These widgets show a regular order:
This type of widget is suitable for employees who often have a repetitive and specific order. For example, a series of employees often order Turkish coffee every morning, a series of them order tea, and … .
Therefore, they can specify their usual order once and for all and every time with just a few simple clicks through the phone screen, they can place their order as quickly as possible.
2- Second Competitive Advantage:
Another positive thing I did to shorten the order process was to add this option in the wallet charging section.
By activating this option when charging the wallet, one step of order process is actually removed, and if there is enough charge in the wallet, the order fee is automatically paid from the wallet and it will not ask you to choose a way to pay.
2- Second Competitive Advantage:
Another positive thing I did to shorten the order process was to add this option in the wallet charging section.
By activating this option when charging the wallet, one step of order process is actually removed, and if there is enough charge in the wallet, the order fee is automatically paid from the wallet and it will not ask you to choose a way to pay.
Test
Test
Test
Usability Test
After designing the initial prototype, I provided a link of the prototype to 4 users and asked them to follow this scenario. I also carefully observed the actions and the path that users follow in this scenario.
Usability Test
After designing the initial prototype, I provided a link of the prototype to 4 users and asked them to follow this scenario. I also carefully observed the actions and the path that users follow in this scenario.
Add the search section in the menu. Because I noticed that some users prefer to search for the item they want quickly.
Add the search section in the menu. Because I noticed that some users prefer to search for the item they want quickly.
By doing the test, I found that most users cannot find the menu quickly when opening the application and it takes some time to find it. That's why I added this section in home page so users can quickly find the menu. It shows as an animated illustration.
By doing the test, I found that most users cannot find the menu quickly when opening the application and it takes some time to find it. That's why I added this section in home page so users can quickly find the menu. It shows as an animated illustration.
I also inserted a "Widget Adding Tutorial" link for users who don't know,
I also inserted a "Widget Adding Tutorial" link for users who don't know,
Features that I want to add to this app in the future:
1- Card sorting to choose the appropriate and correct category for the menu items. It ‘s the most important thing I have to do and that was obtained from the results of the usability test.
2- Ability to prioritize favorite items.
3- The possibility of placing an order by voice.
...
Features that I want to add to this app in the future:
1- Card sorting to choose the appropriate and correct category for the menu items. It ‘s the most important thing I have to do and that was obtained from the results of the usability test.
2- Ability to prioritize favorite items.
3- The possibility of placing an order by voice.
...
