Udacity Coffee Shop app
A digitally-enhanced coffee shop experience tailored to students.
Project Duration: 2 months, part-time
Tools: Miro, Figma, Zeplin, Lookback
Lack of an app for Udacity students to conveniently order drinks and access in-house collaborative tools hinders their campus experience.
My solution addresses this issue by offering an intuitive drink ordering system with customisation and communication features that promotes interaction among fellow students within the app.
Challenge
Udacity is considering opening a digitally-enabled coffee shop experience. As part of this experience, students will be able to use an app which exists separately from the Udacity classroom, to perform actions such as:
-
Placing their drink orders
-
Collaborating with students in the coffee shop
Research & Data Analysis
-
Overall market research and competitive analysis for Udacity platform to understand the niche.
-
A series of interviews and a survey to comprehend users needs, habits in relation to both online education and drink consumption. This is to study the problem in depth and identify opportunities to provide a solution for.
Using Miro to outline user insights
1.
Analysing insights, sorting based on themes. Identifying opportunities.
2.
Crazy 8 technique, among others, without being biased, helps to come up with fresh new ideas
3.
Using "How Might We" question framework translates identified issues into useful features
4.
-
Evaluating features based on value vs complexity markers
-
Best features: mix of low, medium and high complexity but high product value.
5.
Wireframing
Sketching on paper allows to quickly conceptualise ideas prior to further advancing to low-fidelity prototyping in Figma.
Low Fidelity
Through continuous user feedback from usability study, 3 iterations were made to ensure user satisfaction.
Usability Study
Making users complete simple tasks is important to understand initial “flaws” of the design. It gives room for further prototype improvements.
Additional user insights allows to further iterate and improve lo-fi prototype before proceeding into high-fidelity.
​
Flow 1
Flow 2
Additional comments
User journey mapping based on usability study helps to:
-
validate microtasks;
-
understand user frustrations and delights;
-
provide additional insights;
-
identify areas for improvement
Customer journey map
Accessibility
Accessibility measured based on AA/AAA color contrast metrics and text size. Such improvements helps to ease app navigation and improve text readability.
Design Performance
-
Number of participants: 5
-
KPI: Increase Task success rate
-
Purpose: to validate my designs
-
Process: Users were instructed to complete the following task - add to bag 1 cup of hot latte with low fat milk.
-
Result: Identified behavioural pattern - users tried to skip steps since design for 2nd step outweighed the design for first step. Iteration.
Before
After
Design systems
Created style guide and pattern library to ensure design consistency.
Creating Style guide
1.
Typography
Colours
Icons
UI elements & styles
Imagery
Creating Pattern library
2.
Outcome
-
Digitally-enabled coffee shop experience;
-
A user-friendly interface seamlessly integrated into the student journey;
-
An intuitive order placement system, allowing students to easily customize their drink orders;
-
Collaborative features that fostered interaction among students within the coffee shop app.
