Project: ASOS Men's Homepage

My Responsibilities: UX Design, Project Planning and Facilitation

In 2013, the ASOS Menswear home page was in need of a little love. A key landing page for returning visitors, it was important to make sure this page was a snapshot of what was new and relevant about the ASOS brand for men.

The page template was originally designed to house a left hand navigation, and a very brief snapshot of what ASOS Menswear has to offer.

When we started to scope out the project, the first question we asked ourselves about the desktop layout was this: do we need the navigation? ASOS has long offered a hover/dropdown menu which contains all the category and brand links you'd expect. It seemed to us that duplicating the navigation tree was an outdated pattern and it had to go.

Thankfully, A/B testing proved us correct. There was no negative impact when we removed the navigational element, and the in-page content received more interaction. That was a good result which led us onto our next challenge: what else do we need to show on this page that's interesting?

We had a couple of ideation sessions where we brainstormed elements that might be of interest to men. It became clear quite quickly that if we featured all of the elements we talked about, we'd soon have a very busy, hard to manage page. But we still wanted the home page to be an interesting, engaging place to be.

With our brief established, I set out a plan of action for the team. We'd start quickly and simply with competitor analysis and high level layout sketches. Certain layouts weren't going to work with the content types ASOS produce, and we rooted those out quickly.

I put together the frameworks that I thought had the best chance of fulfilling the brief. On review, we quickly came to the conclusion that we wanted a multi-column, organic feeling layout to encourage scrolling. This also seemed the best compromise between desktop and mobile web. The organic nature of the content and layout meant elements could be moved around when needed if priorities changed. As all panels clicked through to a list of products, there wasn't a need to section the page into formal zones.

We steered away from large landscape imagery as it didn't fit with the way ASOS fashion was photographed at the time. We also wanted to give the impression of a Pinterest-style feed of content, to see how customers responded.

When we started to paper prototype, we created the various content section we thought we'd need and started to piece them together like a jigsaw. It was quite apparent that we were working with too much content, and we cut out some of the lower priority areas.

Next I created some simple wireframes for the Creative team to follow, so they could start to apply branding to the layout to see how it would hold together. Mixing together an array of content types was going to be tricky. I also formalised the layout guidance and shared with the relevant teams.

Lastly we reviewed our progress and worked with development to get it built. We originally planned an A/B test with the current design (now without a left hand navigation) but timescales forced us to put the page live without any testing. The driver for this in the end was the inclusion of an article feed that wasn't initially in scope.

As it turned out, the page performed excellently. Bounce rate dropped from 25% to 17%. Clickthrough rate of the page content rose, even though we added more content, and everyone was happy to see an on-brand, dynamic feeling page on mobile and desktop.

Over time, some content types were changed, removed or added as part of a normal optimisation process. Currently the page is still performing well. The organic layout is flexible enough for several promotion types. There are still challenges with this layout however, such as having too much freedom. A key learning for the future would be to have a more fixed layout approach.