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.
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.
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.
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).
I asked users to do the following tasks on the website:
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.”
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.
After gathering user feedback, I prioritized the issues based on how important I expected them to be to users and to Nespresso.
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 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.
I made it very easy for customers to change their delivery addresses following Amazon’s design pattern.
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.
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.
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.