Coffee House
Streamlined Coffee Ordering App
Coffee House is a mobile application redesign aimed at streamlining the coffee ordering and payment process for busy users. The goal was to create an app that allows pre-ordering, deep menu customization, and fast payment to save user time — while also addressing promotion visibility and store discovery.
How I approached it
Conducted surveys, interviews, and competitor analysis with café users. Initial hypothesis: users primarily valued speed and ease of use. However, research revealed they also highly value customization options and access to exclusive promotions. This insight shifted design priorities to balance efficiency with personalization and special offers.
Created persona Alejandro — a busy professional who values quality, convenience, and efficiency in his café experience. Goal: 'Find quality coffee and food options quickly while commuting.' Built a User Journey Map identifying 3 key scenarios: enjoying a café experience, finding healthy food options near the office, and making efficient orders while commuting. Key improvement opportunities: loyalty programs, healthy menu options, rapid pickup, and advance ordering.
Sketched rapid lo-fi paper wireframes exploring multiple layout approaches for the ordering flow, product customization screen, and promotions placement. Tested minimum 5 wireframe variants for the core ordering screen to validate information hierarchy before moving to digital wireframes.
✏️ Paper sketches
🖥️ Digital wireframes
Designed the complete ordering flow in Figma: home screen with featured promotions and quick re-order, product detail with contextual customization (milk, size, syrup), cart review, and order confirmation. Applied a warm, premium coffee brand aesthetic with strong CTA hierarchy and clear visual indicators for customization options and order status.
Conducted usability studies with real users. Key finding 1: Users wanted clearer indication of promotion eligibility — added a prominent banner and eligibility tags. Key finding 2: The customization screen overwhelmed first-time users — simplified to progressive disclosure, showing basic options first. Final prototype validated improved task completion and user confidence scores.
Research revealed 4 critical pain points: (1) Limited customization options frustrated users who wanted to modify orders, often leading to errors. (2) Promotions and offers were not clearly highlighted, causing users to miss discounts. (3) Users found it difficult to locate nearby stores due to poor store-finder UX. (4) Long wait times for in-store ordering negatively impacted the overall customer experience.
Designed an intuitive ordering flow with a 'Quick Re-order' widget for returning customers, a streamlined customization interface that surfaces options contextually, a prominent promotions module on the home screen, and an integrated store-finder with real-time availability.
Simplified the customization flow and reduced decision fatigue, leading to faster transaction times, higher promotion engagement, and a more satisfying end-to-end ordering experience based on usability testing with real users.
