.png)
TEAM & TIMELINE
1 Designer (Me)
1 PM
2 Data Analysts
5 Engineers
1 month duration
CONTEXT
As a Product Designer at Wayfair, I was responsible for ensuring Wayfair customer-facing platforms provided the best experiences to buy furniture online.
PROBLEM
Wayfair customers can order free tile and fabric samples before purchasing the final product. However, the samples ordering experience was outdated, leading to a missed opportunity to build customer confidence to make a purchase.
GOAL
Evaluate and redesign the samples ordering experience for customers to increase customer confidence and conversion rates for tile and upholstery purchases.
ACTION SHEET ON MOBILE.
An action sheet slides up after clicking on the "free samples" link. Users can filter samples by clicking into another action sheet.
02.
Prototype in Motion.
01.
MODAL ON DESKTOP.
A modal with available samples pops up on clicking the "free samples" link. Hovering over each sample shows material details.
- Auditing Current Experience 😰 -
- Process Overview 👓 -
Expected Users.
Tile Shopper
-
Plans on installing tiles & buying them online
-
Wants to order tile samples before finalizing to determine if it works well in the space
Sofa Shopper
-
Plans on ordering a new couch online
-
Wants to order fabric samples to test before converting on the product since she feels images don't convey the real look and feel of the fabric.
After meeting with stakeholders, I conducted a thorough competitive analysis to see how Wayfair’s competitors approached samples ordering. I weighed pros and cons with each competitor while synthesizing key insights and take aways.
🔑 KEY INSIGHT: Out of 8 competitors analyzed, Wayfair was the only site that displayed samples in a drawer.
💡 BREAKDOWN: Modal (5), New page (1), Drawer (1: Wayfair)
- Competitive Audit 🐎 -
After weighing pros and cons with various experiences including Wayfair and its competitors, I wireframed various layouts to display the samples. I then met with the broader team including PMs, engineers, and fellow designers to prioritize these layouts.
Below is an image of all the options along with a TLDR of the main pros and cons identified.
LAYOUT OPTIONS WITH PROS & CONS: 🤔
- Ideation & Wireframing 🖼 -
After discussing with relevant teams and synthesizing feedback, we finalized the modal component for desktop and action sheet component for mobile to display samples since they were the options with the highest impact to users with lowest effort to engineering. However, we decided to user test 2 mobile variations (exposed filtering vs. filter tab) to see which ones users preferred.
MODAL FOR DESKTOP:
-
Consistently👯: other links on the page also have modals
-
Immersive🌊: Modal appears in larger and in the centre (as opposed to the side drawer)
-
Larger real estate🏘: Provides a designated space for material details for each sample
-
Competition🥊: 5/8 competitors had a modal making it a familiar mental model for online furniture shoppers
ACTION SHEET FOR MOBILE:
-
Prior data📈: Action sheets had been previously tested for tile samples and had increased conversion rate.
-
Page context 🧐: Action sheets cover less than 90% of the page, letting users know that they haven't left the original page.
-
Desktop ➡️ Mobile: Modals (desktop) translate well to action sheets on mobile providing parity across the two platforms.
Option A: Filter tab
Option B: Filter drop- downs
- Finalizing Layout 🏆 -
- Prototyping 🧑💻 -
DESKTOP:
MOBILE VARIATION A (FILTER TAB):
A/B TEST ( TAB VS. DROPDOWN) :
I translated the low fidelity wireframes into high fidelity interactive prototypes for fabric samples across both desktop and mobile. I developed one prototype for desktop and 2 for mobile in order to AB test the 2 variations. The journey involved prompting the samples page by clicking the “free samples” link, to adding their selected samples to cart.
PROCESS: I launched 3 unmoderated tests for desktop and 4 A/B tests for mobile on usertesting.com.
AUDIENCE: I screened for participants that were on the market for upholstery products and valued ordering fabric samples before making a final purchase.
SYNTHESIS: I made a note of key words and phrases that related to the research questions. I then grouped these keywords into themes in order to generate insights on pain-points, what worked well, and recommendations.
Research Questions.
MOBILE.
-
Do users prefer exposed filtering or click-in filtering?
-
Are users experiencing any pain-points with the mobile experience?
-
Is the sample size scannable/ effective in conveying the look of the sample?
-
Is the action sheet component effective in helping users navigate through the experience?
📱
DESKTOP.
-
Are users able to go through the journey of ordering samples (from triggering the modal, to finding the samples they want, to adding to cart)
-
Are users experiencing any pain-points with the redesign?
🖥
- Testing 🧪 -
2/4 mobile participants didn't realize that clicking on the thumbnail selects the sample, and clicking on the link opens material info. I added a checkbox on the image to indicate "click to select" functionality.
2.
CHECKBOX FOR CLARITY
🏆
👎
3/3 mobile participants preferred action sheet filtering over drop-down filtering because it was more "immersive" & the drop-downs felt "overwhelming"
1.
ACTION SHEET FILTERING.
- Post Research Iteration -
- Iterating For Constraints -
REASONS FOR SELECTING THIS "FILTER" LINK PLACEMENT :
-
While having a fixed/ sticky filter link has value, it was also important to consider parity across all action sheets in Wayfair's design system. Since no other action sheet across the system had a CTA in the header, it could create confusion for users and low visibility for the link.
-
To make sure the link wasn't missed, I also added an icon next to it.
"FILTER" LINK PLACEMENT OPTIONS :
🏆
After presenting design changes to the engineering team, it was pointed out that all action sheets on Wayfair have the dismiss on the right. However, I had initially changed this to accommodate for the filter link. Consistency on the placement of the dismiss is important for users who are used to clicking out from the right. Knowing that a filter link has great value to users, I began trying out different placements for the filter link and seek out feedback from stakeholders on the best option.
I made sure to design with accessibility in mind throughout the process, including ensuring that the filter colors were labeled, tap target sizes were at least 48x48 pixels, and the layout had a meaningful sequence. However, it was important to confirm that all potential accessibility barriers were accounted for. I went through an accessibility checklist, adding relevant notes and next steps for developers and engineers.
REFLECTION:
-
Since Wayfair's design system is designed with accessibility in mind, there were no major changes to the design.
-
While I marked future steps as incomplete for the engineering and development team to double check for before launch, the design was 90% accessible with no barriers on the design end.
- Accessibility Checklist -
- Solution Overview -
Before.
PROBLEMS
-
No progressive disclosure consistency across product page.
-
No space for material info
-
Longer scroll with material info card blocking grid.
After.
01.
PROGRESSIVE DISCOLOSURE CONSISTENCY
The modal is consistent with the other links on the page matching user expectations
02.
DESIGNATED MATERIAL INFO SPACE
The modal provides a space for the material info which stays sticky so users can view as they scroll.
03.
FASTER & EASY SCROLLING
Since the material info doesn't pop up in the way while hovering, users are able to scroll seamlessly through options.
Before.
PROBLEMS
-
Large sample images with 2 samples per row increases scroll time.
-
Lack of guidance about the difference between selecting sample image (which selects the sample) vs. clicking on the sample name (which shows material info).
-
Cluttered UI due to long filter labels within limited drop-down space.
-
Multiple filter drop-downs require multiple taps to open and close them each time.
After.
01.
REDUCED SCROLL
Sample sizes were reduced and 3 samples were fit per row to reduce unnecessary scroll time.
02.
CHECKBOX FOR CLARITY
A checkbox over samples informs users that clicking on the image selects the sample whereas clicking on the link prompts material details.
03.
CLEANER, SIMPLER FILTERING
Users can access all filters in one place as opposed to multiple drop-downs for multiple filters.
04.
PARITY ACROSS MOBILE & DESKTOP
Action sheets for mobile translate well into a modal for desktop providing users with consistency across both platforms.
After finalizing designs, my next step was to lay out the site map for the engineering team to better understand the navigational structure with interactions like hover and selected states.
DESKTOP :
MOBILE :
- Site Map -
-
🤝 Value of cross functional collaboration: By looping in other departments I was able to catch potential caveats and limitations before this was sent for launch.
-
😳 What surprised me: I was thought users would prefer the drop-down filter variation of the mobile design since they don't have to click into an external link and the filter options appear on the samples page itself. However, I was surprised that all users preferred clicking in to filter their samples.
-
🔠 Working with a set design system: While I felt limited to the set design system, I was able to learn how to problem solve and work around constraints, so as to maintain the consistency of the design system. I also suggested updates & improvements when necessary.
Overall this was a fun and engaging expereince and I learnt a lot throug this journey!.
- Reflection & Future Steps -
Call with Steve Conine, CEO of Wayfair
The data analytics team identified low conversion rates on upholstery and tile products. The UX research team identified the lack of confidence in the look of the final product as the reason. While tile and fabric samples existed to give shoppers a preview of the material, the ordering experience had not been evaluated in a long time, despite its proven importance in building shopper confidence and increasing conversion rate.
Problem Context 🛋
While the user test was focused on fabric samples due to similarity in research questions, the designs were translated across tiles samples as well. Since tile samples didn't have material details or filters like fabric samples, the modal size was flexed to fit just the sample images. Thumbnail size was increased because there is no enlarged image on hover like with fabric. The number of samples per row was reduced (5 for fabric, 4 for tiles).
On mobile, unlike fabric, the sample names are not links since clicking on them doesn't prompt material details.
- Flexing for Tile -
Key Takeaways.
90%
Mobile participants preferred filter through a link as opposed to exposed drop-down filters.
80%
Desktop participants said they wouldn't change anything about the experience.
“As a whole, I really liked it because I could just click on free samples, it shows me everything. It's a really easy process, it expands, it shows me just what I want to see, not too much information. It’s a pop up so I can stay on the same page, easy to use. Confirmation of what I selected, visually appealing, I liked it.”
“I liked the filter link better. Instead of choosing one filter for color and one for material from multiple separate boxes, I can pick both in one box. I thought that was really cool - having it all in one place.”