Case Study: Lowe’s Flooring and Paint Visualizers
My role: UX Lead & Sr. Product Designer
One of the biggest problems eCommerce businesses have to solve is helping people buy a product online without being able to see, touch, or otherwise experience it in the tangible world.
This problem is especially challenging in the Home Improvement space, with potentially high stakes for customers afraid to choose wrong.
People don’t commonly retile or replace their carpet flooring often. The average American typically changes their flooring once every 5–35 years.
Have you ever shopped for flooring for your home? Even when you can see and touch a tile sample in-store, it’s impossible to visualize what it’ll look like in a large room with 10–100 others.
One of the most complicated customer problems the Omniverse team at Lowe’s was trying to solve was to help customers make this arduous and expensive decision easier for customers. Flooring Visualizer was a tool we wanted to provide to help customers be more informed about their end result and make a more confident buying decision.
(✨ Later, we expanded the Visualizer concept to grout, paint, and blinds, with the seedling of an idea about allowing people to visualize furniture in their space, but more on that later.)
The work
I designed V2 of the Lowe’s Visualizer product for Lowes.com web and mobile web while leading research, content, and branding teams through validation and usability testing.
I was the UX Lead and Product designer for the Omniverse team at Lowe’s — a group that worked to solve problems like this for our home improvement customers — Do-it-yourselfers, Pros (contractors, etc.)
I inherited the redesign for Visualizer in its baby stages. (When I inherited the project, a simpler MVP version had been live on the site for a few months, testing the vision. It linked to a customizable third-party Visualizer product used by most home improvement e-tailers, like Home Depot, and other smaller specialty stores.)
Another designer on our team had created and tested a new concept for Visualizer, which changed it from a simple pop-up menu on the site to a functioning digital product that stood on its own. Desktop and laptop had a long menu on which we planned to build new functionalities, and mobile had a tab bar that mimicked the Lowe’s mobile app experience.
I designed V2 of the Lowe’s Visualizer product for Lowes.com web and mobile web while leading research, content, and branding teams through validation and usability testing.
The technology was moving fast, and I worked with the Product and Engineering team daily to pace ourselves through adding exciting functionality in a way that supports a clean user experience.
- Researchers on my team: 3
- Content strategists / UX writers: 2
- Product Managers and Leaders: 6
- Engineers: 12+; I worked directly with 3
Early impact of work
- +50% conversion rate
- +.5MM weekly revenue
- +100% revenue per visit
- +60% ATC rate
In the coming months, my contributions to the product were expansive.
I:
- Designed multiple new functionalities for Visualizer from 0–1, like the capability for customers to upload an image of their own room instead of seeing their flooring choices in our templated rooms.
- Designed the capability to view two different flooring choices simultaneously.
- Integrated Paint Visualizer into Flooring Visualizer — preparing flooring visualizer to become a greater “design center” for the home, and added 360° rotation for viewing products in rooms.
- Worked with our UX writers to rewrite many of the CTA’s and labels for Visualizer.
- Identified UX opportunities to increase conversions to the product from our site.
- Championed accessibility by revamping design assets (Colors, touch point sizes, spacing, overall visual hierarchy, etc) and prioritizing those fixes during subsequential feature releases.
- Translated inherited design concepts to components in our existing design system, created new ones as necessary, and followed up on their approval timelines with the DS team.
- Supported engineers daily, performed usability QA, drove research and content, and worked on UX strategy with our PM and Product Leaders to plan future initiatives and prioritize releases vs. UX fixes in the now.
Upload an image of your room for 💻 desktop:
🏁 Approved design:
💡 Earlier concepts:
When I started designing the space for “Upload your own room image” on desktop, Visualizer looked like a blank canvas. But-I knew there were many plans for future functionalities for the product that I needed to consider to create a design our customers would learn to use that would grow with the product.
So to better understand future product planning, I worked with Product Leaders on a “North Star” vision for Visualizer. And I designed every research and usability study to gather strategic insight into customer expectations and understanding of the product.
Concept #1 ⬇️
I knew Lowe’s customers (and many retail e-comm customers today) love to open multiple windows when shopping on product pages to compare products. So I tried to translate that shopping behavior and customer preference here by creating the space and capability for customers to save and share their work differently.
My intention for Pro customers with this design was to allow them to strengthen their relationship with THEIR clients by showing them different options, which would also improve their usage of Visualizer (and loyalty to the Lowe’s brand.) This was an ‘educated’ assumption based on feedback from other features we’d have to test.
I tested customer preference for placement and content of the “Upload a photo of your room” button separately without any “concept assets” on the page. The top right-hand corner was the option that best met customer expectations.
The only problem with that, though, was that eventually, we would be adding different functions that manipulate the actual image, like 360° rotation and flooring layout — in addition to the light/dark mode toggle currently in the top right-hand corner of Visualizer. So, for customers to better understand what those icons will do, I moved them on top of the room image they’ll be influencing with them.
So….Concept #2 ⬇️
❌ Error messages
After a customer uploads their image to Visualizer, our system analyzes it to recognize flooring (so that we can apply flooring products as customers choose later.)
We had a default error message that didn’t tell customers why we can’t accept their photo, which doesn’t set them up for success if they want to try again. So I pushed to understand how the tech works and what we can recognize about the image on our end. Then, I wrote customized error messages that would tell customers why their photo won’t work with clear next steps so that they can choose to remedy the situation if they want to.
Upload an image of your room for 📱mobile:
On mobile, customers could upload an image from their device or take a photo using their camera.
➕ Upload an image
⬆️ In this flow, a customer chooses a flooring product from a search listing page → sees the flooring populated in one of our templated rooms →chooses to add a custom image →chooses to upload a photo from their photo library →is shown their image, and offered to upload another or use their current one →and sees their flooring populated on their uploaded image (the prototype above doesn’t fully reflect the last step.)
📷 Take a photo
⬆️ In this flow, a customer chooses a flooring product from a search listing page → sees the flooring populated in one of our templated rooms →chooses to add a custom image →chooses to take a photo →is shown their image and offered to “retake” (note the language change) or use their current one →and sees their flooring populated on their uploaded image (the prototype above doesn’t fully reflect the last step.)
Tablet Visualizer
The concept I inherited lacked a custom solution for tablets. So I created a custom solution better than our broken one with highly limited personal and engineering bandwidth. I reused some of our desktop and mobile design patterns to optimize the tablet experience for touch but on a larger viewport.
360° rotation
As a baby step toward a 3-dimensional design center where customers can drop multiple products in a room and see how they look from any angle, we designed and developed the capability for customers to interact with Visualizer by rotating their room 360°.
Identified UX problem and solution:
What happens when a customer has saved their image inside Visualizer, starts viewing and saving different products, and interacts with Lowes’ Masthead?
If a customer interacts with any of Lowes.com's navigational elements in the Masthead while using the Visualizer product, they’ll lose any progress and anything they saved. So I created a solution that would make them aware of the implications of that choice and the next steps for whatever their preference is. That said, we decided not to implement this message until we integrate paint into Flooring Visualizer and people start saving more products.
Integrate paint into Visualizer
Integrating Paint Visualizer to Flooring Visualizer was an exciting first step toward the vision for the tool to become a ‘Lowe’s Room Visualizer’ that people can interact with on the website and, eventually, in 3D in the metaverse. 🕶️
I loved working with the Omniverse Product team on Visualizers. Ours was a scrappy, entrepreneurial atmosphere where I learned many new things daily.
Different customer intents and mindsets to consider for an integrated Paint / Flooring Visualizer:
Customers who are:
- Interested in buying flooring only
- Intent on buying flooring, but want to explore paint as well
- Interested in purchasing both paint and flooring
- Interested in purchasing paint only
- Came to buy paint, but want to explore flooring as well
The buy flow: The ATC button needs to be easily accessible for customers that are selecting multiple product options.
📐 Here are five design explorations for surfacing the ATC (as an additional) CTA for buying multiple products inside Visualizer.
Concept 1:
⬆️ Thinking ahead to a design center, I thought about adding a carousel of products a person is currently viewing in their room to select and add all to the cart. This concept would be an additional opportunity to add products to a cart without interacting with each category in the menu.
Concept 2:
⬆️ This was an interesting exploration highlighting the Product's interactivity, but it wouldn’t scale well once we had many products inside Visualizer.
Concept 3:
⬆️ This interaction utilizes a strong design pattern on Lowes.com — the slider to ATC.
Concept 4:
⬆️ Part of this exploration also wouldn’t scale well, and wouldn’t work when someone moves the slider over to populate more of one color choice in the entire room. However, there is an element that would have worked well with multiple products — clicking on a swatch would highlight the desired product inside the room to clarify what products people would like to keep considering when the room got full.
Concept 5:
⬆️ The icons' intent was to add stability and context to the experience, especially for mobile.
🚨👋🏻 From here on down is a work in progress, please contact me for any questions or inquiries :)
Finalized version:
mmmmmm
Paint and grout are only available on our templated room images and are unavailable on a user-uploaded image. How do we communicate that?
Users wanting to buy Paint Visualizer must first visit the Product details page to configure pricing and other options. How do we solve the problems/friction this causes?
Accessibility & readability overhaul — Before & Afters
Flooring measurement challenge
While ceramic and carpet flooring is sold by the square foot, laminate flooring is sold in rolls by Linear foot. Since every product is packaged uniquely, offering a calculator for Linear foot flooring wasn't technically feasible like we did for Square foot flooring. This solution wasn’t the best, but it offered an answer to how a person can calculate what they need. (In retrospect, I could have explored adding a CTA for contacting a representative for help calculating their flooring…which I only thought of while writing this case study.)
Increasing conversions to The Lowe’s Visualizer
This is where we focused on a brand-focused change in the header text.
