Coffee App
UI/UX | Research | Prototyping | Illustration
ROLE: Individual Project
TIMELINE: Spring 2023
TOOLS: Figma, Illustrator
— 01 Introduction
For this project, I was tasked with developing a coffee app for a seaside café. To simplify the project, the store only sold three drinks: Brewed, Espresso, and Cappuccino, - but allowed for extensive customizations. To successfully finish this project, I needed to create a comprehensive prototype that incorporated multiple user flows based on thorough user research and testing.


— 02 Research
To start off this project, I began by sketching out initial screen designs and mapping out the user flow. Additionally, I conducted interviews with four potential users to understand their preferences for a coffee app, with a particular focus on drink customization.
To most people, drink customizations are essential. Here is what I gathered:
Participants Requested:
• Plentiful Customizations: Different milk types, sweeteners, temperatures, and add-ons.
• Exact Amounts: Users wanted to customize the volumes of ingredients.
• Easy Reorder – Users wanted an efficient way to reorder their drinks.
• Payment Made Easy – Users wanted to scan gift card or credit cards for easier payment.
Once I gathered input from potential users, I started with the initial design process.
— 03 Ideation
To begin the design process, I created quick sketches of the potential user experience, utilizing insights from the interviews.
Early Sketches

User Flow

Wireframes

For my design, I aimed to create a playful aesthetic. To achieve this, I illustrated unique icons for all customization options in the app.
Illustrated Icons

Initial Desings

After finishing my initial designs, I held usability tests with 6 potential users. Utilizing feedback from the tests, I started work on my final designs.
— 04 Final Prototype

— 05 Reflection
Next Steps
• Add more menu items to the app.
Takeaways
• User feedback can improve the UI quite a lot.
• Designing your own icons can add a lot of personality to a design