Cafedirect
Redesigning a Coffee Subscription Website
Role
Product Designer
Project type
Website re-design to increase CRO
Duration
June 22 – October 22
Skills
Responsive design, empathize with real customers and work with commercial constraints.
Overview
A subscription service that is losing traction
Café Direct is one of the biggest coffee brands in the UK. I’m currently working on the specialty coffee subscription service (an eCommerce business). I’ve decided to work on a conceptual project redesigning their website to apply my knowledge while learning UX Designer.
These recent years the number of subscribers has been decreasing drop by drop which is worrying because subscriptions give to the company a steady stream of cash flow that generates stability and allows the company to source the best coffees in the World for this and other SKUs. We need ideas to reverse this trend and I’ve decided to approach the problem from a UX perspective.
Challenges
1. Increase Coffee subscribers
2. Create an easy customer journey that allows to even the non-informed customers to get the coffee subscription that best suits them.
Goal
Re-design the mobile and desktop webshop with the easiest user journey possible to subscribe to a coffee plan.
Back to the future
I know, I know: «Process and research over design»… but who can avoid tasting the cake when it’s still warm?
It's alive!
This is the result of the first iteration of this project.
Table of contents
Click to go to a specific section
Research
Primary Research - Data Analysis
I deep-dived into Analytics to get a primary view of what wasn’t working right. One of my main discoveries was our shopping activity is very low for a web shop: 92% of our visitors don’t even check our products, and from those who add something to the basket more than 63% abandoned their carts. We are failing in our main mission.
“I don't even know what I'm buying when I'm getting coffee” research showed.
92% of our visitors don’t even check our products.
Another key insight was that most of our visitors were jumping from the homepage to the “buy coffee” tab, back to the homepage and then leaving the website. We don’t even have too many visitors in our subscription offering. We were misleading our customers into a journey where they weren’t finding what they came to take.
Users don’t check our subscription offering
The majority of user flows look like this: Users that don’t go anywhere before leaving the website.
Current Visual Hierarchy: Messy.
While it starts with a sense, very soon becomes in a bit messy flow. And the most important: it’s not making the user focus on the important: subscriptions.
Main insights from the analysis of the data:
– The hierarchy of the website is not well defined: you cannot identify clearly what we want from the user.
– Misleading buttons: there are buttons like “Buy coffee” that redirect to the one-off products instead of redirecting to the whole shop offering. When you click “buy coffee” you can be looking for subscriptions too or equipment.
– The website is not focused on our subscription service instead it is giving you too many options with different visuals with equivalent visual weight.
– Lack of uniformity in the visuals. Data show users try to “buy coffee” but they leave the shop after a few clicks.
– Visual hierarchy needs improvements.
Primary Research - Users' Interviews
SECOND TASK: CHAT WITH USERS
I conducted a round of user interviews to ask about their experience using our website, and other subscription services so I can prove or refuse my findings on data and gather new insights for potential improvements.
Interview Goals:
1. I would like to identify users’ frustrations and pain points when using our website.
2. I would like to detect the consumption patterns of speciality coffee drinkers and retail buyers.
3. I would like to know if speciality coffee drinkers actually would enjoy and use a subscription service.
4. I would like to find new ways of bringing a coffee subscription service not used in the market yet.
5. I would like to find new market opportunities for a coffee subscription service.
Interview Participants:
– 18-99
– Coffee lovers and people with an interest in the speciality coffee market
– Users of online delivery services (food delivery, groceries delivery, Amazon, Asos…)
– In the UK
– Potential users with a non-typical profile (young East Londoners, high-level of studies, mid-high incomes)
Research - Pain Points
1. Users have struggled to understand the difference between subscription and one-off purchases because everything looks like the same thing. It’s important to communicate clearly when a product is a subscription and when it’s a single bag of coffee.
2. The purchase process is a bit messy. Difficult to understand and you need to choose too many things, and it felt like an exhausting process. Too many steps.
3. Consumers prefer small bags of coffee to brew it as fresh as possible. This has an impact on delivery costs, which users are very sensitive to.
4. Offering a good range of options when it comes to choosing periodicity on a subscription is important because every user has a different rhythm for brewing and drinking coffee. Usually depending on the number of members in the same household.
Research - Takeaways
"We need to re-think how we set our purchase journey to be aligned with the knowledge of our customers and the task we want them to do"
User Personas
User Stories
User Journey Map
Problem Statement
Competitive Audit
"Nobody is explaining their products in a way that users can understand it. Who is thinking in the user?"
I conducted a competitive audit just before to ideate solutions to look for the strengths and weak points in other coffee subscription services.
You can find a report about this audit at the following link.
Product Goal Statement
Our website will primary let users select the subscription plan that better fits them which will affect the new potential subscribers by clarifying the different options and allowing them to do an educated selection.
Ideating the product
User flow
Wireframes
I created 5 different versions of each key screen to get smooth solutions for the purchase process, aiming to simplify every step. I picked the best solution and combined them to base my first digital wireframe with.
Exploring different card systems and purchasing journeys.
Prototyping - Design Process
Engineering the structure of the cards
It was quite challenging trying to find a hierarchy that allow me to show the plans separate from the one-off purchase while keeping uniformity.
Smoothing the payment process
It needed to be very fast and straightforward but giving all the info required to let customers understand they are not just buying one bag of coffee but subscribing to a coffee plan.
Prototyping - Lo-fi version
Alpha version ready to be tested!
Usability Testing
Usability test - First round
"We need to create lighter cards, and adding a profile section. Btw, where is the shopping card?"
I did two rounds of Usability Tests. In the first one, I was focused on refining the functionality of the design to allow the customers to understand as fast as possible the difference between a subscription plan and a one-off purchase. In the second one, I was focused on improving the overall experience to get a nice and happy path to ensure the user journey works properly and I can get my MVP. From this research cycle, I’ve implemented P0 and P1 findings from my research.
– Can the customer subscribe to a coffee on the terms they want?
– Is there any part of the process where the customer gets stuck?
– Is the customer aware they will make a recurring payment for the service?
– Are we missing some features for this app?
Unmoderated usability study
Location: London
Date: 4th Sept 2022
Length: 20 min.
Compensation: 1 year of free subscription.
User will be asked to use a low-fi prototype to complete some tasks
5 participants
2 males, 3 women. From 18 to 65 years old.
If you want to check in more detail how I planned my usability test you can check it in the following button.
Round 1
Round 2
Usability test - Affinity Map
Usability Study Patterns
If you want to check in more detail the usability patterns I got from my research you can check the following button.
Usability test - Findings
Iterating on the design
Iterating
Adding a shopping cart feature
I added the shopping cart that I forgot to include in the first place.
Improving clarity on product charts
I improved how the information is shown within your payment process.
Removing misleading buttons
I changed the “done” button for a clear happy ending message.
Prototyping - Moving into hi-fi
Improving product cards
I added reviews and removed non-relevant buttons.
Simplifying the personalization process
I created a dropbox menu where you can see all options and create your combination.
Adding the feature of modifying your selection
Improving the user experience during the payment process to allow them to modify the personalization.
Prototyping - Hi-fi version
It's alive!
This is the result of the first iteration of this project.
Styling and Design System
Design System - Overview
I created a Design System to define all the visual assets I needed to keep my design consistent. I designed a bunch of Components that allowed me to create the mock-ups faster and more efficiently.
Design System - Colors
Design System - A11y
Design System - Typeface
Design System - Card Designs & Components
Exploring Interaction Design
Wrap up and Future work
Wrap up
It was a long journey for me to create this project, and I absolutely loved it. I’ve learnt to minimize my assumptions and I found it very satisfying to see how even deep thoughts and personal considerations could be invalidated by research.
Future work
Here there are some pain points I couldn’t scope because of the prioritization constraints. This is the list of changes that need to be addressed in future iterations:
– Increase the weight of the products pics to help the user understand what is getting.
– Create a Wizard to help users to find their best subscription
– Add extra content like brew guides
– Set a notification system to allow customers to track orders and estimated times for delivery.
For any questions... Drop me a message!
You can email me to
sergioriquelmesanchez@gmail.com