Redesigning Wayfair’s Lists experience
The app team and I worked to redesign the Lists experience for Wayfair customers. The Lists tool helps Wayfair customers save and organize their favorite products, brands, and inspiration across Wayfair.
The primary goal of the redesign was to help elevate the visual design of the list experience on app. I partnered with the app team to establish key screens to redesign, global components & interactions to define, and how to leverage native iOS interactions and guidelines. With tight timelines, this was a great project for me to challenge my visual & interaction design skills and employ system thinking for defining information architecture and component design.
Redesign the Lists experience to match the new, elevated visual language
Increase user engagement with lists and return rate
Integrate research learnings and analytics to inform design decisions
Given the tight timeline of the project, I did an UX audit of the Lists experience and defined all the key screens for a successful redesign. Below is the most important flow - the save flow, and an exhaustive set of additional screens & actions that live independently in throughout the app.
With the audit, I accounted for all variations, use cases, and user flows that user encounter when saving products and browsing their lists. This added additional empty states, error states, and success states; all of which turned into global components.
Leveraging Analytics & Research
To help me make informed decisions, I leveraged analytics to help me understand the user’s mental model through saving and purchasing products on Wayfair.
Question 1: What data show we show on products cards?
Product cards show high-level details about products. They are crucial in if a user saves a product or not. So I worked with insights from analytics to identify the most important data points:
Question 2 : What is the value of a lists user to Wayfair? What is the value of lists to a Wayfair user?
Learning about the value a Wayfair list user has to the business what essential in helping me get context about how to design the experience. I gained insight into the most frequent user flows, where users are saving from, what are the key metrics we are monitoring, how many products a user is saving, how they are purchasing after saving, and also average order amounts.
Question 3: How does our user make purchase decisions?
From user research we found that for most users resonate with a product through product images. They said that a list is them shortlisting their favorites products based on looks and price. So they recognized products based on the image, moving forward we really wanted to prioritize product image to help recall.
Designs and Iterations
With my list of screens outlined I dove straight into sketching. Sketching wireframes is my go to ideation tool, it allows me to visual ideas and share ideas that focus on interactions and flows. In this stage, I went wide with my scope and came up with different ways of displaying informations, components, and layouts for the key screens for the Lists. I worked on a tight three day review cycle to refine and narrow ideas with my PMs, designers, and dev team.
Designing the List Card COMPONENT
The list card component is easily one of the most important design components in this experience. This is how the user browse through saved products and ultimately makes purchase decisions. There were a lot of considerations and discussion that went into the layout and architecture of list cards. We wanted to keep images for the high impact, display most relevant data, and internally keep cards consistent across the platform.
🎉 Launch and Wins!
We recently launched the redesigned app and have begun collecting data out user engagement. As you can see, within the first week we are already seeing increases in the favoriting action across the app. And as we know, users who engage more frequently with lists are more valuable to Wayfair.