Downtown Drip Cafe App
“Sip, Savor, and Stay Awhile”
An easy way to Make orders and Reservation at Downtown Drip
PROJECT OVERVIEW
PRODUCT
Downtown Drip is one of the most aesthetic cafes in Chicago Downtown. They strives to deliver healthy food, snacks, drinks and Coffee. Prices are ranging in different according to types of food. Downtown Drip’s target customers are office staffs, students and people who love to work in a quiet and pretty cafe’ or restaurant.
PROBLEM
Busy workers and students lack of time to go to restaurant and make appointment or reservation. Even when they are at a restaurant, they have to wait for a waiter to see the menu book and have to think the most suitable menus for the occasion they are making.
GOAL
Design an app for Downtown Drip that allows users to facilitate the process of previewing menus, food ordering and making reservation, and make it feasible in the easiest way possible while maintaining adequate social distances.
Design Process
Project Duration : 4 weeks
My Role : UX Designer
Responsibility : UX Research, Wireframing, Prototyping, Usability Testing, Visual Design
Tools Used: Figma, Illustrator, FigJam
2. UNDERSTANDING THE USER
EMPATHIZE
USER RESEARCH SUMMARY
I conducted interviews and created empathy maps to understand the users that I’m designing for and their needs. A primary user group identified through the research was the working adults they don’t want to waste time by waiting for the waiter to make orders.
This user group confirmed initial assumptions about Downtown Drip’s customers, but research also revealed that time was not the only factor limiting users from ordering food at the restaurant. Other user problems included that they don’t like to pay with cash as they have to carry a purse and make contact with waiter or cashier. Since Covid-19 become global pandemic, users want to pay with digital wallet and banking systems while maintaining social distances guidelines.
USER PAIN POINTS
1.TIME
Users are impatience with waiting for a waiter just to view a menu book and make orders.
2. PAYMENT
Users are inconvenience to carry a purse and make a contact with waiter because of Covid-19 spread.
3. PROCESSING
Uncategorised menu set in apps are often difficult to order from and to make decision.
DEFINE
USER PERSONA
USER JOURNEY MAP
3. STARTING THE DESIGN
IDEATE
USER FLOW
Using the structure of user flow, I drew out sketches of the app’s main features first on paper. For best approval, I drew 5 sketches for each screen and highlight the parts from from these sketches that is going to apply in digital wireframes.
LO-FI WIREFRAMING
DESIGN
Using the structure of user flow, I drew out sketches of the app’s main features first on paper. For best approval, I drew 5 sketches for each screen and highlight the parts from from these sketches that is going to apply in digital wireframes.
HIGH-FI WIREFRAMING
USABILITY STUDY
TEST
AFFINITY MAP
NOTES
USABILITY STUDY PARAMETERS
Study Type: Moderated Usability Study
Location: Chicago
Participants: 5
Time: 30 min
USABILITY STUDY FINDINGS
Clarity: People can’t find how many items was added to cart. People didn’t notice how’s the payment method changed.
Efficiency: People want a reservation form which include all information needed for reservation in a single page instead of a separate seating plan and a separate information form.
Convenience: People don’t like to give a rating by a force. People think E-mail is not a good option to ask for reservation in Chicago.
4. REFINING THE DESIGN
DESIGN
There were a few actionable insights I came up with from the usability studies. One of these was making a reservation form which suggests popular seat types in a shop instead of a seating plan to help users from making a hard decision about choosing a seat.
BEFORE USABILITY STUDY
AFTER USABILITY STUDY
The early design shows unclear display about the current payment method that user is going to use,
but after the usability study, I added the active bar and state more distinct to current payment method selection. This gives users the ability to notice which payment method they are going to use.
BEFORE USABILITY STUDY
AFTER USABILITY STUDY
OUTCOME
The app makes users feel like they are meeting with a real person/waiter from People Person and the app really thinks about how to meet their needs.
WHAT I HAVE LEARNED
While designing the Downtown Drip’s app, I learned that the beginning steps for the app are the true foundation of all the processes that was going through. Starting from personas, usability studies and peer feedbacks influenced each iteration of the app’s designs.