Helping Customers Feel Confident to Choose the Right Flooring Online
Company: John Lewis | Role: Lead UI Designer | Platform: Web
Embedded Files
Re-designing the flooring product page to surface the right information, at the right time. Guiding customers through complex decisions when looking to purchase flooring.
Optimising and improving the existing customer experience with a tailored, bespoke React-based product description page.
Overview
Flooring is a high-consideration purchase and customers often feel overwhelmed by the detail and complexity. We redesigned the flooring product page to guide decision-making more effectively, surfacing the right information at the right time.
Through user testing, the new design showed clear improvements in clarity, increased trust and user confidence in their purchase decisions. These insights shaped further iterations and allowed us to confidently build a new, React-based PDP template leveraging design system components and existing PDP modules from other templates to deliver a MVP ready for A/B testing.
The challenges
Customers are overwhelmed by choice
Customers are confused by the current filters and options.
Clear suitability requirements are not currently offered (e.g. by room, suitable for pets)Customers want to order samples before purchasing to get a feel for the carpet, "it's all about the look and feel"
My role & contributions
Carried out competitor analysis
Analysed existing Product Listing (PLP) and Product Description Pages (PDP) to identify opportunities
Facilitated concept workshop with delivery team
Produced responsive low and high fidelity prototypes
Collaborated with other delivery teams to create re-usable modules across other PDP templates
Supported with iteration of designs once user-tested and drove further iterations to achieve MVP
Helped define style and behaviours using design pattern library
Collaborated closely and paired to knowledge share with Service designer/UX, User researcher, UX writer, Product Owner, Business Analyst, Delivery Lead, QA and devs
Attended and presented in meetings with key stakeholders
Promoted and demonstrated agile ways of working with stakeholders outside of online
Phase 1 - Existing high level customer journey
The carpets journey to supply and fit, was identified as the largest revenue opportunity and the proposition with fewest dependencies.
Concept workshop
Being a fairly new delivery team, I took the initiative with my UX counterpart to be proactive and set up a collaborative team concept workshop. This was with the aim of demonstrating our preferred way of working and encouraging the team to ideate and share ideas with us for the redesign. Some of my ideas are below.
PLP with 'Need help choosing' tool
Explored question approach to help customers find suitable carpet
Ideas for PDP components and layout
Explored alternative PDP layouts and variants of components
Concepts
Based on sketches I initiated mocking-up design various ideas using existing PDP components in Sketch. Also collaborated with delivery team and stakeholders to ensure concepts were achievable whilst preparing prototypes to be validated via user testing.
Desktop – Concept 1
Mobile – Concept 1
Desktop – Concept 2
Mobile - Concept 2
Ways of working
Having to work remotely as a team within different timezones it was important to establish a collaborative way of working. Miro was used so that everyone had access and could contribute to achieve successful delivery.
Collaboratively highlighting areas of opportunity for improvement
Breaking down page components to support requirements for MVP
User testing
Two rounds of user testing were held with 8 participants. 5 participants from round 1 were invited back to user test the prototypes in round 2.
Approach
Research objectives were:
Round 1 - Understanding customer mental models
Understand customer needs and pain points when purchasing carpet
Are there different scenarios/personas related to journeys that have differing needs/pain points/mental models?
Understand how customers view competitors
Round 2 - Testing and validating design and content of PLP and PDP
Capture first impressions of the new design of the PLP and PDP
Understand how users would use filters on PLP to find suitable carpet
Understand how users interact with the proposed new design of the PDP
Understand if users easily find information that is relevant
Find out if sustainability would persuade participants to use additional services
Product listing page – Enhanced design and filters with additional attributes
Product description page – Re-design with additional features
User testing findings
Round 1 – Customer mental model learnings
Several participants mentioned returning to company’s where they had purchased carpet before and had a good experience
John Lewis wasn’t top of mind as a place to purchase carpets
Gauging the quality of a carpet online was a challenge, reviews were used as a tool to assess the quality of the carpet online
Most participants had specific requirements for their carpet
Features like Ply and Tog rating were less familiar/relevant to participants
Round 2 – PLP/PDP learnings
New designs were overall well received by customers. In particular new filters (room suitability and suitable for pets/children)
Customer generated content, price guide and partner recommendations were seen to be useful alongside ratings & reviews
Sustainability and in particular carpet recycling was unlikely to sway participants in using John Lewis uplift services
Iterations made to achieve MVP
Based on findings from user research and testing, designs were updated to achieve an MVP following agile best practices.
Include link at top of the PDP – to anchor user to product description further down in page
Access more lifestyle shots – so customers can better visualise what carpet could look like in their room
Explain quantity and size of free samples available – Include additional copy to provide clarity for customers when ordering
Improve copy for ‘estimating and fitting services’ – to better direct customers to the right estimator appointment based on their room type
Streamline product description and product information – allowing user to clearly understand if the carpet is suitable for their needs
Introduce primary review module to support reviews and ratings module – included more detailed customer feedback, when there are no reviews show 'Add a review' module instead
Desktop with updates
Tablet with updates
Mobile with updates
Next steps
Work collaboratively with developers to identify functionality required to build new design in React using design system components and existing modules from other PDP templates to achieve MVP
Work with stakeholders and suppliers to streamline existing product attributes. Initiate ability to get additional data such as ‘suitable for’ and ‘pile height’ to allow additional filters to be added to PLP
Improve help and support pages, allowing customers to have all of the information they require available to be comfortable to proceed to next step
Identify opportunities to promote flooring to increase awareness across all customer and Partner touch points
Look at opportunities and learn from other teams to encourage customers to add reviews and take photos of their fitted carpets to build user generated content and increase number of reviews
Continue to test, learn and iterate once MVP is launched using data and insight
Google Sites
Report abuse