Introduction
ASOS.com is an international online clothes retailer. Their mission statement is ‘to become the world’s number-one destination for fashion-loving 20-somethings’.
The ASOS board were searching for an internal initiative to help promote ASOS Design products, which have a greater profit margin than their other products.
In order to help generate ideas for this, people within the company formed teams to work on ideas to present to the heads of retail and technology, with the most promising idea to receive funding and become a live project.
I joined a team as a UX designer.
Ideation
The first step in the process was idea generation. We had already decided that we wanted to use a new outfit-creating API, created by a senior developer on the team.
Much of the work at this stage was around deciding the best way to integrate the API into the existing website. We also had a very short time to deliver a solution so had to work as efficiently as possible.
To facilitate this, I led a session of ‘Crazy 8s’, training the other team members on the process. I also led the sharing and discussion section at the end. Ultimately, we decided to use user’s past ASOS purchases to generate outfit recommendations based on ASOS Design products.
Wireframing
The next stage in the project was to generate some wireframes the developers could use to start creating the user interface. As time was of the essence, the initial designs were mostly low fidelity wireframes which I could use to quickly gather feedback from other team members and other colleagues in the building.
Using this process of rapid feedback, I was able to generate wireframes which were both user-friendly and technically possible.
On the left are two examples of wireframes I created for this project.
These were still low fidelity wireframes, so I was able to quickly tweak them as I received feedback from the developers on how much was possible to do in our given time period.
At the time, I struggled with linking the past purchase section with the outfit recommendation section, so I iterated the design here a few times.
I spent a lot of time here carrying out guerrilla testing of my paper designs with my colleagues, this helped me to rapidly iterate on the designs within the time constraints of the project.
Design
The next few pages show higher fidelity designs which are based on the wireframes I had created previously, but demonstrate how the feature would work on ASOS’s website.
The first part of the design was a CTA on the ASOS home page to help drive traffic towards the new outfit builder.
The initial brief stated to use the ASOS DESIGN branding as much as possible, so I put that on the CTA along with a gradient reminiscent of the existing homepage CTAs at the time.
This is the main outfit builder page which I designed for the project. It was important to use the existing look and feel of the ASOS website, so I used familiar styling as much as possible.
There are two main elements to the design: the past purchases layout at the top and the recommended outfit layout below. Users select the past purchase to view the outfit, and can toggle between purchases and outfits.
It was difficult to carry out user testing on this project due to the reduced timespan, so I mostly carried out guerrilla testing with colleagues. One result from this testing was adding the colour purple to the design, to help link the two sections in the user's mind.
This again shows the same page, but with a different past purchase selected.
Users could generate multiple outfits based on the same past purchase. This gives users greater choice of products and allows them to have some control over the process, as well as aligning with the business goal of upselling ASOS Design products as much as possible.
I also added the ability to save items or add them to the bag directly from the recommended outfit block. This creates a frictionless experience for the user.
Result
My team and I presented the results of the project to the Retail and Technology board members, as well as other important stakeholders in the area.
Our project was well received; enough to be placed on a future backlog of ideas.
Ultimately, it was a great experience to work with a team of developers to create a functional user experience in a tight deadline. It forced me to iterate extremely rapidly and to adapt to feedback. I also learned to balance user experience with what is technically feasible.
Finally, it was great to work on a new feature for an existing product. Balancing all of these aspects of this project was a challenge, but one that I relished.
