ASOS

THE FACE OF ASOS

ux / research / ui / art direction

ASOS is the second most visited fashion website in the world, with over 80,000 products and 9.9 million active customers. I undertook the challenging task of re-designing the menswear and womenswear homepage.

Understanding the challenge

It had been a few years since ASOS looked at their homepage, and the existing solution became a bottleneck for the business. The existing framework was difficult for content creators to use, and the layout was outdated and disjointed. The old site was neither responsive or adaptable to updates.

Our team identified challenges such as aligning over 50 key stakeholders across multiple departments, as well as creating a solution that’s adaptable for future expansions. On top of this, we needed to maintain engagement with over 12 million active customers.

 

What we wanted to learn

  • How do ASOS customers currently use the homepage?
  • What are customers’ attitudes towards the existing homepage, and what do they want from the refresh?
  • What are the business priorities, and how do they align with the customers?
  • Do customers shop different on mobile vs desktop?
  • How do we deliver a common responsive solution between Menswear and Womenswear?
  • How does ASOS promote key service propositions?
  • Is there an opportunity to creating different experiences between new vs existing customers, in different countries?

UX Research

In 6 weeks of research we used data insights, surveys, true intent studies, remote user testing, interviews and workshops.

View our findings

Research Insights

Customers use the homepage as a launch pad
Most customers go straight to search and navigation if nothing captured their attention (like a promotion or sale).

Existing website was difficult to digest
Customers complained about the homepage feeling ‘cluttered’ and ‘confusing’ due to the complex layout. They missed many of the key business propositions while browsing the page.

Mobile is key to success
Based on data, almost half of all sales on ASOS comes from the mobile platform. Being awesome on mobile wasn’t just an ambition anymore, it is a directive.

Customers want to be inspired
The editorial content on the existing homepage had mixed success, but customers told us it was important that they saw more style advice from ASOS.

 

Formulating a design plan

Designing home pages are challenging. Due to the sheer number of stakeholders in different departments, I felt it was risky to design complete pages as we would inevitably be hung up on the content, rather than the underlying framework.

By designing the homepage into a system of components, I could reduce feedback loops and subjective feedback.

Designing components

Breaking layout into building blocks, which will later be assembled into homepage templates.

Agile design

I could quickly move from wireframes to designs, by tackling each component independently.

View components (pdf)

Pixel perfect specs

Exporting sketch files to Zeplin, meant that the specs could be shared online to developers and other team members on the fly.

Putting it together

Once we were able to define all the necessary components, I worked together with the content team to come up with various scenarios that would use the same underlying set of components.

Axure prototypes

I used Axure to produce interactive wireframes.

View wireframes (Axshare)

password: asos

Early visual exploration

Given that we had a fairly tight timeline, I wanted to explore visual directions while the research was running in parallel. This included developing a series of mood boards, as well as setting up a sandbox of key views, workflows and interactions.

Separating design and content

One of the key ideas I had around flexibility was making the content and design live on separate layers – this meant that the business can update a specific layer, rather than the entire component. It also meant we had more flexibility for animation and effects.

AGILE PROTOTYPING

I began creating high fidelity designs as soon as each component was signed off. I felt this was important as many stakeholders reacted better to visuals.

To save time, I used Pixate (mobile) and Flinto (desktop) as they were quick to work with and compatible with sketch.

The result was very positive and received excellent feedback from the stakeholders.



User testing and iterations

We tested the designs with real customers once prototypes were created. This allowed us to move towards a metrics-analysed soft launch with more confidence.

The tests were attitudinal rather than behavioural. It was intended to flag any massive problems rather than prove any opinions, as the results can be subjective depending on the content.

Moderated user testing

ASOS customers were invited to help find usability problems and opportunities to refine designs.

Results and next steps

After a few rounds of designs, the new ASOS homepage was soft launched in the summer. We opted for a controlled release, first to smaller regions to get some solid data before we launch world-wide.

The change in the framework also meant that it will take some time for the content and creative team to adjust.

The designs were never a day one solution. Now that we have a flexible, dynamic set of components, ASOS can continue to build upon these foundation as the e-commerce and fashion landscape continues to evolve.

This is a unique website which will require a more modern browser to work!

Please upgrade today!