COFFEE & GO
UX Research, Wireframing, UI Kit
& Hi-fi Prototype
Briefing:
Full case study implementing UX research, developing UI kits and design system components, wireframing and hi-fi prototyping with interaction and app animations (iOS).
Tools
Figma, Figjam, Miro, Canva, OpenAI (GPT4)
Timeline
2 weeks
Type
Case Study
iOS App
Initial issues found
-
No budget available for research and development;
-
Small number of available people to interview as users to build personas and UX flows.
-
No real needs, consequence of the previous point.
Decisions made
-
Search for similar apps to find out what kind of product could be developed
-
Use AI to create 'fake' users and their profiles to investigate this information, and create personas and potential user statements based on this investigation
-
Real needs found with the personas and users created in mind, as well as a fake company.
THE CHALLENGE
SIMILAR APPS
the coffee.
App that allows the user to choose between multiple coffee shops to order in-store or for delivery.
Uber Eats
Delivers meals from local restaurants to your door via app or website.
Glovo EXPRESS
On-demand delivery service that allows users to order anything from food and groceries to packages.
PERSONAS
In order to understand who this app was being designed for, I collected my research data and based on that I asked the AI to create fictional users. These personas were created based on the information generated.
_
“The average age of an Uber Eats user tends to range from 18 to 44 years old, with a strong presence in the 18-34 age group. These users are typically tech-savvy, busy professionals, students, or young adults who prefer the convenience of food delivery.”
Persona 1
16-21 years old, at school or similar, uses phone, likes to order for friends.
Persona 2
21-45 years old, usually at work or at home or with family, comfortable using mobile app, usually asks for themselves, especially for lunch or to compensate meals, interested in nutritional information.
Represents the majority of users of this type of app in real life.
USER STORIES &
PROBLEM STATEMENTS
USER PRIORATIZATION
Alma's case is presented here because it represents more than 60% of real users in similar applications.
Alma Orders Healthy Coffee to lunch at work Before Gym
This is a Figjam file, please wait a couple seconds for it to load.
FEATURES TO BE CREATED
This is a Figjam file, please wait a couple seconds for it to load.
APP MAPPING
This is a Figjam file, please wait a couple seconds for it to load.
LO-FI PROTOTYPE
This is a Figma file, please give it a couple seconds for the project to load.
BRANDBOOK
VISUAL LANGUAGE
Friendly
Serious
Minimal
Modern
Exclusive
Bold
Formal
Playful
Illustrative
Classic
Accessible
Subtle
FONTS
ROBOTO BOLD
ROBOTO
Twinkle Star Regular
THIS IS A TITLE.
This is a sub-title.
Coffee & Go!
CLICK THIS BUTTON.
This is additional information.
MOODBOARD &
COLOR SYSTEM
UI KIT
& COMPONENTS
TESTING
PROTOTYPE
Please note that this prototype is constantly being improved, so there may be some features that are not yet prototyped.
This is a figma file, please allow a few seconds for the project to load.
REAL FEEDBACK FROM TESTERS
Next Steps and future iterations:
-
New adjustments based on real user feedback;
-
HI-FI prototyping with button interactions between screens (add items, shopping cart);
-
Second beta test with new implementations.
This project is alive.
