Redesigning a Coffee Subscription Website


Product Designer

Project type

Website re-design to increase CRO


June 22 – October 22


Responsive design, empathize with real customers and work with commercial constraints.


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.


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.


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.


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


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:


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


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.

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


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