Drip House Cafe App
The Drip House app integrates at-a-glance loyalty rewards with remote ordering. By making it easy to order from a cafe table while using rewards, this app provides flexibility to customers and improves accessibility for non-native English speakers.
The Challenge
Users want to easily use money-saving tools, like rewards and coupons, and save their seats while ordering.
The Goal
This project aims to provide a convenient way for users to place cafe orders from their tables, while using loyalty rewards.
Role
UX Designer and Researcher
Sponsor
Google UX Design Certificate
Project Duration
February - July 2023
Tools Used
Figma, FigJam, Procreate
Design Process
The design process begins with understanding the users and defining the problem to be solved. With a clear picture and goals, the designer ideates potential solutions with Crazy 8s and similar exercises. These ideas are refined and turned into paper wireframes and low-fidelity digital wireframes in Figma. Finally, once enough wireframes are completed, a digital prototype is created and tested with users. The feedback from the usability testing is analyzed to form insights that drive the next iteration. This process is repeated through multiple iterations.
User Research
User research included interviews and user profiles based on diverse backgrounds and needs. The answers gained from these interviews were used to create personas and user journey maps. Notably, the learnings from the user research changed the team’s assumptions about what users value about cafe loyalty apps. The team initially assumed that users care only about money-saving tools, like rewards and coupons. However, the research showed that users care just as much about the ease of ordering and the experience of finding space inside a cafe.
Simultaneously with user research, the team completed a competitive analysis of a mix of direct and indirect, national and regional coffee chains.
User Journey
The goals and pain points expressed in the two user personas informed the creation of a user journey map and user flow for the cafe app.
User Journey Map
User Flow
Paper Wireframes
Initial paper wireframes were drawn for each screen. Then, red asterisks were placed next to several promising elements. The highlighted elements were collected and integrated into refined paper wireframes.
Prototypes and Usability Studies
Low-fidelity digital wireframes were created based on the refined paper wireframes. After usability testing, these were refined into high-fidelity wireframes.
In all prototypes, users begin by opening the app and navigating to the Order screen. They then tap a dedicated button to scan the QR code on their table and start an order. Afterward, they use the following menu screens to search for and customize items, add to cart, and check out.
Round 1: Low-fidelity Usability Study
The initial usability test aimed to test the early user flow and wireframe design. The methodology used was moderated and in-person, conducted with a laptop PC and audio and screen recording.
This study led to the following findings:
Users need a clear status indication for coupons at checkout.
Users want to be able to start an order by browsing the menu.
Users want more explanation to order via scanning QR code at table.
Round 2: High-fidelity Usability Study
The final usability test intended to test the refined user flow and visual design. It was an unmoderated, remote usability study using audio and screen recording.
This study led to the following findings:
Users want menu navigation to be as simple as possible.
Users want strong color variety to emphasize interactive elements.
Users like to manually activate coupons at checkout.
Visual Design
Style Guide
Lora, a serif typeface, provides an elegant, print-inspired feel to headlines. Nunito Sans, chosen for body text, complements Lora with a sans serif typeface that is easy to read in smaller font sizes.
Primary and secondary colors were inspired by orange sunrises, dark brown coffee beans, and rust-hued bricks. The overall brand evokes refined tastes in industrial, but comfortable, spaces.
Components
Accessibility
Icons and Images
Icons or images accompany labels and buttons. This helps users quickly find menu items and CTAs, regardless of language.
Color Contrast
WCAG color contrast guidelines are applied to all text and background content. This supports accessibility for all users.
Left-aligned Text
Text is left aligned, rather than centered, to support scanning for all users and general readability for dyslexic users.
High-fidelity Designs
The cumulative refinements from all usability tests resulted in a final high-fidelity prototype. This prototype allows users to complete all core tasks intuitively.
Quick Access to Rewards
The user’s loyalty rewards card is prominently displayed for glanceable reference.
Coupons are displayed in a simple list and can be tapped to show a scannable QR code. This will allow users to easily use coupons when ordering in person.
Easy-to-activate Coupons
When ordering through to app, users can easily activate and deactivate coupons from the checkout screen. This allows customers to conveniently keep track of their coupons and see the impact of their savings in real time.
Convenient Ordering from Any Table
Users can scan a QR code on any table to start an order in the app.
All coupons and rewards are automatically available. Whether impacted from situational or permanent communication disabilities, or seeking convenience, all users can order in an easy and accessible manner.
Moving Forward
Takeaways
Impact
This project resulted in a design that is intuitive and visually pleasing to users. Key to this design are convenient user flows to customize a drink and apply a coupon to an order.
"I really like the app. I think it's straightforward and easy to use. I think the colors are very easy on the eyes." - Research participant
What I Learned
Gathering user data to inform early designs.
Iterating on designs based on user feedback.
Integrating feedback from design critiques.
Crafting high-fidelity visual designs in Figma.
Creating visual design style guides and design systems.
Next Steps
AB Study
Conduct an AB study to determine of users prefer the coupon to be active or inactive by default.
Usability Study
Conduct further research to learn if users find the simplified menu navigation intuitive and if the navigation should be further simplified.
Design and Test
Design and test a user flow that includes the ability to edit an item in the cart or from the checkout screen.
See More
Google UX Design Certificate
Fulbright Korea
