Context.
Coffee shop tasked me with designing a mobile app MVP to enable efficient, user-friendly product ordering. This project, required a Feature Map, User Flow, wireframes, high-fidelity mockups and a design system using Figma.
Problems I Was Trying to Solve: I needed to address challenges like unclear navigation, inconsistent visuals, and potential user friction in ordering coffee and pastries, ensuring the app was simple, scalable, and met acceptance criteria for clarity, usability, and brand alignment.
Research & Discovery.
I began by analyzing the challenge instructions and imagining ‘Beans + Brew’ users—coffee enthusiasts who want quick, customizable orders. I identified key user needs: easy product discovery, seamless customization (size, milk), and clear checkout/confirmation. I also considered business goals, like minimizing cart abandonment and maximizing adoption for the MVP.
How I arrived at the solution?.
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
Design System
Feature Map
For the UI, I wireframed layouts to test usability, then built a design system (text styles, color styles, components) for consistency. I designed high-fidelity mockups using coffee-themed visuals and a clear hierarchy, and prototyped navigation to ensure intuitive interactions. I iterated based on the challenge’s acceptance criteria, keeping designs simple for the MVP while meeting user and business needs
Wireframes
The solution.
Results & Impact.
This project demonstrates my ability to solve complex UX/UI problems under time constraints, creating a user-friendly, brand-aligned MVP.
The design showcase my skills in information architecture, user flows, and visual design. It’s scalable for future features like loyalty programs or order tracking, ensuring long-term value for ‘Beans + Brew.
Tools. & process
I used Figma for wireframing, mockups, design system, and prototyping, adhering to the challenge’s restrictions (no external tools like AI assistants). I completed the project within the recommended 90 minutes, ensuring all deliverables meet the acceptance criteria.
Portfolio-Specific Reflection
This project is a key piece of my portfolio because it highlights my end-to-end design process—research, planning, UX, UI, and prototyping—under tight constraints. It showcases my ability to deliver user-centric, brand-aligned solutions for e-commerce apps, making it relevant for roles in UX/UI design, product design, or mobile app development.
