Nespresso

Responsive design of Nespresso’s home, e-commerce and capsule info pages by implementing an user-centred design process.

ROLES

Product Designer, User Researcher, UI Designer

TOOLS

Figma
Adobe Photoshop, Adobe Illustrator

PLATFORM

Desktop, Tablet, mobile

TIMEFRAME

4 weeks (April 2021)

Development Process

Discover

User Research, Accessibility analysis, Heuristic evaluation, Competitive analysis, Survey, User interview, Usability test.

Define

Thematic Analysis, Affinity and Empathy map, Data analysis, Personas, and User journey.

Develop

Site map, Style guide, Atomic design, Mobile first, Sketch, Wireframing, Prototype.

Deliver

Wireframing, Prototype.

What is Nespresso?

“Coffee is at the heart of all we do. Yet consumer pleasure is why we do it.”

The Nespresso story began more than 30 years ago with a simple idea: enable anyone to create the perfect cup of espresso coffee – just like a skilled barista. What Nespresso is and what it stands for is rooted in its coffee expertise, its innovative spirit and the farmers it works with. Nespresso has spent the last 30 years fine-tuning our know-how, partnering with the finest craftsmen along the way.

Nespresso has developed a range of exceptional coffees, machines and services tailored to every preference, and developed to meet the strictest quality standards.

Its success is built on 3 key growth drivers:

  • Creating the highest quality coffees for our consumers and Club Members;
  • Creating long-lasting consumer relationships;
  • Creating sustainable business growth.

Consumers

I went through some online forums, communities, consumer reviews, and complaint websites (Reddit, Trello, Facebook groups, Pissed consumer, etc.) to get a general idea of who Nespresso’s users are.

  • Users:

The majority of them are looking for coffee shop quality at home. They look for solutions that fit their lifestyle: compact, high performance, good design, delivering best in class quality. They value quality as much as convenience.

Some reviews found:

“It’s expensive, but it’s worth paying for.”

“Nespresso is sooo chic.”

  • Non-users:

Nespresso doesn’t allow the customer to purchase coffee capsules from other sources. Some consumers complain about the capsule availability, distribution system, and the sophisticated image of the brand.

Some reviews found:

“Nespresso is super nice. But completely out of my price range. I need to get a job before I can think about Nespresso.”

“A coffee pod is so artificial! I love the smell of ground coffee in the morning, I can decide myself the dose depending on how I feel.”

Website Analysis

📸 The screenshots were taken in March 2021

I reviewed Nespresso’s pages taking into account: accessibility specifications, heuristic evaluation, usability evaluation, and UX laws.

Accessibility Analysis

Nespresso has a specific page for accessibility (https://www.nespresso.com/br/en/acessibilidade). This page shows all the features and guidelines that the website follows to make “Nespresso for everyone”. www.nespresso.com has been built to be accessible following the WCAG 2.0 Level AA.

Accordingly, I evaluated the website in line with the Web Content Accessibility Guidelines WCAG (W3C).

  • Color and contrast
  • Accessible labels for controls
  • Hierarchy
  • Alternative text for images
  • Layout/ Responsiveness
  • I went through the website pages, in different breakpoints, and checked the contrast between the background and foreground. These are the color issues I found:

  • It's important to avoid generic names, especially to not confuse people who use screen readers. Instead, according to W3C, it's recommended to use action verbs and a description of what the link or button is about. The homepage uses "know more" as the label for buttons. Furthermore, on the third image, it's not possible to read the button completely.

  • Using the web without a mouse (Tab order)

The first few tab orders follow a different direction than the rest of the page. It's also important to have a button to skip to the main content, so users don't need to press tab multiples times until they get to the main content.

  • Focus state

It's important to show the user where the focus is. After pressing tab a few times, it's impossible to see the focus states (which button on the page you are, with your tab pressed).

  • Informative images are missing alternative text, for instance the images to indicate the cup size.
  • Due to aging and visual disabilities, some users might prefer to zoom in on the interface. This is how the page looks when you zoom in 175%. Some texts blend into the background, and it's impossible to read.

Heuristic evaluation

I evaluated the web pages according to usability heuristics. Here are some issues that I found:

  • Error prevention
  • Fitts's law
  • Recognition rather than recall
  • UX writing
  • Overload of information
  • Consistency and Standards
  • Repeated information
  • It's only possible to buy capsules by multiples of 10. When you pick random numbers, the page will show an error message.

  • Related elements are a bit far away from each other. Moreover, the shop capsules button is repeating.

  • There is an intensity bar level illustration for capsules, but the page doesn't explain what this is about. 

  • The language is inconsistent throughout interactions. The system calls it "bag" and "basket".

  • The filters and capsules' specifications don't match or show a lack of information.

 

  • The E-Commerce webpage has such a long and tiring list. It might take up to 1 minute to scroll down the entire page.

  • Compared to the other icons and items on the page, the icons on the navigation look to be scaled up.

  • In some buttons, their texts/icons aren't well centralized inside the boxes.

  • There are 3 options to sign in and register email competing with each other.

The User Research & Data

From my desk research, I realized a significant gap between new buyers of coffee capsules and users who already have experience using/buying Nespresso products. My purpose of using quantitative and qualitative study methods is:

  • delve into the process of users ordering coffee;
  • find any pain points that might exist in the process of ordering capsules;
  • distinguish how the gap between different levels of experience is built.

Quantitative

Survey

👪There were 27 responses to the survey.

My purpose with the survey was to get to know users’ preferences, how they pick coffee, whether they have difficulty buying a new product, and how they reach out to help when they want to know specific information.

45%

already know which type of coffee they will pick

41%

look into new coffee flavors

41%

reach out for suggestions when buying a new coffee flavor

52%

access the website of their coffee brand to check for sales

100%

prefer to buy a high quantity of coffee and stock

Qualitative

User interview

👪 There were interviewed 5 people.

After conducting the user interviews, I could clearly understand the relationship of users with coffee, some particular preferences when ordering, and what made them prefer capsules to other types of coffees. All of them order coffee through their smartphones, in some specific occasions, a few of them would use their laptops. All of them stick to the same coffee brand that they’re used to; the chances of trying a different brand are rare.

Data analysis

For analyzing the data gathered, I used a method called Thematic Analysis. 

#1 – I went over the interview transcripts and highlighted promising insights and pain points, calling them “codes”.

#2- Later on, I moved the notes to a whiteboard, following an affinity map method.

#3- After that, I highlighted the key insights.

Moderated usability test

👪The test was proceeded with 5 people.

I designed a few tasks to understand the current website situation and comprehend how users order products through the website. I focused on two distinguished tasks: buying something particular to check the filter’s functionality; another one to order something that the user has never brought before to understand how they cope with and their preferences’ formula of choosing something.

Desktop / Mobile

If the person already orders coffee online:

1- Walk me through your usual coffee ordering steps;

General tasks:

2- Buy a new capsule flavor that you might believe it’s good;

3- Buy a capsule with intensity 8, makes a cup of 40ml and has a woody aroma.

💢 The intention is the ordering match with the following product: Indonesia

https://www.nespresso.com/br/en/order/capsules/buy-coffee-capsules-master-origin-indonesia-intensity-8

Optional:

4- Buy a milky taste capsule that makes a Cappuccino, with aromatic notes of Sweet Biscuit

💢 The intention is the ordering match with the following product: Chiaro

https://www.nespresso.com/br/en/order/capsules/buy-nespresso-barista-creations-chiaro-coffee-capsules

Key observations:

  • The homepage is too colorful in some parts. The buttons blend with the background; one user in specific got attracted by the colors, and said that the buttons disappear on the page;
  • Some users don’t access the product page info;
  • The website induces the user to buy by the intensity of the coffee;
  • Some users couldn’t find the filter;
  • Most users just saw the first part of the product page info, they didn’t scroll down through the rest of the page;
  • Users want to know the content without having to click on buttons;
  • All the users closed the pop-up notifications.
Data analysis

For analyzing the data gathered, I applied Thematic Analysis again. 

#1 – I went over the interview transcripts and highlighted promising insights and pain points, calling them “codes”.

#2- Later on, I moved the notes to a whiteboard, following an affinity map method.

#3- After that, I highlighted the key insights.

Then I summarized the sticky notes in an empathy map.

The empathy map helped to have a clear idea of the users and facilitated the creation of personas. I got to the conclusion of the following personas:

  • New customer
  • Experienced consumer

New customer

Experienced customer

Site map

My main focus was to work on the website structure for capsules, improve the user flow when ordering coffee, remove duplicated or confusing links, and let the links self-explanatory.

*I didn’t edit the structure of other features, regardless of capsules.

Sketch

  • Mobile first

    Due to the fact of all interviewees use their smartphones to order online, I'll proceed with the mobile first method for designing.

Style guide

Low fidelity wireframe

I firstly designed low fidelity wireframes for mobile.

Then I moved to other breakpoints

  • Tablet
  • Desktop

Screen flow

Interface

High fidelity wireframe

The takeaways

What I learned from redesigning Nespresso’s website:

1. An efficient data analysis method makes a difference;

Applying Thematic analysis to my project made me find so many insights that I’d probably have skipped. It has shown me how a structured method facilitates the filtering of data. 

2. Users want to know the content without having to click on buttons;

As noticed in the usability test, users look for clear and prompt information. Having as few clicks as possible is fundamental.

Thank you for scrolling

0
px

Other projects