Coffee Cup UI UX Product Design case study by Tasha Ro

What if you could enjoy your coffee even before picking it up?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

the Challenge

What is the future of online ordering? It might be a fun, engaging, satisfying experience, like a video game. It might even not feel like an app anymore. The experience can be more compelling from the first tap. Like your BFF it greets you by name and seamlessly takes care of everything from your drink to your route.

So your coffee will be ready right when you’ll get to the coffee shop. And the only thing you need to do is to enjoy.

My Process

AriseHealth logo
Research
The Paak logo
User Journey
Ephicient logo
UX Map
2020INC logo
Storyboard
OE logo
Ideation
Toogether logo
Prototyping
Toogether logo
UI Design
Illustration of a user research card. Tasha Ro. All rights reserved
research icon
Research

Innovation & disruption starts with an understanding of what others see, feel, and experience.

I conducted quick research with a goal to see how people are ordering a coffee and how might we make the experience more satisfying.

Methods I used:
- observation
- user interviews
- open data

insight icon
Insight

People tend to order the same drink over and over again and have a few favorite places.

user journey icon
User Journey

Let’s see how the journey feels and how might we make it better

Illustration of a user journey research. Tasha Ro. All rights reserved
UX map icon
UX Map

What if you don’t need to tap 10 buttons in order to get a drink?

The common model involves several choices to be made every time someone orders a coffee. What if we condensed the steps and gave them immediately the best fit option?

To do that our app will 2 major user flows first-time launch and daily order.During a first-time launch, we learn about his/her preferences in a gamified way. Durig daily ordering user needs to confirm the drink and location in order to place an order.

Illustration of a UX map. Tasha Ro. All rights reserved
storyboard icion
Storyboard

Instead of guessing and working out of a spreadsheet I’m creating storyboards to better understand the real-life customer experience

Illustration of a storyboard for ordering coffee online Tasha Ro. All rights reserved
ideation icon
Ideation

And now the fun part begins.
How might we bing the context of a coffee shop into UX?

Illustration of a ordering coffee. Tasha Ro. All rights reserved
Illustration. Hand drawn wireframe. Tasha Ro. All rights reserved

And now the fun part begins. How might we bing the context of a coffee shop into UX?

Illustration of a ordering coffee. Tasha Ro. All rights reserved
Hand drawn UX prototype. Tasha Ro. All rights reserved
prototyping icon
Prototyping

Let’s get an idea tangible

Using Figma I made a series of low-fi to high-fi prototypes. I was looking for a way to naturally link all screens together. So for the user, all interactions will feel seamless & engaging, like in a movie. This led me to morphing one screen into another through the objects.

Prototype Evolution.

Hand Drawn UX design. Tasha Ro. All rights reserved
lo-fi wireframe
hi-fi wireframe
UI design icon
UI Design

Make a user feel the softness of coffee and the vibe of a coffee shop through UI

Coffee Cup iPhone app. Tasha Ro. All rights reserved
Illustration of a barista in Blue Bottle Coffee shop. Tasha Ro. All rights reserved

And now the fun part begins. How might we bing the context of a coffee shop into UX?

Illustration of a barista in Blue Bottle Coffee shop. Tasha Ro. All rights reserved

Final Product

Selected WorkAbout
tasha@tasharo.com