Maple Cafe:
Mobile Ordering App
UI/UX Design | Visual Design
Role: UI/UX Designer
Duration: 1 month
Softwares: Figma, Photoshop, Illustrator
Platform: iOS
Background
Maple Cafe, a local coffee shop, founded by a group of young individuals. It serves everyone’s needs, from grabbing a bite to daily morning coffee. It can also be a cozy place for people to complete their assignments or projects.
Problems & Solutions
Long Queue > Saving time
For customers who just pass by and would like to take a quick order, it can be painful for them if there is a long line in front of the cashier. The long waiting time might lower the interest of the customers and reduce the income for the cafe. In order to solve the problem, the Maple Cafe app allows customers to make their orders directly via the ordering system instead of lining up for minutes to reach the cashier. It can also prevent misunderstanding between customers and staff
Covid-19 > Contactless experience
Under the pandemic circumstance, people tend to avoid direct contact with one another. With the app, it provides another option for the customers if they would like to minimize their time in the cafe. Customers can therefore decrease the risk of being infected and at the same time be able to enjoy their favorite coffee.
Theft > Protection of belongings
For customers who spend hours of their time in the cafe, leaving their tables while taking orders might cause their belongings being stolen. Ordering with the app allows customers to be in the proximity of their belongings and keeping them secure.
Target Audience
The target audience of this app is pretty wide which includes most of the people using smart phone while we are focusing on the people who work or study in the neighborhood. They can use our service whenever they pass by such as before and after work and school time.
Persona 1
Dharmadhrt Ramila
Age: 32
Education: Master Degree
City: Mountain View, CA
Family: Wife and 2 sons
Occupation: Marketing Manager
Dharmadhrt is a 32 year-old father with 2 sons. He is working as a marketing manager in a trading company, which makes him talking to different people including teammates, other managers and clients every day. He feels exhausted everyday after work and he like grabbing a cup of coffee sometimes to relax.
"I talk too much at work and just want to enjoy a cup of coffee quietly after work."
Frustration
1) "I already talk to too many people at work everyday, it will be helpful if I can just sit down in a cafe and order with my phone."
2) "I know I have an Indian accent and sometimes it is hard to understand what I am saying, but I hope people don't misspell my name all the time."
2) "I know I have an Indian accent and sometimes it is hard to understand what I am saying, but I hope people don't misspell my name all the time."
Goal
1) Order foods and drinks without speaking to people.
2) Able to clearly type the name so the staffs in the cafe have no excuse to spell the name wrong.
Persona 2
Thomas Ma
Age: 19
Education: Undergraduate Bachelor's Degree
City: San Francisco, CA
Family: Mom & Dad
Occupation: Student
Thomas is a 19 year-old university student in San Jose State University. His family lives in San Francisco, but he moved to San Jose by himself since his first semester in SJSU. He rented a small room there to save money; therefore, he prefers studying in the cafe by himself instead.
"I am afraid that my stuff get stolen while I line up to order."
Frustration
1) "My computer was stolen last semester, all my effort is gone."
2) "I want to always keep an eyes on my personal belongings, so no one can steal my stuffs anymore."
Goal
1) Order foods and drinks with his phone when he studies in cafe.
2) Order with the app to avoid leaving his personal belongings such as computer and books on the table when trying to lineup for the cashier.
Storyboard
Scenario: Use the app to order drinks quickly and easily in order to skip the line and keep his eyes on his personal belongings.
Big Picture
1) Thomas is studying in cafe with his books and computer.
2) He wants to order something to drink while there are so many people lining up.
3) If he goes to line-up with them, he can't keep his eyes on his personal belongings.
4) Thomas opens the app and order the drink with his phone, so he doesn't have to line-up and able to keep his eyes on his belongings.
5) The app notifies him when the drink is ready.
6) Thomas is happy because he can pick up immediately and get back in seconds.
Close-up
1) Thomas opens the app.
2) Thomas login from the home screen.
3) Thomas orders the drink he wants from the menu.
4) Placed the order successfully.
5) The order is ready
6) Thomas gets reward points by using the app to order.
Paper Wireframe
From the beginning, the main pages of the app are menu, reward, deal, and cart:
1) Menu, a page for users to select drink(s);
2) Reward, a page shows the reward points users have and the redeem history;
3) Deal, several deals will be provided to users frequently;
4) Cart, a page shows how many items user adds to the cart;
5) Profile in the top right corner, which allows users to arrange their account and personal setting.
Low Fidelity Mock Up
As I develop deeper, I change the page arrangement a little bit, first, I rearrange the tab bar. I exchange the position of profile and cart in order to make them more accessible. Next, reward page is removed from the tab bar because profile actually has the same function. It doesn't have to be in the tab bar, but stay in the profile. In short, after all these arrangement, I was able to keep the options in the tab bar in 4 instead of 5 to make it cleaner.
Information Architecture
Flow 1: Ordering
Flow 2: Redeeming
Impact
The app makes users feel like Maple Cafe cares about their needs and provide what they want.
One quote from user:
“The app is user friendly and let me to complete the order without stress! I would definitely use this app to order and earn more reward points.”
“The app is user friendly and let me to complete the order without stress! I would definitely use this app to order and earn more reward points.”
What I learned
While designing the Maple Cafe app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
What is Next?
1) Conduct another round of usability studies with more tasks to know more about the possible pain points of Maple Cafe app.
2) Conduct more user research to explore more users’ needs in the market.
3) Keep refining the layout in order to make it cleaner and increase accessibility.
Thank You!
Thank you for reading this case study! If you have any feedback or want to chat with me, drop me a message at shinn303030@gmail.com or connect me on LinkedIn!
