Project: ASOS Shopping App

Responsibilities: UX Design and Research

When you've been at a company for a while, a project can come around twice or more. In this case for me, it was the ASOS shopping app on iOS.

One of my first projects at ASOS was the shopping app so I was intrigued to see where it could be taken with a more modern approach, and a more learned version of me at the helm.

Getting to grips with the problem

On the face of things, the ASOS app was doing pretty well. The app I was a big part of in 2013 was still well out-performing other areas of the business considering it's lower customer base, and lack of full internationalisation.

In UX, there are always improvements to be made to any experience, however well it currently performs.

So that led me into asking the initial questions: where is our current app lacking? I decided on a formative user test, where I gave participants some regular tasks that they'd perform on the ASOS app, and observe where the issues and opportunities were apparent.

There were some key areas that stood out:

  • Navigation: it was not very easy to get to key categories due to the long list of links
  • Home page: Key proposition messaging was missing, and it wasn't clear what you'd be clicking though to
  • Product details: participants felt that there was a lack of information on the app pages compared to what they see on desktop (unfortunately, at the time, a limitation forced on the app due to an API issue)
  • Conversion: While better than mobile web, conversion was still some way behind desktop, and we were keen to improve that considering a lot of traffic was (and still is) moving to mobile.

There was, however, generally good feedback overall about cleanliness and ease of use, but very few words used to indicate delight. On top of fixing the usability issues we'd identified, adding delighted seemed like a no-brainer. It's a core part of what makes a good UX a great UX.

Starting form scratch

At the same time as approaching this formative recent, the company strategy had taken a decidedly mobile-first direction. I, and others working on mobile platforms were given the challenge: what would ASOS look like if it were truly mobile first?

So, myself and a team of others set about imaging what this would look like.

App Experience Map

 

We used a process that IDEO and Google recommend called Product Sprints. This method is useful for completing a lot of conceptual work in a short space of time. It involves a lot of sketching and discussion, several rounds of user testing in quick succession, and an end product that is surprisingly high fidelity given the time taken to complete it.

 

At the end of this process, we had a working app that let you browse the ASOS product catalogue in a much simpler and fluid fashion than what we had (looks great right?), and several other enhancements too such as wishlists, the ability to quick-buy and a personalised home screen.

Adjusting to reality

When it came around to formalising the designs, and assessing the technical details of building this app for a full customer release, it quickly became apparent that ASOS was not ready for several of the changes suggested in the concepts. The branding was especially picked up on as "un-ASOS".

That was something to be expected, but several of the ideas in the concepts were valuable enough to push for. These included:

  • Larger, more engaging product imagery
  • Smoother, more delightful animations
  • A clearer, easier navigation
  • A more interesting and dynamic home screen

The great thing about the conceptual work is that it helped many people at ASOS to understand the possibilities of positive change. Elements like text labels and titles at ASOS are not optimised for mobile use, and it was clear when people could compare the concept against these elements, that changes should be made in the future, and they'd be beneficial for the user.

Simple documentation

As the team producing this app was an in-house team, providing a good idea of specific user flows was the bets approach. Annotation more detailed than this would have been superfluous, as core details and acceptance criteria were recorded in Jira (process management system). This meant that referencing the visual flows was easy and unobtrusive, and low level details were captured and placed in a system that development used as  their project planner.

 

And a slightly more complex diagram, requested by the platform architect. He wanted to understand the link-ups between each screen, as an app doesn't really have a strict hierarchy like a website, and it mattered to the solution they were going to build.

section_interaction_map.png

 

Adapting

The iOS development team are a talented group of people, and their opinions are incredibly valuable. Rather than dictating the UX, it was important to involve the development team at all times, to make sure than anything I designed was feasible, and also to allow them to make their opinions heard. A passionate, knowledgable developer is an incredibly valuable asset for a company, and it's important to keep them engaged.

 

Testing

User testing was continuous throughout the project. Every time we iterated, we tested. It was the best way to make sure we were releasing a safe, well validated app.

We tested prototypes like the following via UserTesting.com and in person:

http://llsh2v.axshare.com/iphone.html

(We also have videos of the participants that aren't publicly available for legal reasons.)

User Acceptance Testing was as important as ever, and we regularly downloaded the "alpha" version of the app to run through any changes thee developers were making. The build process took about six months, so it was important to keep testing throughout to make sure we weren't missing anything.

 

The end result

See for yourself here:

Screen Shot 2016-11-22 at 09.07.41.png

 

...or search for ASOS on the iOS app store. Hopefully, when you do, you'll be able to see a 5 star rating.