Emma Rosenberg

Understanding the problem to solve

In e-commerce, the product detail page is a unique page representing each product, with all relevant information for users to make a purchasing decision. At Farfetch, we had discovered problems and opportunities at this particular point in the journey, with user research regularly reporting specific issues.


To identify and validate those issues, we gathered relevant data, including site analytics, user research and information from the customer service team. We also looked at competitor examples to understand the landscape. I created a document with a summary of this data and objectives, including a diagram of which areas of the current page were of highest, second highest, and least high importance to our users, so that we could all easily understand how to restructure the hierarchy of the page to make it clearer and easier to use.



↑ Diagram to show areas of highest and lowest interaction by users on the page


Design goals

To help guide the direction of the design work to follow, I developed a set of design principles to consider alongside the available data.
Make the product the hero. Luxury items are special, rare, exclusive, designed by famous designers, made by artisans. Show off the details - show that the product is exciting and special and worthy of your time
Make it clear, swift and smooth. Product detail experience should be 'woven seamlessly' into customers shopping journeys, presenting information clearly and simply, enabling swift purchase and easy browsing.
Make the experience immersive. Immerse the user in the world of the product - and the world of Farfetch.



Explore and diverge

I spent time exploring multiple possible options, to understand what was possible. Working within a small team, including the product owner and another designer and consulting with other co-workers from various teams. We discussed the technical possibilities and limitations in detail, considering feedback from the development team. I designed and prototyped options in several variants, across responsive breakpoints, also taking time to look into the specific challenges and opportunities that mobile presents.

double

↑ Protoyping and design work in progress


Design critique

I held a design critique to get feedback and ideas from co-workers. I presented a summary of the project goals, opportunities and constraints, then shared prototypes as well as pinning printouts to the walls of the variouse designs. I then asked the participants to first spend 10 minutes in silence, each writing down positives, negatives, and general comments on post-it notes, to capture their thoughts without being influenced by each other. Then we all attached our post-its to the relevant designs, and discussed our notes. I found it to be a productive critique, with the participants all sharing useful and insightful feedback,and we had valuable discussions, also sharing details of other projects where they'd dealt with similar problems and how they'd solved them.

checkout

↑ The design critique


User testing

After the critique, the designs were iterated on and refined. I then wrote a rough initial test plan and worked with a user researcher to recruit participants and refine the plan and script. We ran a day of tests, and received very useful feedback on the designs, helping to clarify many points and refocus the project for the next stage. We condensed the feedback into a report, and shared it with the team.

checkout

↑ A researcher and participant about to test


Refine and build

After the user testing, we continued refining the designs, using the feedback to help shape the work. We chose to develop two main directions for the design, which were very different. Working with the product owner, we decided to take a modular approach to each of the two design variants, and build the page as top, middle and bottom sections, as the top and bottom sections were interchangeable. The two different variants would then be tested against the old version, with the option to create an ultimate variant by mixing and matching the modular sections if necessary.



checkout

↑ The live product page test