Role: Product Designer (UX & Visual)
Responsibilities: User research, problem definition, mock ups, interactive prototypes, copy, visual QA
Overview
The Wayfair Immersive Category Pages V2 project was focused on redesigning our category page experience to be more guided, flexible, and nuanced for product categories that need it. We A/B tested into the new design and saw lifts in conversion rate and add to cart rate for our customers. The new design is now available on over 60% of our live category pages. Wayfair also adopted new components and guidelines in our design system as a direct result of this work.
I worked with a product lead, analytics, front end developers, vertical and category merchandise, content strategists, and other designers from design systems and core funnel teams.
For this project, I was directly responsible for interaction patterns, pixel-perfect mocks, prototyping, user testing, research synthesis, and post-implementation visual QA.
Opportunity: The category page is one of the most important assets of an eCommerce store as it’s the page where a grouping of products are first shown. Having well-structured category pages is important as it improves SEO rankings and makes product exploration easier for customers, generating higher sales and better conversions as a result.
Wayfair’s category pages were mostly navigational, which isn’t helpful for exploring nuanced classes, and there were some gaps from the ICP V1 test. I formed a hypothesis based on the goals from the stakeholder survey and from the V1 test analysis:
“If we add more guidance and nuance to category pages in the form of education, inspiration, value props, or class awareness, we can make product exploration easier for customers and help them move along the funnel. We will know this to be true when we see increases in add to cart rate and conversion rate. ”
To begin, I created a project timeline to address the team members, goals, activities, phases of the UX process, and deliverables involved in each week of the project. My PM and Vertical Merch stakeholders gave feedback on it, and any modifications were shared out as updates.
Discovery
Sample question from the stakeholder survey asking what type of content would be helpful for their classes
Along with the common competitor examples given by stakeholders, I surveyed the competitor landscape to understand what types of guidance content they use and the layouts of their content. I highlighted them in an Airtable shown below.
After deciding on the strongest competitor examples, I usability tested competitor examples to understand what users think about some of the potential solutions.
This involved unmoderated user testing with a scenario and tasks to complete.
I wrote the script and collaborated with a UX researcher on best practices and got feedback from PM as well as design peers.
Key Takeaways
Although quizzes were a tool that we saw often amongst our competitors, it was actually not something that customers positively reacted to for this point in their shopping journey. Their feedback was that “the product choices they’d give me are too limited” or “I usually don’t trust quizzes”.
This particular feedback was valuable because I wanted data to convince my stakeholders and PM that we cannot always trust competitors’ choices as they may not have been validated well.
Ideation
I then scoped the potential solutions on an effort vs. impact matrix and presented the shortlist of opportunities to the team.
Then, I began ideation by creating the content layout and implemented feedback at each iteration.
Challenges
As I proposed new design components, there were a few net-new components that needed to be created. However, the proposed ideas were not always technically feasible, so I went through several iterations.
I set up meetings with our design system team and invited my lead engineer so that we would be aligned and also receive feedback from the design systems team. My lead engineer shared that attending those meetings made her feel included in the process as she had never been in meetings with the design system team before.
Since content hierarchy and making good use of real estate is very important for e-commerce, with the second user test our goal was to understand which components are most important to customers so that we can validate their priority on the page.
I collaborated with our Content Strategy team by showing my initial layout to them and iterated based on their feedback on content and copy.
A/B tested the redesigned concept “Concept 1” vs. “Concept 2” (old layout) by using the balanced prototype test
Refine
Once the mocks were completed, I conducted another unmoderated user test with a clickable prototype, asking users to complete tasks and showed both “Concept 1” (redesign) and “Concept 2”. (V1).
Once our success criteria was met, we decided to complete this round of user testing, and launched ICP V2 on two pilot category pages.
Impact: The test was a win on both mWeb and Desktop, with increases in conversion and add to cart rate. We then implemented the ICP design on other category pages as well.
Beyond the initial hypothesis that we validated through this project, the wins of ICP on the pilot pages enabled us to use this flexible layout for other projects across our other verticals, such as our luxury brand teams.
Over the next few months after our launch, I collaborated with other teams who began reusing ICP components and layouts for their own projects as well.