Project: ASOS Product Page

My Responsibilities: UX Research, and Design

ASOS is an retailer first and foremost. For a retailer, the most important aspect of any website or service is how the product is presented. As the ASOS product page hadn't been tackled for some time, the layout had been optimised for a time when laptop screens were smaller on average. This meant that, among other issues, the product itself was not the primary focal point that it should have been.

 

I wanted to remedy that.

The first task was to decide which elements were the most important. Clearly, elements like the imagery, title and price, size and colour selection were important. But what else? It seemed to me that the elements on the right hand side, while obviously useful for some customers, were causing a visual distraction. When a customer is viewing a page of this nature, they're relatively far along the decision making process. It didn't make sense to me to make cross-selling an up-selling almost as prominent as the initial product. How would a customer make a decision given that much info?

I decided to ask a few test participants what they thought of this hi-fidelity wireframe:

ASOS product details user testing 2013

The initial user testing proved positive when compared to the older design. Elements that seemed to indicate I was going in the right direction:

  • The larger imagery throughout appeared to be a positive change
  • Easier to select colour and size
  • Addition of "people wearing this" was mentioned as something positive and unusual, a delighter
  • Hiding the product info did not cause any major issues in comprehension

User challenges generally came from labelling issues, which I expected. Other issues came from the business. Unfortunately, as is sometimes the nature at large companies, the elements I'd added in this design, while quite commonplace on a page of this nature, were unachievable in the time frame. Elements like the clearer and easier to interact with sizes would require some hefty systems changes, and the company wasn't ready for them.

With the challenges recorded, I looked at an amended view of the page, on both desktop and mobile web (again, these are high fidelity wireframes, intended for use in user testing):

After UI design was completed, and after a further round of user testing root out any large issues we may have seen, we put the desktop layout into an A/B test. You'll notice a few changes in content in the finished design. Again, we had to compromise due to constraints added by the system at the time, but the changes were small and had little impact on the overall design and performance.

The results were excellent, giving a notable uplift in revenue.

This was a great example of a successful ecommerce project for a large brand, where the process was in the right order, the scope was realistic, compromises were made where needed, and the new design was tested safely before being built for real in order to assess impact and prove it worthwhile.

If you're wondering what happened to the mobile web designs, at the time of writing they're going to but put through an A/B test against what is currently live on the mobile website.