Nespresso

Creating a better online checkout experience.

Role: User Research, User Experience & Prototype

Brief

As part of a design challenge, I had the task to redesign the Nespresso delivery selection web page within the ecommerce checkout flow. Initially, I went over the account creation and checkout flows and took notes on what was working and on what could be improved. This first UX audit was necessary because I needed to understand the online purchasing experience before I could start interviewing Nespresso customers. I decided to solely focus my efforts on the desktop version of the Nespresso website as generally around 70% of total ecommerce purchases are made via desktop computers.

Starting with people

I did not have data on Nespresso’s online customers, but I assumed that they are working professionals aged 25—60 who are looking for convenience or have no other choice (Nespresso stores are too far from where they live). I defined users this way because I believe that they are the primary demographic to which Nespresso caters. I based my hypothesis on two things. First, the coffee drinking habit only really starts when you enter the professional world. Second, I believe that customers over 60 years old might not feel comfortable buying products online and would prefer to go to a physical store or even to order by phone. All the people I interviewed fit the above age range and had either used Nespresso’s website or considered using it to order their capsules.

User testing goals

The goal was to uncover UX pain points in Nespresso’s online checkout flow so that I could improve the overall user experience and therefore the brand’s perception in the customers’ eyes.

TEST PARAMETERS

I decided to test the Nespresso checkout flow (what) with existing Nespresso customers that already buy their coffee online or at least consider buying it online (who). I first asked my friends on Facebook, but my sample was too small and consisted mostly of young adults, so I went in front of a Nespresso store and did some guerrilla testing using an iPad (where).

Asking my Facebook friends their e-commerce experience with the brand.
Asking my Facebook friends their e-commerce experience with the brand.
Interviewing a customer in front of the Nespresso store in Lille using an iPad
Interviewing a customer in front of the Nespresso store in Lille using an iPad.

TASKS

I asked users to do the following tasks on the website:

  1. Pick products that you would like to buy and proceed to the checkout.
  2. Change your delivery address because you recently moved to another place.
  3. Pick your favorite delivery option and go to the next step.
  4. Go back, pick another delivery option and go again through the checkout.

To help users go through these tasks, I gave them pre-defined scenarios such as this one: “Imagine, you recently moved to Aix Les Bains, a small city in the south-east of France and have no Nespresso capsules left. Go on the Nespresso website, change your delivery address and buy your favorite coffee.”

USER FEEDBACK

I gathered and ordered user feedback by the level of frequency of the following type of comments. I then grouped the issues into five distinct categories.

All the user feedback collected and organized into five distinct categories
All the user feedback collected and organized into five distinct categories.

After gathering user feedback, I prioritized the issues based on how important I expected them to be to users and to Nespresso.

A graph that shows which features should be addressed first
A graph that shows which features should be addressed first.

MY REDESIGN PROPOSAL

I believed that the main UX pain point in the checkout flow was the number of checkout steps. Every new step in a checkout process increases the shopping cart abandonment rate, reduces the conversion rate and negatively impacts the user experience. Therefore, my main goals were to reduce the number of steps and to address the main issues raised during my user interviews.

The “delivery and payment” page with the express delivery option selected.
The “delivery and payment” page with the express delivery option selected.

The first thing I’ve done was to merge steps two, three and four from the current checkout process into only one step to improve the user experience. I also increased the visual difference between steps to make sure that it is very clear for users which step they are on.

I changed the delivery icons because they were the same even if one delivery option was faster than another. I also added the planned delivery date so that users don’t have to think/guess when their order will arrive. I also added the comment saying that it is mandatory to have someone at home during delivery.

In the current version, the shipping costs policy is not very clear and leads to a lot of user confusion. Therefore, I added a marketing push that is only displayed when the basket contains 150 or 300 capsules. The idea behind it is to push an additional 50 capsules to the customer as well as to be more transparent about the shipping costs policy.

Changing the delivery address directly on the “delivery and payment” page.
Changing the delivery address directly on the “delivery and payment” page.

I made it very easy for customers to change their delivery addresses following Amazon’s design pattern.

Editing the delivery address.
Editing the delivery address.

In the current version, input field errors look very aggressive and hurt the experience so I made them less scary and more useful. In addition to avoid user errors, it would be good to only allow inputs that make sense. For example, French users should only be able to enter numbers in the “zip code” field. Finally, if there is still an error, it should be displayed as soon as the user clicks out of the field or while he is typing, but surely not after the form has been submitted.

Selecting the delivery option directly on the “delivery and payment” page.
Selecting the delivery option directly on the “delivery and payment” page.
Choosing a point of delivery location.
Choosing a point of delivery location.

This screen is where customers can pick a delivery partner location. I made the search bar longer because in the current version, customers can only see around 20% of the text they are typing. I also got rid of the “shipping costs” because I do not believe that it should be on this screen. I finally added filters based on what users told me. They want to know which shops are open on Sundays and Mondays. I decided then to also add the “point de collecte” filter.

The “delivery and payment” page with the point of delivery option selected.
The “delivery and payment” page with the point of delivery option selected.

Please keep in mind, that this redesign was part of a challenge and that time was very limited. I’m currently writing a more detailed article on Medium about this project but until then if you want more details, don’t hesitate to check the commented version of my Invision prototype.

Previous Project
Arval
Next Project
Ibis