Emma Rosenberg

Redefining checkout - research and design

Farfetch is an e-commerce company that brings the world’s best luxury fashion to an international audience via its marketplace platforms.

Farfetch

↑ Pre-existing checkout


The starting point

The existing checkout had a number of flaws that had been identified, and some that had been surmised - but further research, data analysis and exploration was needed to really understand where the existing checkout flow was failing and succeding for users, and how it could be improved overall. Mobile was also an area that particularly needed improvement. As a response to these challenges, my team and I created an initial 'brief' to work from. Initial hypotheses and assumptions were taken down, and became part of the brief, alongside issues and opportunities already identified.


Brainstorming

↑ Workshop with cross-functional team to determine current checkout jobs, pains and gains


Gather and assess the available data

First steps were to gather all the available data. This came in the form of extensive metrics from the data team on the checkout itself, including the checkout 'funnel' - that is the customer journey from shopping bag through to confirmation. We participated in a workshop to understand how these metrics affected the user journey, and also investigated the jobs, pains and gains associated with 'checking out'. We could use this information to identify the opportunities to improve the customer experience to affect key metrics and achieve business goals, such as increased conversion rates and decreased drop-off rates.





Benchmarking and competitor analysis

Additionally, we gathered all existing user testing data for the checkout, and conducted a benchmarking and competitor analysis project of 20 comparable checkouts, to compare the competitors and other checkouts across the web.We conducted an audit of the existing checkout, and third-party research papers such as the Baymard Institute's annual E-Commerce Checkout Usability study were also consulted, to examine their survey results and case studies of other ecommerce checkouts. After all the data was gathered and evaluated, hypotheses for a better checkout were written, to be tested in the design phase, alongside general recommendations for an improved checkout experience.



double

↑ THE 'DOUBLE DIAMOND' METHOD


Design approach

The 'double diamond' approach was taken - the aim is to research and explore widely at the beginning, then narrow the focus based on findings from the research phase. Then, based on learnings from that, another phase of exploration and testing or research takes place, followed by design work which is more refined, and is tested again. We had written a set of hypotheses to design for and then test - for example, one hypothesis was that a single-page checkout with certain features would perform better than a multi-step checkout by reducing obstructions and the users' perceived length of time to complete checking out.

We designed and prototyped options using a range of tools, including Sketch, Invision, Axure and HTML/CSS. For form fields, HTML/CSS was a fast and effective way for me to protoype interactions and test ideas, since the form fields were instantly 'live' and active - something less achievable in design software like Sketch.

checkout

↑ MOBILE PROTOTYPE


Test the prototypes

After the design stage, prototypes were created to test the hypotheses on real users. Several variants were tested in a series of user tests and interviews with new and returning customers. By this point, we are able to get a better understanding of how our customers use every element of the checkout, and iterate on the protypes based on this. We continued to iterate on the designs based on our findings, with the aim of developing a new checkout prototype for testing as a live build for longer term improvement, and a series of A/B split tests that could be conducted on the live checkout to optimise conversion in the shorter term.