How I made a UX design for a coffee shop roaster with a scientific concept — a UX case study

Wasn’t the easiest work I’ve done, especially in 2 weeks.

Denise Bueno
UX Collective
Published in
8 min readApr 29, 2019

This case study refers to the e-commerce website UX design for an artisan coffee shop roaster, in Vancouver, Canada.
The project requirements were defined by Red Academy Vancouver/Spring 2019.

Week 1

Interview Phase — Failing

Do you want to know how not to fail on the first day of the project?

We were in five designers (Alex, Andrew, Jill, Oliver and me) doing a domain and organizational research just a few hours after we received the project to work on.

During this part, we just focused on understanding how the market/industry works.

In our conversations, we tried to understand what kind of questions could be asked to the people working in the industry and what sort of relevant information we could get from consumers.

Our five different backgrounds, experiences, work styles and personalities should be a perfect combination and a spectacular fusion power, but instead, we collided.

So, in this conflicted environment, we developed two questionnaires to interview professionals from the industry and consumers. However, when it was time for the interviews we were not well prepared?

Interviewing Industry — 5 participants

Interviewing Consumers — 16 participants

We totally or partially dismissed the shallow questions and moved to a more natural and robust approach, full of details. From these conversations, we obtained the first fundamental results for the project conclusion.

So, lessons learned:

Star collision is only beautiful in photography, otherwise it's chaotic.
Waterfall projects suck.
Lack of collaboration and over-competition suck too.
Creativity & naturalness are more relevant than control & standardization.
A double dose of chamomile tea would help.

Survey Phase — The Gladiators

Do you think something has changed from day one? Of course not!

And once again we were there: The Gladiators — fighting each other for no particular reason.

The final product of this stage was a questionnaire with demographic and behaviour questions (which were ordinary and didn't help at all). Fortunately, after hours of debating and against the odds, we agreed to add the 3 last open questions.

These questions brought several relevant guidelines as an user experience design requirement.

The survey — 13 questions & 123 participants

Statistics

Through my solo journey, I had conversations with coffee professionals and consumers. I was able to blend the demographic data from the survey with the information collected from the chats.

Finally, an idea started to form in my mind!

Lessons Learned:
Problems do not solve themselves magically.
Knowing how to communicate does not make you smart, creative or a better professional.
Sometimes it’s possible to get something good through chaos — I guess!

Contextual Inquiry + Affinity Diagram & Persona Creation Phase — Staying alive

If Mark Watney planted potato in his shit to survive on Mars, I will eventually learn how to survive creatively in this project.

In the Affinity diagram, there we were again, colliding, competing for space, strategy or even for mere perception. There was no way to work as a team, but this time it was funnier.

As an Affinity Diagram result, we surprisingly created a large panel with several post-its, grouped by multiple criteria.

In the contextual inquiry stage, we split again from each other to work individually, authentically, and creatively, without adopting patterns.

Mark — the tech-savvy persona

Creating the persona of the project was very amusing but also a job full of details and analysis that directly influenced the result of the project.

The primary persona of my project is a traveller, tech-savvy man, 32 years old, founder of a fin-tech startup and absolutely crazy about Stephen Hawking (the God Particle) theories, Albert Einstein theories, Higgs Boson theory, Unified Field theory and Cern.

This tech persona has been deeply in love with coffee, travel and science for more than ten years.

Lessons learned:
With our individual perceptions, we were able to add much more to the project than when we were not listening.
Dedicate yourself to always do the best you can.

Week 2

Building & Testing Phase

Interstellar — I mean: we survived to the event horizon, and nothing was absorbed by a black hole, so it’s time to shine.

Understanding all the data included in the survey results, interview data, behaviour and feelings observed in the contextual inquiry exercise was the most relevant part of the project for me, up to that point.

For this project, my main inspiration was: Cern & the Higgs' Boson Theory

Cern
Higgs Boson

The design concept:

The design concept was created for Mark’s persona, who represents the usual Vancouver’s technology professionals profile.

I thought — I want to create something extraordinary for this guy, where he can enjoy the two or three things that he likes most in one go.

Mark + travel around the world + science + Higgs' boson + Cern + particles accelerator + coffee + roasters = beans from all parts of the world, accelerated within the coffee roaster

Supporting my strategy

Storyboard, sitemap, user flow, user stories, scenarios, use case and tests

Through all this data arsenal, I was able to create the concept for this UX project and, to support the project further, I also created:

a) storyboard: example of a story about a coffee-lover character who comes home exhausted after work and needs to renew his energies. His wife suggested an espresso since their coffee grinder recently broke. This character loves to buy coffee with the highest quality, he buys sophisticated coffee equipment.

b) site map: this map is an open view of the distribution of the website pages that will be built for Mark.

c) user flow: this flow represents an overview of Mark’s navigation macro processes on the site, without opening up the details of the processes.

d) user stories: For website development, both from a design and a code point of view, user stories help identify the goal to be achieved, with the deployment of planned features.

e) scenarios: these scenarios represent Mark’s problems, wishes, or needs, and will be treated as the project scope.

f) use case: is a graphic representation, most commonly used to describe the relationships between actor and the actions he/she needs to perform in the system.

Low-Fi Prototype — already testing my scientific concept

Then I created a paper prototype to test not only the navigation, but to test acceptance of people for a more innovative, organic, and experimental design approach. In just 3 clicks Mark was able to find his favourite product.

Testing

More than ten people tested the prototype on paper, and there was no request to change the navigation, but several suggestions to improve the order of the navigated pages.

It was a very cool experience because people were so open and I could clearly see that there was no indication of rejection about the innovation shown by the prototype.

HIGGS, artisan coffee shop roaster — UX final design

Obviously, it’s a wireframe, with a colour palette in blue, just like any other wireframe. The typography is not refined yet but the idea of this prototype is to offer Mark a more creative navigation.

The design simulates a particles accelerator, combining a molecular structure as the Higgs' Boson, to represent the process that happens inside a coffee roaster, which accelerates the beans using the appropriate temperature and speed, for its perfect roasting.

That was so cool!

Future considerations

All the techniques were relevant to the project’s development, and I noticed that some of them could be used in more than one stage of the project cycle. For example: Process and Moodboard flows can be constructed as AS-IS in the research step and as TO-BE in the planning and testing stage. I think it could help in understanding if the desired increment / improvement was delivered or not by the project.

Some preparations could have been made before the project began, avoiding conflicts, confusion and resulting in a better & effective presentation.

Conflicts among team members are typical, often healthy for the project, except when it is not. Misaligned teams rarely produce positive results so we should consider this for next projects.

Case study: Project no.2 — Full-time UX Program RED Academy Vancouver

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Denise Bueno

Design Lead | Product Design | Creative Designer // www.denisebueno.com

No responses yet

What are your thoughts?