Nescafé Dolce Gusto –
UX and interface design for an office coffee machine launched in 2018.

Client:
Nescafé Dolce Gusto
Agency:
Ogilvy Germany
Year:
2016

Confidential information has been omitted in this case study.
The information below is my own and does not necessarily reflect the views of Nescafé Dolce Gusto.

NESCAFÉ Dolce Gusto is a coffee capsule system from Nestlé. Being more affordable than Nestlé's other coffee capsule brand, Nespresso, Dolce Gusto stands for fun and creative coffee drinks that can be easily made by non-professionals.

In an effort to move beyond home kitchens and into the office environment Nestlé built a Dolce Gusto office machine targeting small businesses and startup teams.

As this was the first Dolce Gusto machine to have a built-in screen the client was looking for guidance on interface design and tasked their industrial design studio to partner with our agency's design team to create the best coffee making experience.

My role

Translating state diagrams into user flows

I worked with the industrial designers to understand the capabilities of the machine they were engineering, define a user flow and identify necessary interface and interaction points that would shape up an effortless user experience and our design scope of work.

Defining the user experience

I led the UX work all the way from defining the initial interactions through building low fidelity layouts of all the screens balancing business requirements with customer insights and into the prototyping and user testing stages.

High fidelity prototyping and usability testing

Due to strict technical restrictions I pushed for a move into high fidelity prototyping in order to ensure our UX and UI decisions were feasible and benefited the user of the end product. I developed high fidelity layouts for each of the core interactions, wrote design specifications based on production requirements, delivered screens for usability testing and adjusted based on feedback collected.

The challenge of keeping it simple

The coffee machine we worked on was the first one for Dolce Gusto with a screen. And that screen was not there for mere status output purposes. The industrial design studio developed a concept where the machine would integrate a capacitive touchscreen that would allow for multi-touch interactions.

An enticing idea, the screen introduced a lot of possibilities for interaction with the coffee machine. My task was to provide the industrial designers and the client with guidance on how to turn the screen into a helpful interaction point rather than a nuisance, a feature users would struggle through.

Prior to this making coffee with a Dolce Gusto machine was a very mechanical experience and I questioned how much of that mechanical simplicity would users be willing to give up for a richer experience.

How much interaction with a machine does one really want when the task is as simple as pouring a cup of coffee?

What we had was raw engineering documentation, including technical specifications and state diagrams. To put context around that I led the team through a quick discovery phase:

How do people get their coffee fix? I asked people to walk us through their coffee making routines so we could build the mental model already existing around coffee making and ensure our machine would not go against common sense.

How do they use coffee machines with interfaces? Together with industrial designers I watched people use other coffee machines with screens asking them to talk through points where they expected feedback and where they would like more control over the process.

What else is happening in the world of home appliances? I studied other home appliances on the market looking into what worked and what didn't in the interaction design they offered in their interfaces.

Armed with user insights I identified interaction points for the machine we were building defining which parts of the process will need to be translated to screens, which of these would require user input and which would play a status visibility role.

These screens were then mapped onto a machine and user flow diagrams.

Balancing user experience with business goals

Our initial vision was to use the advantage of having a screen and a smarter processor to bring the coffee making experience for Dolce Gusto to a new level. One of the ideas, for example, was to allow machine admins to customize the drinks displayed and their order catering to their team’s preferences or capsule availability.

Moving forward, however, I learned that Dolce Gusto saw this machine not only as a standalone product, but also a sales and marketing point. The rationale being that office employees using the machine can stay informed of all the available drinks and products, which might drive them to buy more Dolce Gusto products for their homes.

The idea of upselling the Dolce Gusto home system to office users also translated into a request for more continuity of traditional Dolce Gusto machine design. This meant that even though I was tasked with building a digital interface I had to find a way to pay homage to the traditional Dolce Gusto controls  which affected both the UX and some of the design elements.

Taking the high fidelity road

With all the core interactions mapped out and main functions defined for each of the screens I was ready to move into prototyping.

Meanwhile, the industrial design studio aligned on how the screen will be integrated into the final product and what technical capabilities would the screen and the microprocessor offer.

Initially planning to run this as a stage where quick mock ups could go directly into usability testing I decided we needed to adjust the course as the strict technical restrictions we were facing imposed a number of significant design constraints.

Screen resolution
The low resolution screen meant that to keep things readable we had to opt for bolder type and larger icons.
Touch accuracy
The touch screen was not as accurate as mobile screens people were getting used to, so we had to adjust touch target sizes to account for that.
Color range
Display’s low color range restricted the amount of colors we could use and the use of gradients.
Processing capacity
Low memory and processor capacity meant no video or complex rendering support. As animations were essential for visual feedback, we worked hard to find a way around settling on PNG sequences.
Seamless integration
The screen was meant to integrate seamlessly into the black body of the machine which meant the background for our screens had to match that black.
Designing around the strict constraints made the prototyping phase for this project into one of the most exciting and challenging work experiences I've had.

How do I make sure it works?

A designer can't overestimate the importance of seeing designs on the screen they're building for at every step of the process. This was especially the case when working with a very specific screen of a coffee machine.

We're all used to previewing designs on devices when designing for mobile apps or responsive web, but what do you do when you design for a coffee machine?

The answer was surprisingly simple. After some digging I found an Android smartphone, albeit a sketchy no-name one, that had a screen of a similar size and resolution to the one we would use in the end-product. I was saved!

At this point I defined the core user experience including the major interface elements and gestures for user interaction. As we were striving to build an interface that would prompt people to reuse gestures and interaction patterns that were common practice for mobile screen at that time, a lot of decisions were made based on best practices set by Apple's Human Interface Guidelines.

I also worked on consolidating the guidelines for the color palette, contrast ratios for text and background, font sizes and minimal sizes of icons.

All prototypes then went through rounds of user testing and adjustments.

Shall we brew a cup of coffee?

01

Adjusting the drink size

Traditionally in Dolce Gusto machines the size of a drink was determined by how long the lever was held in a position to pour water through the capsule.

A few coffee machines directly translated this idea into an interface that required users to hold a button in place while brewing until they're satisfied with the size of the drink.

Our quick interviews, however, showed that people expected to be asked what size of a drink they wanted prior to brewing, similar to a coffeeshop experience where they can "order" a specific size.

02

Brewing visualization and canceling brewing

I discovered people feel particular tension  when brewing starts. They get worried about the drink overflowing and unsure of how to stop the water. In the end, who wants to clean an office mess?

A lot of machines I tested did not show any type of progress or displayed bars and percenteges which were not relatable for people watching their cups fill up. They also lacked a clear cue to stop the process.

This is why I opted for an animation showing the cup filling up that would allow for clearer mapping. A clear STOP button was placed on the screen to give people an easy way out.

03

Coffee to milk ratio adjustment

Dolce Gusto machines allow people to make drinks with milk, such as cappuccino or latte macchiato, following the same simple steps as for black coffee. By pouring more water through the milk or the coffee capsule the ratio of milk to coffee in the drink can be adjusted.

The initial request was to copy this experience in the new machine by asking the user first to choose the amount of milk they wanted, then the amount of coffee.

Instead, I opted to use the touch capabilities of the screen to create an interaction that was more fluid and required fewer taps.

04

The two capsule order dilemma

Creating the experience for brewing a drink with milk provided an additional challenge because these drinks require two capsules to be used.

The order of the capsules is interchangeable, but the machine needs to know which capsule was inserted in order to pour the right amount of water through.

It was important to make the experience foolproof and ensure people were guided through coffee making rather than required to follow instructions. The solution was to add a clear capsule confirmation step allowing the user both to get reassured in his actions and give the machine necessary feedback.

05

Preparing custom drinks

One of the business requirements we got from the start was that the machine will not only be brewing pre-made drinks. In addition, it will provide flexibility to prepare a custom drink from any available capsules alternating between cold and hot water – an experience similar to a traditional Dolce Gusto machine.

Together with the client we defined that this would live as a separate custom mode users could switch to from the main screen.

As the custom mode was targeting users already aware of typical Dolce Gusto machines, the experience was modeled after traditional Dolce Gusto design.

Handing over to visual design

I stopped working on the project at the detailed visual design phase as visual designers polished off the graphical elements of the interface.

The UX and interface principles however remained largely unchanged and made it into the final product.

The machine launched in mid 2018.

Next Project: Argentum Camera

personal, UX / UI design