In e-commerce, the product detail page (PDP) is a unique page representing each product, with all relevant information for th users to make a purchasing decision.
For us, there were user painpoints on the PDP, with user testing and customer service reporting specific issues, and an unclear, confusing information hierarchy which needed to be improved. Also, a more flexible design which could adapt to ongoing new business requirements was needed, and as a luxury fashion ecommerce website, we wanted to inspire and delight our customers, elevating their experience.
We used a research document which identified key issues and proposed some ideas from previous project work. We looked extensively at competitor examples to understand the landscape. We gathered relevant data, including site analytics, user testing data, and information from the customer service team. I used this to create a reference document with data and objectives, including a diagram of which areas of the current PDP 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.
To help guide the direction of the design work to follow, I developed a set of design goals 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, smooth and swift. 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.
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 options in several variants, across responsive breakpoints, also taking time to look into the specific challenges and opportunities that mobile presents. Using Sketch and Invision to design and then quickly prototype some interactions, also enabling us to share the protoypes and test them on devices.
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.
After the critique, I continued refining the designs, using the feedback. I enlisted the help of another designer to have more resource to develop the designs further. We spent some time refining the approaches, but I also wanted to test the ideas on real users. With a project like this, it's possible to be influenced by opinions and directives within the business, and lose sight of real user needs. It also helps the design process, helping us to see the product through the eyes of users. I wrote a rough initial test plan, then 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.
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 A/B/C tested against the old version, with the option to create an ultimate variant by mixing and matching the modular sections if necessary.