Coffee drinkers unite (…and buy your beans online!)
UX Design project to change the coffee buying habits — Case Study
In our first adventure into the field of User Experience Design, our group was tasked with creating a mid-fidelity prototype of an e-commerce website for artisanal coffee products. Fresh Brew in its MVP form aims to maximize online coffee sales by understanding the attitudes and buying behaviours of our target audience — the coffee drinkers.
Problem
A lot of people drink coffee. A lot. At work, in coffee shops, in parks, airports and — of course — at home. In order to be able to brew coffee at home, people obviously need to buy coffee either one of four basic forms: beans (ground or whole), coffee pods, or instant coffee.
Why is it then that in the era of online purchasing — the era of Amazon, Uber Eats and Instacart — coffee producers still find it notoriously difficult to achieve online market penetration? This is the enigma that we had to solve.
Team and role
For this project, I worked on a team of four User Experience Designers. We began by working together on all aspects of the research, to eventually take different paths in the planning phase in order to create four different sets of prototypes.
What’s brewing in the coffee world? aka DISCOVERY
Domain research
According to the Coffee Association of Canada, in 2018 a whopping 72% of Canadians aged 18–79 drank coffee yesterday.
That means that coffee is the most popular drink among Canadians; leaving behind all other beverages, including water.
The same source also states that the in-home preparation of coffee is consistently a prevalent way to consume it. That tells us there is a huge market, meaning that if we manage to convert even a small chunk of all coffee transactions into online purchases we will reach significant numbers.
User research and analysis
By performing in-person interviews, conducting surveys and a contextual inquiry, we learned about existing coffee drinkers behaviours. Findings included the preferred coffee type and brewing method, the importance of social and economic impact, they also confirmed our initial hypothesis that very few people buy coffee online.
As we sifted through all of the survey responses it became clear to us that the taste and quality of the coffee is the biggest buying trigger when shopping for one’s favourite coffee, followed by both the price and the beans’ origin. We also asked about responders frustrations with buying coffee online to discover why so few people decide to do that. As you can see below the shipping cost and time are a major concern, while not being able to taste the coffee beforehand and concerns over quality contribute to mistrust in the online services.
“I want to buy good quality coffee that is fresh and easily accessible. I want to be able to purchase the coffee right before I’ll need to brew it.”
– Survey Participant
During our Contextual Inquiry, we visited seven Artisanal Coffee Shops that sell beans. As expected, most people were relaxing and enjoying their freshly brewed coffee — but what was surprising is that those customers who purchased coffee beans entered the coffee shop with the sole purpose of buying the beans, they never stopped to sit down or chat. As one customer pointed out, he just wants to get the beans because it’s his favourite brand; the only disadvantage is having to wait in line.
In our interviews with coffee drinkers, as well as roasters, the quality, taste and the responsible sourcing were also a recurring theme. We also discovered that the roast date is important information for the knowledgeable coffee enthusiasts, as it ensures the coffee’s freshness.
Another common thread in all our conversations was the taste and how important it is to ensure that the customer is going to be happy with the flavour of the coffee. Many ideas started blossoming in our heads… but more on that soon.
“We want to bridge the gap between the instore and online experience, we want to make sure they buy the right thing.”
– Christopher Rodgers, Elysian
Seeing coffee for the beans: aka AFFINITY DIAGRAM
Based on the data from the in-person interviews, surveys, and the contextual inquiry, we organized our findings and categorized them using an affinity diagram.
This helped us pinpoint the specific needs and pain points of our target audience. It also sparked discussions to help close knowledge gaps and acted as a catalyst for idea sharing and generation within the team. We discussed the opportunities of replicating a feeling of an in-store experience, agreed on the importance of the shipping speed and cost, and looked for a way to motivate users to explore their options or seek out recommendations.
The above affinity diagram was then translated into the Must-Haves and Nice to Haves.
User Persona
Based on all the information we gathered, we identified our potential user. His goals and needs reflect the research findings. Dylan is representative of our target audience. He values the convenience of the online shopping experience, cares about the quality and freshness of the product while keeping in mind his impact on the world. He is price sensitive and doesn’t want to spend money on something he might not like.
To further understand Dylan and promote empathy and engagement within the team we created the User Scenario to showcase a specific event in Dylan’s life that might drive him to use our website.
Dylan is a busy designer who drinks a lot of coffee to support his busy lifestyle. His work has coffee, but it’s not very good. Dylan always gets off work very late. He prefers buying his own coffee but, because he works so late, he is too busy to go to the store. Frustrated by that, Dylan then looks for online coffee shopping options to accommodate his busy lifestyle.
Competitive/Comparative Analysis
Now we know for whom we’re creating the website, we know what experience we want Dylan to have, we know what features would realize that experience, so it’s time to put our ideas to the test and see if our competitors are following the same path.
The chart above shows 7 of the existing online coffee bean sellers. Of course, all our competitors have some form of the product catalogue, shopping cart, checkout, and product pages; but here we saw the first opportunity to distinguish our product, as only one store offered the roast date information on the product details page. The coffee match — a personalized coffee recommendation quiz — was non-existent on 4 of 7 websites, and with very limited functionality on 2 others. That’s when we knew we had to upgrade the personalized recommendation from a Nice-to-Have to a Must- Have.
Setting up the shop: aka INFORMATION ARCHITECTURE
User Journey
The next step in the design process was to organize everything and give structure to the website. This is known as Information Architecture. We started by referring back to Dylan and his User Journey to define the specific stages of the online purchase.
Mapping out the journey led to the User Flow, a flowchart that explains the process involved in accomplishing a task defined by a Minimum Viable Product. A Minimum Viable Product (MVP) is defined as a development technique in which a new product or website is developed with sufficient features to satisfy early adopters and to provide feedback for future product development.
The User Flow for our MVP lays out steps & actions in a particular order and shows the sequence that the user needs to undertake in order to get to the end of the task. Here is where the team split up according to each individual’s view of the simplest and best way to lead the user from their entry point, through a set of steps, towards a successful outcome.
Easily access products and add them to cart.
The user flow on the left demonstrates how easy it is for the user to add an item to the cart. The user has an option to search for an item, to filter the results down and search only for beans and filter even more within the beans category. At all times the results of filtering can be sorted to make the selection easier. Adding to cart is always available at every stage.
Edit whatever, whenever.
We all make mistakes and no one wants to find out at the end of a process that something was amiss. That it was it was important to me to make all the information needed to complete the checkout flow visible and editable at all times.
Below you can see the Site Map I’ve created outlining the top-level structure of my website.
Ideas to Action
Paper Prototype
Wireframe sketching is the first step where you translate written matter into its visual layout. It is the fastest and simplest way to test the designer’s assumptions on real users before translating them into the mid-fidelity prototype.
User Testing Tasks
The tasks that gave to my users when testing was included:
- Navigate to shop the beans
- Add an item to the cart from the catalogue page
- Add an item to the cart from the product page
- Navigate to the cart
- Proceed to the checkout
User Testing Changes
After testing I made the following changes to my wireframes:
- Add recommended products to the product page
- Add quantity buttons to the product page
- Add shipping information to the product page
- Add the Take the Taste Quiz call to action to the catalogue page and the sort dropdown menu
- Keep the fillable checkout forms on one page
Mid — fi Prototype
With the testing completed, I felt confident enough to transform my sketches into the final product, the mid-fi prototype. Below I will demonstrate the design decisions that are specific to this project and demonstrate how my design fulfills Dylan’s needs.
Please also check my InVision prototype below for more interactive exploration of the prototype.
Conclusion
This was a challenging project not only because turning a real-life experience of a coffee shop into a website might be difficult but even more so because the research that we’ve done didn’t really support that approach.
At the end of the day, I focused on the facts and the fact were that coffee drinkers want good coffee, want it fast and want it fresh. This is what Fresh Brew is all about. Visit the website, choose your coffee, or if you’re not sure what you like -take the quiz to get a personalized recommendation and enjoy your brew in just a couple of days anywhere in Canada with free shipping when spending $40 or more (flat $5 shipping charge if spending less).
What I’ve learned is that User Experience is constantly looking for answers and I would love to have more time to get more to fully flush out this project.
Thanks a latte! (Sorry, I had to.)
