Project: ASOS Checkout

My Responsibilities: UX Design and Research

The ASOS website has been live for several years, and the checkout that customers use every day has been present for many of them. As part of a usability review, it was decided that the checkout was one of the key areas at ASOS that was in need of some love. For new customers, the older checkout was a series of steps through a long form filling process that started with mandatory account creation.

ASOS checkout circa 2013

Getting the process right

As so much dependence was placed on this project, it was critical to establish an order of play and timelines at the start of the project. My process went as follows:

  • Understand the problem - where were the current pain points for users?
  • Research plan - how much research was needed and how long would it take?
  • Design plan - what would need to be designed for testing, and what could come later?
  • Ongoing support - how would I support the teams building a highly complex checkout?

Understanding the problem

The biggest pain points in the current checkout were:

  • Forced account creation - a scary personal form at the start of a checkout? No thanks.
  • Information entry - addresses and payment info seemed to be required in the wrong order, or superfluously
  • Confirmation - after the user places their order, they couldn't see when and where their order was arriving. They had to check their email.

The problems above were fundamental. The first issue alone seemed to be accounting for a huge amount of drop-out when we checked the analytics.

Research planning

It was important to establish a plan of action here. There would need to be several rounds of testing before any formalised documentation was produced, and the development teams would start to build the systems. This was my plan:

  • Competitor analysis - Which competitors, whether direct or not, offered the best checkout experiences and why?
  • Reports - were there any useful reports completed by respected industry bodies?
  • User testing (in person) - Two or more user tests, in person, to assess any large issues with comprehension
  • User testing (remote) - Preferably several rounds of testing on a good enough amount of participants

Some of our competitors were utilising really great checkout experiences, notably Nike and Apple:

Nike Checkout

You'll notice the odd grouping of form fields in the Apple checkout compared to Nike. I did too.

In user testing, the confidence level was important in this study, as the checkout is a critical part of the process, and we were going to base a lot of systems development on what we put forward. We went full fidelity with the prototypes for the first round of remote testing, as we wanted to get an accurate picture of how user were going to act.

The tests gave us several learnings about the patterns we'd designed, our approach to testing and the testing tool itself. Testing interactive prototypes of three separate checkouts in remote user testing is easily the most complex user test I've encountered, and the feedback from test participants reflected this. As much as we were reducing the friction compared to our current checkout, forms are rarely pleasant experiences and asking participants to go through three of them was, in hindsight, cruel and unusual punishment.

Design plan

Part of this happened before the research steps (we needed something to test with, of course).

After testing, when we'd decided what elements were important, and when I had debriefed the development and project management teams through the results, it was time to formalise the documentation. Several development teams were going to be using this documentation so it was important to produce detailed, accurate, and annotated wireframes and prototypes.

I had to plan when to deliver the assets that development required based on their delivery plans. In this case, the assets were required in this order

  • Desktop - New Customer
  • Mobile Web - New Customer
  • Desktop - Existing Customer
  • Mobile Web - Existing Customer

You'll notice that the desktop design were required before the mobile designs. As much as possible, I attempted to complete the designs in tandem, but as my focus needed to be on the desktop designs, that's where most of the thinking around flows and annotation was placed. 

Ongoing support

Throughout the checkout project, there were regular updates by the development teams, and several tweaks that needed to be made to the UX.

For part of this time I was dedicated to the checkout project, but as the project progressed, I mixed in time on other projects. While challenging, I became accustomed to this way of working and developed a mindset where I could quickly get back into the complexity of the checkout within a short timeframe when required.

Current status

At the time of writing, the checkout is being built. originally, this checkout would have been live but late in the build process a decision was made to move the checkout to a cloud based systems infrastructure. This meant, unfortunately, that the back end systems needed to be re-written.

Most of the checkout that will go live will be heavily based on what I worked on, which is an achievement I'm very proud of. This was one of the most challenging projects I've ever worked on, so the reward of seeing it live will be equivalently rewarding.