Breville: Coffee Solution

Design a “Coffee Solution” that accelerates machine sales, guides customers through a great first-use cup of coffee, and helps Breville play a meaningful role in their ongoing coffee experience.

Role
UX Lead
Team
Client Partner, Design Director, UX Lead, Visual Designer
Date
Q4 2021 – Q3 2022
Status
Launched Q3 2022

The Challenge

Breville sells premium espresso machines for people who want to make great coffee at home. However, they observed that many customers request support around how to use their machines — or even return them brand new out of frustration. Breville asked us to understand this issue and help customers find the right machine for their needs and make great coffee.

User Problems & Initial Ideation

Early on, our team worked with Breville's customer insights and support team to understand why users were having trouble with their machines. We learned that:

  • 1 in 10 users return their machines in brand new condition.
  • 7% of all Breville support calls are asking about 'how to make espresso'.
  • Most users are upgrading from automatic 'pod' machines or drip coffee to enjoy 'better coffee' but struggling to make espresso.
  • Many users reported making coffee that tasted awful — most often caused by poor machine settings and low-quality beans.

There were clearly issues around a lack of education on espresso making and users buying the wrong machine for their needs.

User problems data
Data from Breville

Data from Breville.

Ideation

Early on I led ideation around building a full end-to-end design solution for the espresso shopping funnel. We outlined 3 flows based around Breville's core shopping profiles:

  • Solution Explorer: Custom bundle shopper
  • Solution Bundle: Shopping pre-created bundles
  • Machine Minded: Only shopping for a machine

Our goal was to design a flow that covered initial discovery, choosing the right machine, through to unboxing and first use — ensuring customers bought the right machine and that their first sip was at least decent, with room to improve quickly.

High level E2E solution overview

High level E2E solution from discovery to first use.

E2E solution discovery section detail

Close up detail of E2E solution — discovery section.

E2E solution unboxing section detail

Close up detail of E2E solution — unboxing section.

Low Fidelity Wireframing

Once we aligned with Breville on a full end-to-end solution, I began designing the flow in low-fidelity. I designed machine discovery on the homepage and shopping funnel, plus a 'machine finder' guided selling flow to help users find the right machine.

The 'machine finder' guided selling quiz allowed users to find and compare machines based on their needs — e.g. 'Do you need a grinder?' Once a machine was selected, I designed a 'machine bundle' flow that let users add the right accessories and, critically, bundle good coffee with their purchase. A 'coffee selector' step allowed users to choose high quality coffee from different roasters. This ensured users were buying the right machine for their needs and getting everything they need in one box — a full coffee solution.

Guided selling quiz flow

Guided selling quiz flow.

Machine bundle — accessories and coffee

Machine bundle — allowing users to add accessories and good coffee.

Initial Design

The low fidelity flows allowed us to iterate rapidly and align on a broad E2E solution. I then designed the flow in mid-fidelity to finalize the layout, interactions and details on each page — building a comprehensive prototype for user testing.

Mid fidelity bundle explorations

Mid fidelity explorations of the machine bundle.

Testing

During the mid-fidelity phase we tested the customer flow intensively. The bundle had some complexity — users needed to find the right machine, then choose accessories and find a coffee they like, potentially subscribing to a coffee subscription.

We tested the mid-fidelity flows as a prototype with 24 users. We found the guided selling flow worked great — users were confident with their selections — however, users were overwhelmed by the coffee and accessory selection. They had too much choice and were confused by having to subscribe to coffee.

Because of these insights, we simplified the flow. We removed the accessories step and made it an optional add-on, including key accessories in the main product bundle. We also removed the coffee subscription, instead including a free bag of coffee with purchase and making subscription an optional post-purchase upsell.

User testing highlights

User testing highlights.

Final Visual Design

Once updates from testing had been applied, I handed the wireframes to my visual design partner who brought them to life with the Breville style guide.

Visual design — guided selling flow

Visual design of the guided selling flow.

Visual design — coffee bundle flow

Visual design of the coffee bundle flow.

Visual design — bundle page

Visual design of the bundle page.

Initial Phase 1 Launch

Once the discovery and purchase flows were complete, we launched them first. Post-launch insights revealed:

  • Coffee machine sales 2× year-on-year.
  • Our guided selling flow converted more machine purchases than the traditional product page experience.

This was early data after a few months, but it was a huge success.

Phase 2: Unboxing Experience

With the shopping experience live, we focused on finalizing the rest of our end-to-end solution — unboxing, first sip, learning and continued education.

I designed a mid-fidelity unboxing experience where users could scan a QR code in the box to start a virtual machine setup, including a Breville account creation step to register their machine. I also added a step to remind users about using fresh coffee — a major reason coffee tasted bad when skipped.

Low fidelity unboxing and first use flows

Low fidelity unboxing and first use flows.

Wireframe explorations — unboxing flow

Wireframe explorations of the unboxing flow.

Wireframes — tasting flow and registration

Wireframes of the unboxing 'tasting' flow and registration.

For the post-setup experience, our team worked with Breville's content team to design a 'learning hub' — a learning experience for new customers that directly targeted the skill gap issue causing machine returns. Users who registered their machine during setup could access the hub online: video tutorials from Breville's content team explaining how to dial in espresso settings, all the way to advanced latte art. Since users registered their machines, tutorial content could be filtered by machine type — helping new customers ramp up, get the best from their machines, and in the process reduce support calls and returns.

Visual design — learning hub desktop

Visual design of the learning hub.

Mobile learning hub

Mobile learning hub.

Phase 2 Launch

I left Astound Commerce before the phase 2 engineering work completed, however the learning hub launched in Q1 2023. Overall I was really happy with this project and its success. The scope was extremely wide — spanning discovery, purchase, setup and learning. The Breville team were amazing partners who challenged us to design a unique multi-platform solution. Phase 1 was extremely successful with big wins for machine sales and a clear success for the coffee solution buying funnel. I felt our team delivered a unique custom solution that helped customers find not only the best machine for their needs, but the best coffee experience overall.

More projects

No Edit
← Previous
No Edit
Nespresso Homepage
Next →
Nespresso Homepage