Blend.ie
Coffee e-commerce with Blend Configurator - Case Study
This was the final project in Ironhack Berlin’s bootcamp. For this project, I teamed up with a classmate and set out to find a real client, offering to work on whichever project they would need help with at that moment.
- UX/UI Design, Product Design, Data Visualization, UX Research
- Figma
- December 2024
This project was voted as Best UI/UX Design project 🥇 for our cohort’s Hackshow (End of Bootcamp presentation) at Ironhack.
The Client
For this project, we joined Jonny, a web developer based in Germany providing his service to Connor, a specialty coffee roaster based in Ireland. We worked remotely for their project already in development, Blend.ie.
The Stakeholders
Jonny
Web Developer, Germany
- Freelancer, already working with Connor
- Main tool: WooCommerce
Connor
Coffee Roaster, Ireland
- Business owner, leading the project
- Extensive specialty coffee experience as roaster
The Designers
Nicolo
UX/UI Designer, Berlin
- Graphic Design background
- Extensive specialty coffee experience as barista and trainer
Vered
UX/UI Designer, Berlin
- Data Science & Project Management background
- Previous experience working in different fields in tech
The Project
Connor plans to create a white-label specialty coffee roasting company and he wants to give his customers the choice to customize the coffee bean composition when purchasing a coffee blend. He then included Jonny in the project to help develop an e-commerce and implement a “Coffee Configurator”: an interactive way for users to craft and customize their own unique coffee blends, sorting out through criteria like flavors, origin, variety, price per kilogram, etc.
Additionally, the e-commerce would also provide a label configurator, enabling B2B clients a way of buying these custom coffee blends with their own custom labels, providing a round solution to their unique business needs. B2C customers would also be able to use this service, improving their shopping experience.
The Task
As per our initial call with Connor and Jonny, Vered and I offered to help in the project’s User Experience and Interface design side. The project was still in an early development stage, but we already had the certainty that:
- The solution would be a desktop website e-commerce.
- It would be initially based in Ireland, with plans to expand to EU markets next.
- It would be available to B2B as well as B2C customers.
The Designers' Scope
Having this in mind, we narrowed down our scope for the next 2 weeks. We offered to deliver:
- User Flow. From Home Page through the Coffee Configurator, ending with the Checkout Page. It should include the Label Customization too.
- The Coffee Configurator prototype. How will it look like? How will users be able to visualize its information? How clear will it be? And at which point of the User Flow will it appear?
- Single Product Page prototype. Coffee, whether as a single origin or blend, comes with more information to it
- Choice of typography, logo, colors and UI Elements. We should come up with a practical design decision for the prototype, as there is no graphic resources available yet.
Feature Prioritization
Must Have
- A Blend Configurator User Flow
- Single origin coffee information pages
- Pre-made (Template) coffee blends, for users to directly buy or customize
- Label customization User Flow
- A visual identity
Should Have
- Appealing visuals that transmit quality and reliability
- Intuitive, step-by-step User Flows
- Recommendations for Filter and Espresso bean blends
- Copy writing accommodating newbie coffee buyers/ consumers
Could Have
- A mobile site version
- Customer Service User Flow
- Tutorials
- “Find your Best coffee” quiz
Won't Have
- A physical store
- Thorough information about each coffee
- Roast degree customization
- Each coffee would have a standard, invariable roasting profile.
Research
Specialty Coffee is a very fascinating and complex world on its own. Therefore, we need to break the topic down before we get to designing.
Vered and I definitely did a lot of research on many aspects of it, in different ways. Here is some condensed information to better understand this project.
What is Specialty Coffee?
As per the Specialty Coffee Association (SCA), it is coffee that is recognized for its distinctive attributes, resulting in a higher value within the marketplace.
Very often if not always, it involves dedicated farming practices, quality assessments by cupping professionals and special roasting profiles by roasters to get the best flavor possible.
To put it simply, it’s a leap in quality compared to commercial coffee, and a sensible “gourmet” product with a growing popularity.
What makes each coffee different?
Specialty coffees come with different parameters which make them unique.
Here are some key factors that we considered for the project.
Variety
Coffee has different genetic species (e.g. C. canephora, C. arabica) each providing a distinct coffee bean and flavor profiles.
Blend.ie will work with Arabica coffee beans (Coffea Arabica), which comes in different commercial cultivars (e.g. Caturra, Pacas, Java, Bourbon, etc).
Flavor
Roasters and cupping tasters label each coffee with descriptors to help other people understand how does it taste like when brewed.
Blend.ie will work with 5 different flavor categories for their blend configurator: Dark, Sweet, Fuity, Body & Acidity.
Origin
Even if coffees come from the same country or region, the flavors can vary from farm to farm. Altitude is an important factor, too.
Often, for transparency and also for differentiation, coffees are labeled with the farm’s name or with the producer’s name.
Process
Coffee beans are actually seeds from the plant’s fruit, the coffee cherry. The way of getting the seeds from the fruit to the final dry green bean, ready to be roasted, is called processing.
Processing affects how the coffee tastes, too.
There are many different processing methods, but the most common are Washed, Natural and Honey.
Roasting Profile
The same coffee beans can taste differently depending on how are they roasted. Therefore, roasters create different roasting profiles to reach a desired outcome.
A common way of labeling roasting profiles is by the way it should be brewed to get the best cup possible (e.g. espresso roast, filter roast).
Why would a B2B customer order white-label specialty coffee?
As previously mentioned, specialty coffee is a quality product with a growing popularity and demand. Not only restaurants and cafés: businesses, organizations and personalities can benefit from using their own label and distributing it.
Some B2B examples are:
- Hotels and tourism businesses.
- Companies giving out souvenirs.
- Marketing campaigns.
- Influencers.
Qualitative Research
We also interviewed several experts on the subject via video call (5) and on Google Forms questionnaires (3).
The interviews were thorough and with varied questions, like:
- What is your experience in crafting/ selling coffee blends?
- Have you ever crafted a coffee blend? What was the result?
- In your view, what are the most important factors considered by B2B customers?
- Are you familiar with white label coffee?
- What is the most random question/ request a B2B customer asked you?
- How do you communicate flavors through words/ images?
Italo
Barista, Roastery Operations, B2B Relationships
Germany
We guide the customer in the choice process because they might end up choosing something weird as a blend.
Interview Summary
- Blends are often requested for espresso-based drinks, usually affordable and versatile.
- Single origin coffees are favored in filter brews, highlighting its unique qualities and flavors.
- Transparency and clear communication regarding sourcing, seasonality and crop variations are highly valued.
- The cupping process is key to helping customers choose blends. This includes discussing budgets and tailoring blends to use cases.
- If I say sharp flavor, you think lemon juice. If I say silky and brown, you think chocolate: shapes and colors can communicate flavors.
Their Advice
- If I say sharp flavor, you think lemon juice. If I say silky and brown, you think chocolate: shapes and colors can communicate flavors.
Andrés
Barista, Trainer, Sensory expert, B2B Relationships
Uruguay
Here (in Uruguay), we sell a certain coffee and we write "Mary Cookies" as its flavor descriptor: caramel and vanilla notes. Customers understand it immediately.
Interview Summary
- There are two common approaches to coffee blending:
- Economic Blends: mixing different grades or origins to leverage costs while maintaining acceptable flavor profiles.
- Exotic Blends: tailored blends with unique flavors for high-end clients (luxury).
- Seasonal Blends (e.g. Christmas Blend) are very popular and align with customer preferences.
- Coffee preferences are heavily influenced by cultural norms and social constructions.
Their Advice
- Create a beginner-friendly sensory guide focusing on basic flavor terms to bridge knowledge gaps for new customers.
- Allow customers to choose blends based on flavor categories with curated options to simplify the process.
Anthéa
Roasting Operations
Germany
Blends are usually for older or beginner-level customers. They are sometimes darker roasts and more convenient price-wise.
Interview Summary
- Price is a key factor when crafting a coffee blend.
- You can start by identifying the coffee’s purpose (e.g. espresso vs filter, with or without milk).
Their Advice
- Offer curated blends.
- Easy-to-use blends for beginners, emphasizing consistency and usability.
- Be mindful about variables like stock and bean availability.
- Simplify user decisions with approachable language.
Frederik
Business Owner
Germany
The more specific the information is, the more I trust the coffee. If it just says Brazil without any details, I assume they have something to hide.
Interview Summary
- He relies on sensory cues like descriptors, origin, processing method and variety to assess coffee quality without tasting.
- Believes the user base of our product would include tech-savvy people and businesses rather than coffee purists.
Their Advice
- Suggested user flow:
- Start with a base coffee.
- Suggest safe-choice, compatible beans with percentage adjustments.
- Provide descriptors to simulate a sensory experience.
- Draw inspiration from other industries, like custom perfumes.
- Offer sample packs to aid the decision-making process.
Product Customization Research
We had to find a way to visually communicate not only flavors and textures, but also ratios and percentages and even single origin coffees vs blends.
There are some brands which offer product customization in their e-commerce platforms. Let’s inspect them:
Mymuesli
A wonderful example of a customization user flow.
Mymuesli is a german brand that enables their users to customize their granola: they can create a granola mix with 5 different ingredient categories, choose the package’s label (design, colors, custom text, even use a photo), all while showing the net price per Kg.
By the time of the project, it also featured a radial chart with live flavor visualization.
Ikea
Their website features a “room planner”, where the user can drag and drop furniture from a live catalog.
What’s really useful for the project is to learn about their UI decisions, smartly using a side navigation, simple interface, easy controls and live visualization.
Stumptown Coffee Roasters
While they don’t offer customization user flows, they do have “find your coffee” quizzes for B2C and B2B customers.
Stumptown is an american specialty coffee big-game player, we can assume that their way of handling their UX is effective.
Flavor Visualization Research
As per the previous research, we needed to find a way to visually convey flavors to the user.
Radial Chart
Out of all the options, a radial chart would be the most useful way of explaining different, same-hierarchy attribute levels of a single object.
In fact, the Specialty Coffee Association (SCA) also uses one as an official coffee tasting guideline, albeit lacking user-friendliness and simplicity.
The previous Mymuesli.com example featured a flower-shaped and color-coded radial chart with 5 attributes. This would be a great user-friendly example.
User Personas
Keeping in mind that we needed to craft a configuration user flow for both B2B and B2C, we decided to create user personas to find common needs and pain points.
Ron
Coffee enthusiast
B2C, One-time buyer
- Medium coffee-savviness
- High tech-savviness
- Finds specialty coffee exciting
I want to buy a special gift for my dad, making sure it's gonna be something I can customize and that he''ll enjoy.
Pain Points 💥
- Feels overwhelmed by too many options and coffee jargon.
- Doesn’t have time nor patience to evaluate coffee details.
- Coffee bags are very hipster-looking, not fitting as a gift to an older adult.
Goals 🏆
- Find a nice, affordable coffee present for his dad.
- Navigate through a no-hassle experience, avoiding newsletters and subscriptions.
Needs 🌱
- A good price-quality match.
- A clear buying process.
- Minimal decision fatigue.
.
Emily
Business owner
B2B, Subscription buyer
- Medium tech-savviness
- Knows a lot about pastries but not so much about coffee
I just opened a bakery café but I'm missing a quality coffee provider. I'm looking for a distinct flavor that can pair well with the pastry menu.
Pain Points 💥
- Feels overwhelmed by too many options and coffee jargon.
- Has little time to learn about quality coffee but wants to buy it anyway.
- Doesn’t want to disrupt the overall experience of her business with flashy third-party coffee packaging.
Goals 🏆
- Provide a seamless experience to her clients.
- Find a coffee that fits well with her business idea.
- Practicality in a B2B relationship.
Needs 🌱
- Navigate through different options without investing much time nor effort.
- Save time with decision-making.
- A good price-quality match.
.
The Approach
The coffee configurator requested by the client is a feature not even the big game players offer in their e-commerces. However, they often feature “Coffee Quizzes” (Stumptown, Origin Coffee, etc) as user flows into their websites.
The common elements in these quizzes are:
- Playful visuals
- Interactivity
- Empowerment of the user through option selection
- Fun UX Copy-writing
- Funnel to a final product
Blend.ie not only wants to offer full customization with a blend configurator, but also a label configurator. Therefore, we should consider the following:
- Step-by-step, mistake-proof crafting process
- Empower users with decision-making and adjusting with live data visualization
- Use clean visuals to maintain a professional feel
- Display an intuitive radial chart
- Funnel to a purchase/ add to cart
The Solution
Sitemap
The client asked for the Configurator to be a protagonist in the user flow and for B2B users to have a “Bookmarked coffees” page. This sitemap takes this in consideration, as well as the two user persona’s needs and goals.
Prototype
User Flow 1: buy a custom-label coffee
Can Ron buy a custom-label coffee for his dad?
In this flow, the user navigates through the Product Gallery, chooses a Single Origin coffee and customizes its packaging and label before proceeding to checkout.
User Flow 2: create a blend from a template
Can Emily configure a custom blend for her business?
In this flow, the user enters the Configurator via a Template Blend Product Page. Then, navigates through the individual coffee cards and adds it to the blend.
The Takeaways
Team Dynamics 🤝
We engaged in several video calls with Jonny and Connor: 1 for the initial screening, 4 during the 2-week sprint, and 1 for the final handoff after the sprint.
This project involved a considerable amount of coordination between Vered and me, planning our time ahead and dividing the tasks.
We started the first week both engaging into UX research and brainstorming. For the second week, we divided the tasks: I would be in charge of ideating, designing the logic and prototyping the Blend Configurator and Product Cards while Vered would focus on the overall prototype completion, propose a style guide following our research notes and developing a “Coffee Quiz” user flow, which was unfortunately not implemented for the deadline.
On the side of soft skills, I would provide thoughtful insights and coffee expertise to our team workflow, while Vered would champion the designer-stakeholder relationships with her Tech Industry experience.
We both worked very hard, and I’m very appreciative of her performance! We did it!
Key Learnings 🗝️
This was an enriching project for me: not only I would get to apply all of my coffee knowledge and insights to a real-world design project, but I would also get to participate and find my spot in an evolving team dynamic.
Putting the two weeks in perspective, I learned a lot on designer-to-client relationships, teamwork under pressure of time constraints, and creative problem-solving.
I also realized that UX Research is a topic I enjoy very much and wish to further develop.
If we had more time... ⏲️
Naturally, we would develop the “Coffee Quiz” User Flow. As per our research, this was an effective way of providing the user with a “safe choice” coffee.
Personally, I would further iterate on the Configurator design, as well as fully prototyping it. I would further develop the “Product Card” designs, I think the cards approach is very playful as it is logical.
Conclusion 📚
A specialty coffee blend configurator is indeed a challenging project: not only because it challenges the concept of trying a complex product before buying it, but also because it puts the visual information capabilities of a brand to the limit: how many images would you need to use to differentiate an ever-growing portfolio of seasonal products? And how many shapes do you need to convey the astonishing variety of flavors a coffee can have? What about percentages and flavor ratios? And how to differentiate them with a visual hierarchy?
Nevertheless, Connor was very happy with the result of this educational project: We received a positive feedback from him. Vered and I left the door open for when he’d like to further develop his vision. We wish him all the best with Blend.ie!
