Disclaimer: This case study may contain copyrighted material the use of which has not been specifically authorized by the copyright owner. This case study has helped me to promote my capabilities and advance my education specifically in the area relating to user experience (UX) research and includes my personal opinions, satire, criticism and review. I believe this constitutes a ‘fair use/dealing’ of any such copyrighted material.

Nespresso Reimagined
Redesigning For the perfect coffee experience

Overview

With a pop of a coffee pod and a press of a button on the Nespresso machine, this seemed like the perfect birthday gift for my uncle. Little did I know, this simple gesture would pose a greater challenge. Now the Nespresso machine sits idle on the counter,  and I wanted to uncover the reason to it. For my uncle, accessibility was key; and a morning cup of coffee through the drive-thru was ideal due to the convenience. It had occurred to me that the challenge wasn’t the machine. Nespresso boutiques can be inconvenient to go to, and surprisingly, the online platform, meant to be user-friendly, posed similar barriers.

Timeline

October - November 2024
4 weeks

Design Role

UI/UX  Research
Wireframing
Prototyping

Tools used

Figma
Adobe Illustrator
Adobe Photoshop

The problem

Online shopping has become an integral part of our lives as technology advances. It is supposed to be fast, convenient, and accessible. As Nespresso continues to grow as a leading luxury coffee brand, it must also continuously update the e-commerce experience to be accessible for all ages of Nespresso owners.

Defining the goals

As I navigated through this redesign, I consistently kept some project, user, and business goals in mind. These goals provided valuable insights, guiding me on what aspects to prioritize and ensuring a strategic approach to the redesign process.

Project Goal
‍
Enhance user engagement, boosting online sales, and strengthening brand loyalty.

User Goal
‍
To easily browse and confidently purchase coffee pods.

Business Goal
‍
Optimize the website’s usability, visual appeal, and functionality.

The Process

For this redesign I will follow UX methodologies to reach the design solutions. It is divided into 5 parts:

  1. Emphasize: Understand and empathize with ideal users.
  2. Define: Identify user pain points, needs and problems.
  3. Ideate: Brainstorm ideas and create wireframes.
  4. Prototype: Create high-fidelity mockups with interactions to visualize and test their ideas in a tangible form.
  5. Validate: Conduct usability tests to gather feedback, then iterate and refine.

01/ emphasize

Understanding the Existing Design

I first wanted to analyze the existing design to observe the behaviour of the current website. This enabled me to comprehend its functions and gain insight into the user's experience.

Competitive Analysis

Now that I understand how the website works, I conducted two competitive analyses to assess the strengths and weaknesses of competitors' websites. This provided me with valuable insights to refine my strategies and enhance the user experience on the Nespresso website. The two websites I looked at were Lavazza and Keurig.

Strengths

  • Coffee navigation presents popular coffee collections in categories.
  • Very apparent packaging information with quick access to coffee information like blend, profile and roasting.
  • Sustainability information with access to additional information on each coffee pod page.

Weaknesses

  • No option to delete items from the shopping cart.
  • No detailed information on coffee intensity, flavour and profile.

Strengths

  • Promotional banner is clear with large text that is easy to read.
  • Easily navigate through different categories from the homepage.
  • Clearly displays packaging amounts for each coffee pod with prices automatically showing.

Weaknesses

  • The filter for the coffee page is hard to navigate.
  • No detailed information on coffee intensity, flavour and profile.

02/ Define

Surveys

As I wasn’t a Nespresso user I wanted to gain insight into actual Nespresso users' perceptions of the website, I conducted interviews with six consumers aged 25 to 42, allowing me to understand their experiences and preferences.

User Tests

After the user interview, I asked 4 of the participants to test the Nespresso website through Virtual and in-person Usability Testing. I wanted to see how they will interact with the website.

‍

Some of the tasks that I gave them during the testing were:

  1. Go to the homepage scroll through to see any promotions or advertisements
  2. Select coffee pod ( 2 participants were told to select coffee pods from the Original line and the other 2 selected from the Vertuo line.)
  3. Filter based on size or flavours
  4. Add as many coffee pods as you would like
  5. Take away one coffee pod selection that you no longer want
  6. Continue with shopping cart
  7. Find recycling information

How people feel about the current website

With all the information gathered from the surveys and interview testing, it was time for me to analyze all the research finding. I took all the information and grouped them into an affinity map. This will help me categorize insights that stood out and focus on their pain points to turn them into design opportunities.

What was found?

Personas

From the information gathered through surveys and interviews, I now have an understanding of potential users. I created two personas to empathize with and better comprehend the frustrations, goals, needs, and motivations of the website’s ideal users.

Journey Maps

By analyzing Benjamin's journey, I gained deeper insights into his interactions with the website, allowing me to identify specific moments of frustration and areas for improvement. Visualizing the process an ideal user goes through before and after using the website allows me to identify pain points and opportunities. With these insights, I am equipped to create solutions that enhances user satisfaction, engagement, and overall usability.

Identify the problems

Based on all the information from surveys, interviews, user personas, and user journey maps, I can now identify all the pain points on the Nespresso website.

Pain point #1 : Home page

  1. Homepage was challenging to read due to the excessive text and numerous new items and promotions displayed
  2. Cluttered layout making it difficult for users to focus on specific products
  3. Lack of categorization
  4. Undistinguishable buttons

Pain point #2 : Coffee page

  1. Insufficient product information
  2. Additional information like caffeine content, flavour notes, the origin of blend and capsule size requirements on different pages

Pain point #3 : Shopping cart

  1. No warning about 50 capsule packaging requirement and users are unable to proceed with checkout
  2. No option to remove items from the cart unless you manually input the number '0'

03/ Ideate

After identifying the problems, I crafted a solution design, creating interaction designs with user flows, information architecture, and wireframes.

User Flows

I designed a user flow outlining how a user would navigate the website, from purchasing coffee capsules to deleting items if necessary. This user flow serves as a visual guide, providing a clear understanding of the journey from start to finish when using the application. Here, specific actions users will take can be mapped along with  interactions that occur between them. The new features are highlighted in green.

Information Architecture

This information architecture provides a clear layout of the website. The updated navigation ensures seamless user interaction, enabling users to easily find what they need without any complications. The new features are highlighted in green.

Wireframes

These wireframes represent initial concepts, providing a quick visualization of the fundamental Nespresso website layout. Leveraging insights from the competitive analysis, as well as addressing previously identified pain points, I use these wireframes to brainstorm potential redesign strategies, focusing on enhancing the site's usability.

04/ Prototype

After identifying the problems, I crafted a solution design, creating interaction designs with user flows, information architecture, and wireframes.

Pain point #1 : Home page

Currently the promotional banner advertising free shipping on the homepage is difficult to see. The homepage also has inconsistent buttons and lack affordance. I made th promotional banner more noticeable an kept the buttons on all pages consistent to avoid user confusion.

Before

After

Pain point #1b : Home page - Coffee Information

The information for all coffee capsules are scattered throughout the existing page and users have to take time to look for additional information like flavour notes and size of capsule. In my redesign I allow users to hover over coffee pods to read additional information.

Before

After

Pain point #1c : Home page - Main Navigation

There is a lack of affordance on the main navigation maing it difficult for users to know which elements can be clicked. I simplified the main navigation and added a "What's the difference" for user who need clarity on the differences between Oirginal and Vertuo coffee capsules.

Before

After

Pain point #2 : Coffee page

There is a lack of affordance on the main navigation maing it difficult for users to know which elements can be clicked. I simplified the main navigation and added a "What's the difference" for user who need clarity on the differences between Oirginal and Vertuo coffee capsules.

Before

After

Pain point #2b : Coffee page - Capsule Information

Information on coffee capsules is missing like the information on flavour notes. Now users can see right away the flavour notes for each coffee capsule.

Before

After

Pain point #2c : Coffee page - Coffee Filter

The filter does not include decaffeinated drinks and the flavours from the aromatic profile are not organized which can be difficult to view when it is cluttered all together.

Before

After

Pain point #2d : Coffee page - Individual Information

There is a lack of visual hierarchy for the information card that does not guide users to important parts of the page. Taste and origin of coffee capsule is currently written in the description with a lot of text. The redesign now makes it easier to read with options for users to discover each capsule's profile, blend, caffeine content, and preparation with a click away.

Before

After

Pain point #3 : Shopping Cart

Based on Principles of interactivity, the shopping cart does not mention free delivery when you spend over $75 as promoted in the homepage. There is also no warning of a 50 capsules minimum packaging requirement which can make users frustrated and confused when they cannot proceed to checkout. There is also no option to remove items from the cart.

Before

After

05/ Validate

After completing the prototype of the website, I conducted usability testings on Figma, gathering valuable feedback on my redesign. Through this process, I identified areas for improvement, ensuring that the final version of the website delivers an optimal user experience and addresses user concerns effectively.

Suggestions

  1. Use clear language to avoid confusion.
  2. Make sure all text is easy to read and increase contrast if needed.
  3. Utilize vibrant colors that capture attention and stand out effectively.

Usability Testing Results

Final Thoughts!

This was my very first redesign project! I was both excited and nervous about this project. Despite my fear and nervousness, I recognized it as the perfect opportunity to refine my design skills. I am eager to continue practicing and further expanding my skills in the future!