GOAL OF THIS CHALLENGE
ORDERING ONLINE REQUIRES A LOT OF ACTIONS FROM THE USER. EACH ONE CONTRIBUTES TO THE RISK OF DETERIORATING THE EXPERIENCE IN FAVOR OF ANOTHER BRAND.
TO MAKE ONE OF THESE INTERACTIONS MORE EFFICIENT, DELIGHTFUL AND MAKE THE USER ENJOY THEIR BUYING EXPERIENCE ON NESPRESSO.COM, WE ARE GOING TO APPLY A USER-CENTERED APPROACH.
I am going to improve the user experience of the checkout delivery webpage. In regard of the time constraint, this is the process I chose:
1) Analysis: I will analyze the current delivery page, from the global checkout process down to the details, to understand the challenges of this section.
2) Research: I will conduct qualitative interviews to get a better understanding of the users: their currents actions, their goals, their pain points and the emotional connection to their action. They will help me get a better understanding of the issues they can face. To complete this research phase we will explore some noteworthy UX studies on the delivery choices.
3) Design: We will start the design exploration to find the best way to synthesize the user approach into our new interface.
4) Prototype: We will produce a simple prototype, ready to be tested by a sample of users.
Here is the situation: The Nespresso webstore offers a lot of delivery modes. Some of them are always free, conditionally free depending of the basket total or charged. Some of them are delivered at a chosen address or at a pick-up-point, or even available in the next hour at a Nespresso Store close to you.
That is a lot of information, it asks the user to make a choice between various possibilities, also, the user has to make a lot of thinking to know when he is supposed to be delivered considering all the information displayed by the website.
The brief is to present a solution to enhance the delivery selection.
My goal is to make this section very clear, transparent, I would love to make our product efficient to have the user enjoy his experience.
The brief asks me to focus our efforts on the checkout delivery page, to do that, I must be sure I understand the entire process.
As we can see on the information architecture below, the process lead quickly to the delivery selection, but the user has already filled in a form with his delivery adress at this step. It means that this page will automatically contain his mailing address. We will see how this interesting point could benefit great improvement but how disturbing it currently is for the user experience.
1.2 CURRENT PAGE ARCHITECTURE
Information overload and bad layout.
Here, the options are ordered by: « Places » of delivery, and that is the smallest information, written way smaller than the delay of delivery and the price for example.
We can see 6 options on the screenshot, but in a browser you cannot see all of them.
There's no preselected options, I have to select one to go to the next step. There are two action buttons to go the payement, not at the best places in my opinion.
When I add a charged delivery, that's not added to the total price, this is something frustrating.
Also, there is at the top, on the right, a message which says that the delivery is offered. That is true cause some of the options are free, but actually it looks strange to have charged options close to this message. Moreover, during my tests, the price of the delivery changed (divided per two or even offered), without any information about the factor of this change. (Was it the kind of products added to the basket? Maybe the price of my order? So, how much I have to reach to get a free delivery?)
If we consider intrinsically the blocks "Delivery Address" and "Delivery Method", something looks wrong. We ask to the user the delivering address before we ask him if he wants to be delivered at his place. It would make sense if this information would be consider as a filter and more.
For example, on the image above, the address is Chambéry. The closest Nespresso stores (less than a hour by car) are Grenoble / Geneva / Lyon which is potentially great.
However if I go to the store pick up option, these cities are not offered to me. Worse, a message is displayed "There are no boutiques in the requested city." This is a missed opportunity for the brand to show his presence near the customer when there are 3 stores within 1 hour. It would be more logical to hide this delivery option if it looks unsuitable for a specific user, or show him the store list from the closest to the farthest.
1.3 DELIVERY SECTION
First of all, the UI is heavy and blurry. There are a lot of different text sizes, which confuses the information hierarchy.
The different options are classified by:
- Delivery at home/office - 24h / 48h
- Delivery at a pick-up point - 24h / 48h
- Delivery at Nespresso Boutique (this last option does not mention "when", even if that is the fastest way to get the order).
There are no "by default" option, we really ask to the user to understand all these information, with delay of delivery, prices, descriptions, "learn more".
1.3.1 CURRENT PAGE ARCHITECTURE
Each option is defined by an icon, a title which is pretty much the same for the different options depending of the delay of delivery.
It seems unnecessary to duplicate this box 5 times (actually it would be 6, but we realized during the test that sometimes, depending on the page’s language, the form does not offers the delivery at La Poste for the French market on the English version).
The icons are heavy because they appear a lot of times on the page. If we can question the fact that the "delivery at a collection point" would be a better fit to "delivery at home or office", we can not deny the icons are inconsistent.
1.4 RESPONSIVE ANALYSIS
I still focused my efforts on the webpage improvement, but it was important to quickly analyze the mobile version of the delivery options.
First of all, the checkout process is clearest on mobile. The unconsistency with the webpage version is notable, and even if the user centered approach we are applying now would be available for a big part of the mobile experience, we can directly be inspired by some features already existing here. For example, my basket is refreshed with the delivery charges, which is something missing on the current delivery choice on the webpage version.
Obviously, some consistencies does not make sense between the mobile version and the desktop one, for example, on mobile it looks more obvious to set the address before to select the delivery mode, on a dedicated page, meanwhile that specific point looks maladjusted to the webpage experience on desktop.
"...the average large-sized e-commerce site can gain a 35.26% increase in conversion rate though better checkout design."
The research phase is very important to make sure we apply the best user practices to improve the delivery selection page.
My first approach is to study data and UX analysis already done on this question.
To correctly address the user experience, we have to never suggest, always check. To do that, I will conduct 5 interviews, with various ages, genres and profiles (which in a more complete process would lead to create personas).
If we compare the current checkout process to this study, realized on 1044 adults living in the US, some informations are extremely relevant. But, let’s keep the focus on the delivery:
- 61% of the users have abandoned the process due to extra costs, like the shipping one.
We can see the importance of the price. On our checkout, the price evolves depending of the amount of the order, but that is not clear. It doesn’t specify how much I have to add to my cart to get the free delivery, and as we can see, that's something really important to the user's motivation.
- 16% of the users have abandoned the process due to a too long delivery.
It means that it is crucial to guarantee the access to the fastest delivery possible, display clearly the "longest time" of delivery to make it more acceptable. It would be interesting to define during the interviews, what is considered “too long”.
The eye-tracking on the right clearly shows what the user needs to know: When will my product be delivered ?
Our current interface just says: "24 hours" / "48 hours".
That information is not user centered, that is a business centered. We require the user to calculate when the product will arrive, that is an important painpoint . If I ask to be delivered in 24hours on a Friday, when will my command be really delivered? Too vague to take the risk.
It is something very important, and we can make the information clearest to the user, like in the following examples.
It's important to never assume, always check. We saw that, three notions are important in our delivery offer: Delay, price and localization.
Why do I interviewed users?
We have to listen to the user to understand their goals, their needs, their current pain-points and their emotional relation to the feature we are working on.
How did I proceed?
I chose to talk with 5 people from my entourage, face to face, during 15 minutes more or less. (These sessions were shorter than real ones, due to the time constraint of this exercise).
2 sessions have been audio-recorded, 1 has been done by text messaging and I captured the two others with my notebook.
The UX interview consists in a conversation, where the interviewer uses different techniques (The 5 why rules, the silence,...) to let the user express their opinions about a specific problematic, without having any idea of the interviewer goals.
I exchanged with 5 different persons:
User A: French man, living in the alps, 30 years old, executive in a french company, very connected.
User B: French woman, living in the alps, 30 years old, employee. Loves quality products.
User C: French woman, living in the alps, 24 years old, student. Commands a lot online.
User D: French woman, living in the alps, 58 years old, company director, not very tech savvy, do not order online frequently.
User E: French man, living in Paris, 27 years old, start-up founder, loves quality product, hi-tech and he's a Nespresso fan.
- User A - "I stop if I have to pay taxes, fees or delivery"
- User B - "From the middle of the week, I am affraid to be delivered next week"
- User C - "I don't want to spent time on the command"
- User D - "I am often afraid to not select the best option”
- User E - "I hate to have a cheap experience for an expensive product"
- The delivery is a crucial step in a checkout design
- Do not talk about "delivery time", but explicit the "moment of delivery".
- There are a lot of information, make them clearer through a better UI.
- Reassure the users during the delivery choices, and have them focus on other things such as their cart
- Make this page smart (consider using the user’s localication, preferences, ...)
- Nespresso represents delightful experiences, it has to be the first principle of this redesign.
Started on paper, the design exploration is how our interface will show a lot of new good practices and goals to reach.
At the beginning of the project, during the analysis, I sliced the page in blocks, to produce a lo-fi version of the initial webpage. From this ressource, I produced the new design.
The first iteration was build on the idea that I should improve the notion of time of delivery to combine it with the moment of delivery.
It was pretty close to the current design of the page, but the new section was organized with a better visibility of the different options.
But, it was still heavy from a UI stand point, and mostly, the idea of giving these names to the different category wasn't good. Imagine a user is making an order on Friday, July 7 and click on "Next Day". Even if the information is displayed in the selected delivery, it stays frustrating for the user.
However, some ideas were good and I decided to go deeper in the concept for the second iteration.
Now, the moment of delivery is in the middle of the action.
We ask the user to choose when he wants to receive his order.
The page architecture is clearer, from the left to the right, the user easily choose the best solution and see the global price, before clicking on the only important action button of the page: proceed to payment.
The address bloc is gone. That gives the user more clarity on the kinds of delivery. The action is consistent, you define an address at the same place you define a pick-up-point. Moreover, it allows the user to set up more addresses directly into the interface, reducing the risk of errors.
As you can see, the interface remembers your choices (for example, once selected, the post office stays registered as your favorite one for this kind of delivery).
Now, you can see the total price evolving with your choices, which provides a transparency very important for the user.
At the end of the flow, you added a new delivery address, which now appears for your premium as for your standard delivery.