desktop-WF.jpg

Goal.

Redesign the samples ordering experience for customers looking to order fabric & tile samples across desktop and mobile.

Role.

I worked as a product designer, collaborating with analysts, engineers, product managers, & other designers.

Solution.

Updating the current samples drawer into a modal on desktop and action sheet on mobile.

Duration.

1.5 months. 

 

Prototype in Motion.

clay.jpg
mobile-clip1.gif

01.

MODAL ON DESKTOP.

A modal with available samples pops up on clicking the "free samples" link. Hovering over each sample shows material details. 

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. 

phone.jpeg
phone.gif

02.

- Context -

Samples are physical swatches Wayfair shoppers can order for tile, flooring, and upholstery products. Samples increase conversion rate on the main product by helping users make more confident purchasing decisions. I worked on the Best in Class team, tasked with reevaluating the current experience to ensure that Wayfair was the best place to order samples and increase customer satisfaction with the final product.

tile.webp
samples.png
flooring.webp

- Current Problems -

Desktop:

  1. The product page lacks consistency with progressive disclosure. While links such as 'unlock insider pricing' open as a modal, the samples options open as a drawer. This created a gap between users' expectations and results. 

  2. There is no designated space to show details for each sample such as material type and description. This information is important to users with specific needs (ex. stain resistant fabrics). 

  3. While the details for each sample pops up while hovering over them, they block the other samples in the grid from view. This creates frustration for users scrolling through the grid visually without looking for details.  

Mobile:

  1. The sample sizes are big and take up too much scroll space. This is frustrating for users scrolling through a large number of sample options.

  2. Filters names such as material type often span across two lines appearing clunky and overwhelming.

Screen Shot 2022-04-03 at 3.15.05 PM.png
WhatsApp Image 2022-04-03 at 8.56.13 PM.jpeg

- Stages -

Stages.png

Meet Our Users.

woman.jpeg

Primary.

Name: Martha (She/Her/Hers)

Age: 51

Occupation: Housewife

Family: Married; 2 children & a dog

Martha is a housewife and frequent Wayfair shopper. She is looking to upgrade her current sofa and has very specific needs when it comes to the style and durability of her fabric. Being a dog owner with 2 kids, she needs a fabric that is stain resistant. She always orders samples to test before converting on the product since images don't always convey the real look and feel of the fabric. 

Name: Mark (He/ Him/ His)

Age: 43

Occupation: Architect

Family: Single

Mark is looking to renovate his bathroom and is interested in ordering bathroom tiles that suit his style. He wants to order tile samples to test them in his bathroom lighting since he knows tiles appear very different in different lighting. 

man.jpeg

Secondary.

 

- Competitive Audit -

After meeting with stakeholders, I conducted a thorough competitive analysis looking at how Wayfair’s competitors approached the samples ordering journey. I weighed pros and cons with each competitor and synthesized 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)

Screen Shot 2022-03-07 at 12.50.06 AM.png
 

- Ideation & Wireframing -

After weighing pros and cons with various experiences including Wayfair and its competitors, I wireframed various layouts to display the samples. 

Screen Shot 2022-03-07 at 1.09.31 AM.png
Desktop - Modal#1.png

- Prioritizing -

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

Reasons we selected a modal for desktop:

  1. The other links on the PDP page trigger a modal and hence provided more consistency for users.

  2. Unlike the side drawer, the modal appeared in the centre, making it a more immersive experience.

  3. The modal provides a designated space for material details for each sample. 

  4. 5/8 competitors had a modal making it a familiar mental model, not just for Wayfair customers, but online furniture shoppers in general. 

Reasons we selected action sheet for mobile:

  1. Action sheet component had been previously tested for samples and increased conversion rate. 

  2. Action sheets provide context about the previous page and let users know that they haven't left the product page.

  3. The modal on desktop translates to action sheet on mobile providing parity across the two platforms. 

iphone-A (1).png
iphone-B (1).png
 

- Prototyping -

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. 

Desktop:

Screen Shot 2022-04-03 at 4.20.19 PM.png

Mobile variation A: 

Screen Shot 2022-04-03 at 4.22.00 PM.png

Mobile A/B: 

Screen Shot 2022-04-03 at 4.24.23 PM.png
 

- Testing -

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.

Key Takeaways.

100%

100%

Desktop participants found the experience to be simple and intuitive. 

Mobile participants preferred filter through a link as opposed to exposed drop-down filters.

“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.”

​📱

​🖥

  • 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 for both layouts effective in helping users navigate through the experience?

  • 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?

 

- Iteration -

Since users were able to seamlessly navigate through the desktop experience without any pain-points, there were no changes made to the design. However, I made a few recommendations based on pain-points related to the mobile experience. 

​🏆

👎 

CLICK-IN FILTERING

A

B

B.png
A.png

3/3 mobile participants preferred click-in filtering.

2

Mobile_Fabric-Samples-Selected (2).png
Change1.png

CHECKBOX FOR ADDITIONAL CLARITY

 2/4 mobile participants were unclear about the distinction between clicking on the image vs. link.

- Iterating For Constraints -

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. 

FILTER LINK PLACEMENT OPTIONS :

filter placements.png

​🏆

Screen Shot 2022-04-03 at 7.38.31 PM.png

Reason for this filter link placement: 

  1. 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. 

  2. To make sure the link wasn't missed, I also added an icon next to it.

- Accessibility Checklist -

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. 

Screen Shot 2022-03-14 at 6.24.00 PM.png

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.

Before.

Screen Shot 2022-04-03 at 3.15.05 PM.png

PROBLEMS

  1. No progressive disclosure consistency across product page.

  2. No space for material info

  3. Longer scroll with material info card blocking grid. 

After. 

Screen Shot 2022-04-03 at 8.04.08 PM.png

01.

PROGRESSIVE DISCOLOSURE CONSISTENCY  

The modal is consistent with the other links on the page matching user expectations

02.

03.

DESIGNATED MATERIAL INFO SPACE

The modal provides a space for the material info which stays sticky so users can view as they scroll.   

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.

WhatsApp Image 2022-04-03 at 8.56.13 PM.jpeg

PROBLEMS

  1. Large sample images with 2 samples per row increases scroll time.

  2. Lack of guidance about the difference between selecting sample image (which selects the sample) vs. clicking on the sample name (which shows material info).

  3.  Cluttered UI due to long filter labels within limited drop-down space.

  4. Multiple filter drop-downs require multiple taps to open and close them each time. 

- Solution Overview -

 
 

After. 

Screen Shot 2022-04-03 at 9.48.35 PM.png

01.

REDUCED SCROLL

Sample sizes were reduced and 3 samples were fit per row to reduce unnecessary scroll time. 

03.

CLEANER, SIMPLER FILTERING

Users can access all filters in one place as opposed to multiple drop-downs for multiple filters. 

Screen Shot 2022-04-03 at 9.56.19 PM.png

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. 

04.

PARITY ACROSS MOBILE &

DESKTOP

Action sheets for mobile translate well into a modal for desktop providing users with consistency across both platforms. 

- Site Map -

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 :

Site map- desktop (3).png

MOBILE :

Mobile-site-map (2).png

- Flexing for Tile -

While the user test was focused on fabric samples (same research questions), the designs were translated across tiles design as well. Below are high fidelity mock ups of the tile samples modal & action sheet. Since tile samples didn't have material details or filters like fabric samples, the modal size was flexed to fit just the sample images. Another change made here was that since tiles don't have the enlarge on hover feature, image size was increased and 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. 

Desktop_Tile-samples_Selected (2).png
Mobile_Tile-Samples-Idle (1).png

- Reflection & Future Steps -

  1. Value of cross functional collaboration: Through this project I was able to collaborate with analysts, engineers, content strategists, and other designers. I realized the importance of looping-in people from other fields and departments early in the process so as to catch potential constraints and limitations before it is sent for launch.   

  2. I am not my user: Before the usability test was conducted, I was under the assumption that 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.    

  3. Working within a design system: This was my first time working within a set design system as previously I always created my own system from scratch. While I felt limited in many areas and often faced constraints, I was able to learn how to problem solve, so as to maintain the consistency of the design system throughout the flow.