8 minute read
Brwly
A coffee pickup app designed to make your morning runs faster and easier
ROLE
UX + UI Design, Branding, Visual Design, User Flow, Research + Prototyping
TOOLS
Figma, Fig Jam, Zoom
TIMEFRAME
1 week
FOCUS AREA
Accessibility, Interaction Design, UX Strategy, Visual Systems
DELIVERABLES
User Research Findings, Personas and User Journey Maps, Task Flows, High- Fidelity UI Designs, Prototypes, Usability Testing Report
​72% of South African coffee lovers say waiting in line feels longer than their entire commute.
About
While working in the CBD, I spent many mornings rushing to grab a cup of coffee before work, only to find long queues, delayed service, and payment issues during peak hours. What started as a personal frustration quickly revealed a broader pattern among city professionals:
“We love our coffee, but we hate the wait.”
​
For busy commuters and professionals, time lost in line adds stress to their mornings. For cafés, long queues create operational bottlenecks and lost sales opportunities.
Meet your new Coffee Spot
Brwly (pronounced Brewly) is a concept mobile app designed to streamline how users order and pick up their daily coffee.
It focuses on speed, accessibility, and brand warmth, creating a frictionless experience for busy professionals who value both time and taste.
The app allows users to pre-order coffee for pickup, and access loyalty rewards, all within a clean, modern interface optimized for on-the-go use.
The Challenge
Research & Insights
The Solution
How might we design a seamless coffee-ordering experience that reduces waiting time, simplifies the morning rush, and supports cafés in handling peak-hour demand more efficiently?
Through competitor analysis (like Starbucks and Mugg & Bean apps) and user interviews with local coffee-goers, a few key themes emerged:
-
Users want speed and predictability, long queues kill convenience.
-
Many prefer pickup over delivery for control and reliability.
-
Accessibility features are often missing or poorly integrated.
-
Brand tone matters, people love coffee experiences that feel personal and cozy, not corporate.
Brwly creates a refined and accessible ordering journey, offering
-
Simple Pickup Flow - Browse, order, and pay within three taps.
-
Read Aloud Mode - Optional global voice feature for hands-free or accessible use.
-
Smart Reorder - Recommends your usual order at your regular time.
-
Minimal, Calm Interface - Neutral tones, rounded UI elements, and micro-interactions that create a warm brand presence.
My Design Process
Usability Testing
GOAL
​
To understand how users order and pick up their coffee, what frustrates them, and how Brwly can simplify that experience.
PARTICIPANTS
5 participants:
-
Age range: 22-40
-
Mix of busy professionals, students, and freelancers
-
All drink coffee daily and have used at least one coffee-ordering app before
METHOD
-
Conducted semi-structured interviews (15–20 minutes each)
-
Sessions done remotely via Google Meet
-
Questions focused on:
-
How do you usually order coffee?
-
What frustrates you most about coffee apps or in-store pickups?
-
How important is speed vs. personalization?
-
Would you use features like “voice read-aloud” or “pre-saved favorites”?
-
TAKEAWAY
Long Wait Times: Users frustrated by long queues during morning rush
Order Convenience: Users want an easy pre-order & pickup option
Customization: Users value personalization (milk, size, flavour)
Rewards & Discounts: Users motivated by loyalty perks or discounts
Key User Insights: Understanding Morning Coffee Habits
AFFINITY MAP
Affinity mapping helped uncover user priorities around speed, simplicity, and accessibility, shaping Brwly’s design strategy.
User Personas
With the insights gathered from interviews, I developed personas to represent the primary user groups. These personas helped in understanding the unique qualities, behaviours and preferences of Brwly's customers.
HOW MIGHT WE
After analyzing Daniel and Mia’s needs and insights from the user interviews, several opportunities for improvement emerged.
-
How might we help busy users like Daniel and Mia's order their coffee faster and more conveniently?
-
How might we create a seamless pickup experience that minimizes waiting time and confusion?
-
How might we personalize the ordering journey so users can easily reorder their favorites with one tap?
-
How might we make the Brwly app accessible to all users through thoughtful design features, such as a voice-enabled option?
-
How might we encourage sustainability and brand loyalty through digital engagement and rewards?
Ideate
Ideate
After analyzing the research and affinity map, it was clear that users needed a faster, more predictable way to get their daily coffee. Long queues, unclear wait times, and disorganized pickup systems were consistent frustrations among busy professionals.
​
During the ideation phase, I explored multiple solutions through sketching and mind mapping. The focus was on creating a user flow that felt effortless, one that made ordering coffee as natural as checking the time in the morning.
​
Key ideas explored:
-
Pre-order & pay ahead: Allow users to order and pay before arriving, minimizing wait time.
-
Quick reorder feature: One-tap access to favorite drinks or past orders.
-
Order tracking: Real-time progress updates so users know exactly when to pick up.
-
Pickup notifications: Push alerts when the order is ready.
-
Voice or read-aloud accessibility option: Helping users navigate the menu hands-free.
-
Simple café discovery: Filter and save nearby cafés with high ratings or promotions.
Brand Guideline
For Brwly’s visual direction, I focused on evoking warmth, focus, and movement, the feeling of stepping into your favorite café where everything just flows. Influenced by modern lifestyle brands and contemporary app interfaces, Brwly’s design merges approachability with purpose, guiding users smoothly through their morning coffee ritual.
Primary Logo
Logo Mark
#513621
dark brown
#A86A3B
canyon stone
#4BA3F2
lynx screen blue
#C4A87A
tan
#513621
white
#FFFFFF
#E9EDF3
bright gray
Colour Palette
#513621
Headings
Body Copy
User Flow
Before diving into the design, I mapped out the user flow, focusing on simplifying the purchase process. Given that busy mothers are the primary users, I prioritized reducing the number of steps required to complete a purchase.
​
Brwly User Flow
Prototype
After finalizing the key ideas, I translated them into a clean, high-fidelity mobile prototype that embodies Brwly’s mission, smarter, simpler, and faster coffee experiences.
The design focused on three main goals:
-
Efficiency: Allow users like Mia and Daniel to order their favorite drink in seconds through the Quick Reorder feature.
-
Accessibility: Include a voice-enabled option for hands-free navigation and an intuitive visual layout for effortless usability.
-
Clarity: Maintain a minimal, modern interface with strong contrast, warm tones, and smooth micro-interactions that guide users naturally through the process.
The final prototype included:
-
A home screen showing nearby stores and quick-access options.
-
A customized menu with reorder and voice-read features.
-
A pickup tracker with real-time progress updates.
-
A reward dashboard encouraging loyalty and sustainable habits.
This prototype was tested among a small group of users, and their feedback informed subtle refinements to layout spacing, icon clarity, and voice command responsiveness.
Sketches
Homepage and Hot Coffee pages
Revised homepage
Low Fidelity Wireframes
Homepage
Hot coffee menu
Cart
Feature Highlights
Personalized header
Remembers previous/ items ordered the most
Read aloud option
Promo code section, currently Promo codes are available via email only
High Fidelity Wireframes
Login
Hot coffee menu
Cart
Homepage
Order Confirmation
Usability Testing
To evaluate the effectiveness of the redesigned Brwly experience, I conducted remote usability testing with five participants who matched the target audience, coffee enthusiasts aged 22–35 who enjoy local cafés and are open to digital ordering experiences.
​
The goal was to observe how users navigated the app’s core functions and identify areas that could cause friction in their ordering journey.
Objectives
​​
-
Assess the clarity and appeal of the new onboarding and home screens.
-
Determine how easily users could discover and customize their first coffee order.
-
Evaluate whether Brwly’s personality (friendly, youthful, and artisan-inspired) came through in the interface.
Scenario
“You’re on your morning commute and want to order a cappuccino for pickup at your favorite local café using Brwly. Try to find your café, customize your drink, and place your order.”
Sessions were conducted remotely using Figma prototypes and Zoom screen sharing. Observations were documented in a task analysis matrix to measure completion rates, hesitation points, and emotional tone.
100%
Task Completion
Success on Mobile
Improvement:
+40%
1m10s
Average Task Time
Improvement:
58% Less Time
4.8/5
Reported Ease of Use
Improvement:
+1.6
Common feedback:
​
-
“It feels calm and inviting, not like those busy coffee apps.”
-
“The icons make it easy to know what I’m doing next.”
-
“I like how the colors match the vibe of a local coffee shop, not a big chain.”
4.7/5
User Delight Score
Improvement:
+0.8
Insights
-
Clear hierarchy improves trust – Users felt reassured by minimalist layouts and consistent typography.
-
Visual micro-interactions build momentum – Button hovers and subtle transitions made the experience feel smoother and more polished.
-
Personalization equals retention – Users wanted to save their favorite order or café for faster reordering, which became a future iteration opportunity.
Outcome
The usability tests validated the design decisions: the Brwly interface successfully reduced friction, increased delight, and improved discoverability of key actions.
The findings were summarized and used to refine microinteractions, label clarity, and personalization flows in the final prototype.
Conclusion
Designing Brwly was an opportunity to rethink one of the simplest yet most essential parts of many people’s day, grabbing coffee. Through research, user insights, and iterative design, the project transformed a common frustration, long morning queues, into a smooth, time-saving experience.
If I were to work toward launching this product, my next design priorities would be:
​
-
Conducting usability testing to validate the ordering flow and pickup process.
-
Refining accessibility features, including voice navigation and high-contrast modes.
-
Expanding customization options for drink preferences and loyalty rewards.
-
Collaborating with developers to optimize real-time order tracking and notifications
Getting Unstuck
Creating Brwly felt much smoother this time around, the extensive research I’d done earlier gave me a solid foundation to build from. Even so, there were moments where I hit creative walls or second-guessed design choices. Whenever that happened, I’d go back to my early notes and sketches. Looking at where my ideas started always helped me reconnect with the user’s needs and move forward with clarity.