UX Research, UX/UI Design, UX Writing
Coffee House: A UX Retrospective on Growth
A critical breakdown of my career-entry project, highlighting lessons learned in service design, technical errors, and what I would do differently with the expertise I have today.
1. Project Overview
The CoffeeHouse mobile app was my first deep dive into the UX world, developed as part of the Google UX Design Professional Certificate. This project represents a significant milestone in my career — it was the moment I transitioned from my previous career as a Dietician to UX Design, fueled by a corporate upskilling initiative.
-
Project Type: Google UX Design Professional Certificate
-
Role: UX Designer & Researcher
2. The Challenge
The initial brief focused on a common friction point in urban coffee shops: the trade-off between ordering and workspace security. Remote workers and busy professionals often find themselves in a "catch-22", leaving their seat to order means losing their workspace, but staying means they can't get their coffee.
3. My Critical Perspective
Looking back at this project with +3 years of experience, I now see it through a more strategic lens. While the original goal was to create a functional ordering tool, I now recognize that the true challenge lies in Service Design.
-
"Wait Time" Anxiety: It’s not just about ordering; it's about the psychological comfort of knowing exactly when to stand up to grab the coffee.
-
Business Logic & Viability: Reflecting on this project today, I find myself questioning a fundamental product decision: Does every problem require a native app?
In a business as broad and accessible as a coffee shop, creating a niche app for a very specific function might not be the most viable solution.
From a UX standpoint, asking a casual customer to download, install, and create an account just to order a coffee creates a massive "barrier to entry." Today, I would explore Frictionless UX solutions, such as App Clips (iOS), Instant Apps (Android), or QR-code-based PWAs (Progressive Web Apps) that allow for instant ordering without the commitment of a full download.
-
Win-Win Strategy: A true UX-driven solution creates a Service Blueprint where the digital and physical worlds meet. By predicting "time to prep" and offering a "ready to grab" notification via SMS or Web-push, we optimize the flow for both the barista (less crowding) and the customer (more workspace time).
4. Research & Discovery
To kick off my first UX project, I conducted a Quantitative Survey and a Competitive Benchmarking. While the initial goal was to follow the Google Certificate framework, my current analysis reveals deeper opportunities for service optimization.
"Wait Time" Barrier:
-
Insight: Traditional ordering processes create a bottleneck that discourages frequent visits, especially for users on a tight schedule.
-
User Evidence: Based on the survey data, a significant portion of users cited "long queues" and "unpredictable wait times" as their primary reasons for choosing one coffee shop over another.
-
Design Opportunity (Nowadays): Beyond a simple "order" button, I would now implement a Real-Time Prep Tracker. This provides psychological comfort by managing expectations and allowing users to time their arrival perfectly.
Personalization & Retention
-
Insight: Coffee is a highly personal ritual. Users feel more loyal to brands that remember their specific preferences (milk types, sweeteners, etc.).
-
User Evidence: The research showed that "customization" was a top-tier priority. Users wanted an intuitive way to replicate their complex "in-person" orders digitally without friction.
-
Design Opportunity (Nowadays): I would apply Content Strategy to create a "Quick-Reorder" feature and an intuitive customization matrix, ensuring that a "Double-shot Oat Milk Latte" is only two taps away.
Competitive Benchmarking
-
Insight: Existing local coffee apps often focus on loyalty cards but fail in the end-to-end ordering experience.
-
User Evidence: My audit of local competitors revealed a gap in Order Transparency. Most apps allowed you to pay but didn't tell you where to pick up or when it was ready.
-
Design Opportunity (Nowadays): Leveraging Jakob’s Law, I would align the UI with familiar food-delivery patterns while improving the Service Design—using clear, automated notifications to bridge the gap between the digital order and the physical pickup.
Take a look at the full research findings in the slides below. Click on the image to expand and view in detail
5. Personas
During the initial phase of the Google UX Design Certificate, I developed two primary personas to represent the core user base. Today, I revisit these archetypes not just as "profiles," but as frameworks for understanding contextual behavior and emotional friction.
6. User Flows & Storyboarding
With the personas defined, I mapped out the logical path a user would take to complete a task and created storyboards to visualize the emotional and contextual environment of the "ordering ritual."
User Flow:
My primary goal was to create a path that minimized the number of steps from opening the app to completing the payment.
-
Path: I designed a linear flow: Search → Customize → Cart → Pay.
-
* The "Now" Critical Reflection: Looking back, I recognize that a coffee order is rarely just linear. Today, I would implement "Shortcut Paths" for returning users (e.g., a "Reorder Last" button on the home screen). I would also focus on Error Prevention UX, ensuring that if a user selects a closed location, they are alerted before they start customizing their drink, not at the final checkout.
Storyboarding
I developed both Big Picture and Close-up Storyboards to explore the user’s experience beyond the screen.
7. Sketches
I began the design phase by translating my storyboarded solutions into Paper Wireframes. This allowed me to iterate rapidly on layout options without the constraints of software, focusing purely on Information Architecture and the core user journey.
8. Interation & Refinement
Using Figma, moving to Digital Wireframes (Low-Fidelity), I refined the hierarchy and established a consistent grid system.
-
Perspective: I followed the standard Google template, focusing on basic button placement and navigation.
-
Retrospective: Looking at these wireframes today, I realize I could have optimized the Visual Affordance. If I were designing them now, I would prioritize a more robust Design System approach from the start, ensuring that spacing and "Touch Targets" are optimized for one-handed mobile use, a critical factor for a user who might be carrying a laptop or a bag while checking their order.
9. Validation & Usability Testing
To validate the initial design, I conducted two rounds of Moderated Usability Studies. I wanted to observe how users interacted with the low-fidelity prototype and identify any "friction points" that hindered a seamless ordering experience.
Key Research Findings
-
Navigation & Clarity: Users initially struggled to find the "Checkout" button and felt the customization terminology was not intuitive enough.
-
"Group Order" Confusion: My initial hypothesis was to create a "Social Coffee Network"—a profile-based system where teams could sync orders. However, testing showed this caused significant cognitive load. Users found it over-complicated just to buy coffee.
Critical Reflection: Pivoting for Simplicity
Looking back at these sessions with two years of experience, I would evolve both my methodology and my solution:
-
Feature Over-Engineering: I now realize that the "Social Network" approach was a classic case of "reinventing the wheel." If I were solving the group order problem today, I would pivot to a Frictionless Utility approach:
- Shared Cart via Link: Allowing team members to add items to a master cart without the need for account creation or profiles.
- Direct Utilities: Implementing a simple "Split the Bill" feature or a "Note to Barista" box to identify who is collecting the order.
-
Metrics-Driven Validation: Today, I would track Success Rates and Drop-off Points during the group order flow to objectively prove that a simpler utility-based solution performs better than a complex social one.
10. High-Fidelity Prototype
Visual Language & Branding
-
Color Palette: I moved away from traditional "coffee browns" to a more vibrant and contemporary palette. I chose a Teal and Orange combination to create a high-energy, modern feel that stands out from competitors, balanced with soft neutral tones for the background.
-
Typography: I implemented a bold, rounded sans-serif for headlines to convey a friendly and approachable tone, paired with a clean, functional typeface for body text to ensure legibility in menus and price lists.
Accessibility & UI Reflection
Looking back with a seasoned eye, I can identify critical areas where the Visual Design could be improved to meet professional WCAG 2.1 standards:
-
Color Contrast & Compliance: A critical analysis of the current palette reveals that the contrast ratio between the white text and the orange buttons (e.g., the "Get Started" button and the "+" icons) falls short of the WCAG AA requirement. This could hinder the experience for users with low vision or when used in high-glare environments.
-
Affordance & Interactive Elements: Today, I would refine the Visual Affordance by increasing the contrast levels or adding secondary cues (like borders or distinct shadows) to interactive elements. This would ensure that "Call to Action" buttons are not only aesthetically pleasing but also fully accessible.
-
Inclusive UI Strategy: If I were iterating on this project now, I would prioritize Inclusive Design from the start, testing the palette through color-blindness simulators and ensuring that the brand identity never compromises the functional accessibility of the ordering process.
Final Prototype
The resulting high-fidelity screens represent a balance between a cozy brand identity and a highly functional mobile utility. I focused on making the Order Tracking screen the star of the show, providing the user with the "peace of mind" they need to remain focused on their work or commute while their coffee is being prepared.
Take a look at my very first high-fi wireframes below. Click on the image to expand and view in detail
From wireframes to a fully interactive solution. Experience the final flow below.
Best viewed on desktop. Link opens a new tab
Final Reflections & Strategic Learnings
The Time 2 Coffee project holds a special place in my portfolio as it marks the official beginning of my journey into UX Design. Developed during the Google UX Design Professional Certificate, it was the catalyst for my career pivot, a transition supported by my current company as an upskilling initiative.
Key Learnings & Growth
Revisiting this project 4 years later provides a clear benchmark of how much my design thinking has matured. While the original project succeeded in establishing a functional mobile ordering flow, it also highlighted the importance of continuous iteration.
-
Active listening: This project taught me the value of the design process, from messy paper sketches to high-fidelity prototypes. I learned that a designer's first idea is rarely the best one, and that user feedback is the most powerful tool for refinement.
-
The importance of accessibility: My self-critique regarding the color contrast and WCAG compliance is a testament to my growth. I now understand that Inclusive Design isn't a "nice-to-have" feature, it is a fundamental requirement of professional UX work.
-
Simplifying complexity: The lesson learned from the "Social Network" group order feature remains one of my most valuable insights: always strive for the simplest, most frictionless solution to a user's problem.
Final Thought
This case study is more than just an app design; it is a record of my professional evolution. It represents the bridge between my past experience and my current role as a UX Designer. Today, I don't just see pixels and colors; I see service logic, accessibility standards, and a deep commitment to solving real-world human problems through design.