Role
UX/UI Designer
Industry
Food/E-commers
Duration
4 months
Coffee App
Project Overview
Starting Point & Challenge
Personal Problem: Madison coffee enthusiast experiencing fragmented local roaster information (home drip brewing + café exploration hobby)
Key Insight: Coffee has unique dual consumption patterns - finished product (café) + raw product (beans) → connecting both directions could activate local economy
Design Goal: Transform complex roaster-bean-café relationships into intuitive mobile experience
Problem Definition (Competitive Research Results)
Existing Coffee Apps: Lack regional characteristics → unusable in Madison
Bean Shopping Sites: Individual brand websites → no integrated purchasing possible
Core Gap Discovery: No service connecting beans with offline stores
Process & Approach:
Started with personal experience assumption, then validated through competitive analysis
Focused on understanding user behavior through sketching and rapid prototyping
Key UX Process Learning
Discovery & Ideation: From Personal Problem to Design Solution
My Coffee Lifestyle: Home drip brewing equipment + café exploration with unique recipes
Specific Problems Experienced:
Bean Purchase Hassle: Different beans at each local market → must visit multiple places
Online Purchase Limitations: Individual brand sites → cannot buy multiple brands at once
Café-Bean Information Gap: Google Maps shows café locations → but hard to know which beans used
Key Insight Development
Coffee beans enable dual consumption - café experience + home brewing. Connecting this bidirectional flow could benefit both users and local economy.
Sketching Discovery: Hand-drawing revealed List view alone lacked spatial context → developed dual Map + List view interface idea
User Testing: Critical Reality Check (2 participants)
Major Assumption Failures:
Search Function Essential: "I want to search for cafés I know but there's no search function" → Added search bar to map interface
Efficient Purchase Flow: "I want to add multiple beans directly from the list, not visit each detail page"
→ Implemented direct cart addition from product list
Biggest Learning:
I focused on "features" but users wanted "convenience"
Design Evolution Through Process
Wireframing Challenge: Translating sketches to actual screen sizes revealed space constraints + information hierarchy difficulties
Visual Design Strategy: Chose Deep blue + coffee accent (vs. typical brown) for modern differentiation from competitors
Interactive Mockup Shock: Connecting all buttons revealed unexpected details like "where does back button lead?" - countless UX issues invisible in static screens
Final Solution
Three Core Features
Coffee Bean Discovery & Purchase - Unified fragmented purchase experience through integrated platform
Interactive Cafe Map - Location-based exploration + bean-café connection information
Community Review System - Brewing know-how sharing platform
Design System Highlights
Visual Identity: Deep blue + coffee accent (competitor differentiation)
Information Hierarchy: Brand name → Product name(large) → Bean taste → Price
Key Components: Product cards, direct cart addition, search functionality
Cafe Exploration
An interactive map shows nearby cafes with ratings and details.
Community Reviews
Users can read and share experiences about cafes and beans.
Key Learning & Growth
Biggest Mindset Changes
1. "Completely New Creation" → "Contextual Application of Proven Methods" Various case studies taught me to find best solutions for current problems and apply them contextually, rather than forcing completely original designs.
2. Complete Transformation of Sketching Bias
Before: Sketching felt burdensome due to drawing skills
After: Ultimate tool for flexible thinking - hand-drawing revealed problems invisible in digital
Most Challenging Real Tasks
Sketch → Refined Screen Transition: Space constraints and information hierarchy setting proved much harder than expected
Interactive Mockup Complexity: Connecting all buttons and screen movements revealed countless unconsidered details that significantly impact user experience
Academic Project Limitations & Real-World Preparation
Current Characteristics:
User Validation Scale: Core insights from 2-person testing
UX-Centered Approach: Focused on user experience over technical constraints
User Value Priority: Emphasized actual user needs over business model considerations
Real-World Preparation Goals:
Expanded User Research: Diverse user groups, larger sample sizes
Development Team Collaboration: Balance between technical constraints and UX
Business Requirements Integration: Pursue both user value and business value simultaneously
Final Learning: UX design isn't completed at once, but evolves through each stage toward better directions. Following correct processes matters more than perfect final results