Team
-
1 x Product manager
-
1 x Product designer
-
Engineering team
Role
-
Research
-
Lead Designer
Background
Recently the About You app was updated to use the new About You design system 6.0. But until now the checkout was left untouched. The goal of the project was to create a new concept for the check and update the UI to 6.0.
My responsibility was to create a new UX concept with the aim of improving the abandonment rate, adding an address book feature, and improving the way payment options and carrier options are displayed and selected.
The app is responsible for around 42% of income from article sales in Germany and 26% of About You customers. This makes it the highest revenue generator amongst app, mobile web and desktop, and the second highest for customer volume. Interestingly, 98% of these customers are returning customers.
Research
I started by interviewing stakeholders who had worked with the checkout over the years, this included Director of Checkout, Director of Product, app, mobile web and desktop Circle Managers. I wanted to find insights into what was currently working with the checkout and what were some known problems. We analysed data and discussed customer feedback to collate all the issues. We then all aligned on the specific goals of the project.
Analysis
As the majority of users are returning customers we wanted to add an address book feature so customers could save and organise multiple addresses. Currently the app only saved the last address you used.
The amount of payment options available to customers had increased from 5 to 12 since the original checkout design. The way these options were displayed wasn’t very appropriate for so many options. The majority of them are hidden from users and take multiple scrolls to browse through them.
Many users seemed to be adding gift card codes in the voucher input field. Indicating either it wasn’t clear what the difference between a voucher and a gift card was from a user point of view or that it wasn't understandable what information should be entered into the field.
There are many scenarios in which the option to select a carrier may or may not be available. At the moment this is very confusing. Options were selectable when they shouldn’t be and therefore throw up errors when picked. Having these options as well as the cluttered payment select created a very visually overwhelming experience so I wanted to improve the clarity of each checkout step. It would be a UI challenge to incorporate all these different options without increasing the number of steps.
The abandonment rate is currently 80%, which is currently higher than the average documented online shopping cart abandonment rate of 69.57% (<https://baymard.com/lists/cart-abandonment-rate>). We can only speculate right now as to why that is but there appears to be a lot of customers leaving the checkout process to return to a product detail page of an article in their basket. With this in mind I wanted to explore ways for customers to check product details without leaving the checkout process and see if this has any effect. Also having an open field for voucher input can often encourage customers to go hunting for a voucher code, therefore leaving the checkout process.
I created user flows for all the buying scenarios including new and returning customers. I then helped the Circle Manager to put together a document outlining all the edge cases and technical restraints, which would be our reference throughout the project.
Ideation
I began by creating simple wireframes exploring different ways we could solve the problems, which were discussed with stakeholders and iterated on. Once we were happy with the direction I moved into more detailed and slightly more high fidelity mockups. Doing this really helped stakeholders get a better understanding of what the final, more polished UI could look like, helping to sell the experience to everyone involved.
Prototyping
I created a lot of clickable prototypes to help us get a feel for how the checkout would function and how quickly information could be added. The most challenging part was the courier information. Due to multiple carrier scenarios many questions were raised, such as, if there is no option to select Hermes or DHL do we need to display any information at all? What does a customer gain from having this information if it has no effect on delivery time?
I wanted to make the checkout steps clearer so a customer understands where they are in the process and how much more information they need to enter. So each step now represents one piece of information. This helped greatly with the increased amount of payment options. They are now a list of a separate screen which makes them easier to browse and select. This adds an extra click but understanding of the product and what you’re being asked to do is more important than the amount of clicks. The completed steps are smaller and only display the information you have selected.
We decided to always show the carrier even if it wasn’t a selectable option, this way the structure and UI didn’t have to radically change if the carrier was a selectable option. It is also part of the delivery address step rather than its own step, this way the amount of steps doesn’t change from order to order. It’s simply a non-mandatory option if available with the default set to DHL. We choose DHL because it is the overwhelming preference of customers.
The incorporation of an address book feature makes a lot of sense. From data we know that a lot of customers have parcels delivered to different addresses from their homes. So it stands to reason they would need at least two addresses saved which at the moment the checkout cannot do.
To help differentiate between a voucher and gift card I made the gift cards into a payment option rather than a separate input field. This should help customers to understand the difference between the two. The voucher input field has been replaced by a smaller link which opens the field. We hypothesize that this may help reduce abandonment by discouraging customers from leaving in search of a voucher code. If we make it a smaller option then only customers who already have a voucher code will be looking for the option.
You can now quickly check product details without leaving the checkout process and the checkout will also save your progress.
Learnings
It was really important to have short feedback loops while working on this project as it helped to keep everyone aligned and made sure we were all on the right track with regards to direction of ideas. Some more complex flows, like the carrier select, required a lot of trial and error so I wanted to avoid a scenario of taking one solution too far without exploring other routes.
Working with so many stakeholders and different departments was a hard challenge at first but got easier once we settled into a routine of feedback loops. The early wireframe stage was tough because we had a lot of ideas and a lot of feedback from managing directors. I found that presenting more polished wireframes which were closer to a finished UI helped with the presentation and feedback improved due to this.
Impact
The checkout seemed to be performing well in the first few weeks with abandonment rates being reduced to around 72%, more inline with industry standards and looking a lot healthier overall.