Crafting an Efficient Coffee E-Commerce App
I led the design of an MVP app for a coffee shop, streamlining the ordering process and boosting user engagement.
This project delivered a seamless mobile experience, balancing user needs with business goals through rapid prototyping and deep research.
Design System
The Challenge: Simplifying Coffee Ordering
Coffee enthusiasts faced a clunky e-commerce experience—confusing navigation, slow checkouts, and inconsistent visuals. My goal: design an MVP app for Beans & Brew that streamlines ordering, enhances user trust, and drives repeat purchases.
Research: Unpacking Coffee Enthusiast Needs
User-centered research phase for the MVP:
Qualitative Insights: Conducted interviews and card-sorting to define user archetypes.
Quantitative Data: Analyzed Hotjar heatmaps, identifying a cart abandonment rate at checkout.
Personas: Built personas with goals like ‘Fast, reliable ordering.
Journey Mapping: Charted a 10-step ordering flow.
I started with a Feature Map to outline the app’s structure—screens like Sign In, Products List, Product Detail, Cart, Checkout, and Order Confirmation—ensuring all purchasing features were connected logically. Then, I created a User Flow to map the user’s journey, addressing edge cases like product unavailability.
User Flow
Feature Map
For the UI, I wireframed layouts to test usability, then built a design system for consistency. I designed high-fidelity mockups using coffee-themed visuals and a clear hierarchy, and prototyped navigation to ensure intuitive interactions.
Wireframes
Solution: A Seamless Coffee Ordering App.
Tools & Workflow: E-Commerce Efficiency
I used Figjam to land ideas, the experience flow structure, the feature map, the user flow, and Figma for wireframing, mockups, design system, and prototyping.
Impact: Driving E-Commerce Success
The MVP delivered measurable wins:
Reduced checkout time.
Increased user satisfaction.
Improved cart adoption rates by supporting business goals.
