CB2 Rugs Experience

About
Led the UX design of an in-store, digital rug experience to enable customers to visualize the CB2 rug collection and assist them in finding the right rug size for their space. Coded the front-end of a high fidelity, interactive prototype to be used for an A/B test. I worked with another designer to create the design.
Results
Launched an A/B test in June 2018. We are currently testing at three CB2 store locations throughout the United States.
Our Design
Introducing our new tool
Find the perfect rug that fits your style, space, and size requirements
Browse our collection
View the entire CB2 rug collection of over 150 rugs on our new tool
Understand the difference in sizes
Use our size tips to understand which size rug is perfect for each type of space
Visualize actual rug size
Through the usage of modeled rooms that are rendered to scale, easily see the difference in rug sizes
Share product information
Find something in store that you like, but not quite ready to purchase? Send the rug information to yourself or a spouse
Design Process
Problem Space
During the 2017 fiscal year, rug sales for CB2 store locations were softer than expected. Management asked our team to investigate. Our team researcher lead a research program to better understand what may have caused the softer sales. She conducted a survey, customer interviews, store associate interviews, and contextual inquiry.
Beni Neutral Rug - CB2
Research and Insights
Research uncovered some important findings about the CB2 rug shopper. These customers are urban professionals, well informed, and design savvy. They typically came into the store to visualize the rugs in styled spaces, flip through rugs on the display, and take photos to bring home with them.

Prior to making a purchase, a rug shopper needs to:
  • Visualize how the rug would fit in their space
  • See pictures of a rug in different environments
  • Compare differing rug options and read customer reviews
  • Understand the quality and durability of a rug
The rug wall located at CB2 Lincoln Park
Most importantly, a CB2 rug shopper commonly struggles with:
  • Finding a particular style of a rug and visualizing how it looks in their space
  • Understanding benefits of the different rug types (flatweave vs pile)
  • Visualizing the size of the rug. Some tend to overestimate the size when seeing rug on the wall display
  • Understanding delivery logistics and the cost of shipping
A rug in a stylized space at CB2 Lincoln Park
Design Direction
Based on our research findings, we decided to further explore concepts that helped customers visualize the rugs they were interested in. The concepts we explored included the following:
  • Stylized Spaces and Rooms
  • Seeing the Entire Collection
  • Rug Size Guidance
  • Understanding Material and Details
Sample sketch exploring the concept of visualizing rug sizes
Sample wireframe exploring the concept of showing the entire CB2 rug collection
After sketching through these key concepts, I produced wireframes and created a journey map to document the entire experience. Next, a visual designer produced higher fidelity mockups for concept testing with customers.
Concept Testing
Once mockups were completed, we wanted to walk through our designs with customers and ask them questions. To do this, we created two unique prototypes:
  • Version 1 - Guiding a customer down a path to find the right rug for them
  • Version 2 - Helping a customer explore and find new rugs through inspiration
Primary screen for version 1, the guidance focused prototype
Primary screen for version 2, the exploration focused prototype
Key Findings
In the exploration prototype, customers were able to navigate through stylized rooms and find a rug that looked interesting to them. However, this design offered little value to customers who were trying to get help in visualizing a particular rug for their space.

In the guided prototype, customers were able to find a rug that fit their needs. However, it took them a while due to navigation issues.

On the other hand, there was one key aspect that provided much value to customers, it was the visualization feature we designed. This feature enabled customers to see how large a rug looks in scale, with reference to an actual sofa.
Our mockup of the visualization feature
Iteration
For our iteration, we focused on creating a design that was more engaging, enjoyable, and informative, since we learned users had limited attention span while browsing at the store. Thus, we introduced a few key aspects to the design:
  • An interactive home screen that introduced customers to different options
  • A carousel of rug images to scroll through and navigate
  • A more helpful version of the visualizer, this time focusing on showing rugs in a room space
  • A dedicated size guide, to further help customers to understand rug sizes
Iteration of the main screen
Iteration of the rug carousel
Iteration of the rug size visualization
Usability Test and Findings
Once again, we presented our design to customers. However, this time our goal was to understand usability and engagement.

Overall, customers seemed to enjoy the experience and found value by using the interactive display. Most importantly, it was engaging, interactive, caught their attention, and helped them visualize how rugs can fit within different spaces. The one part of the design that performed poorly was the size tips section. Customers didn't know how to interact with it.

Other than that, the interaction design worked well and matched the customer’s mental model in terms of how to interact with the design and explore. Our next steps were to fix the usability issues, finalize the design, and have it approved by all stakeholders.
The part of the design that was confusing - Size Tips
Creating a high fidelity prototype with code
After making the necessary design tweaks, I created a prototype in code. I personally challenged myself to do this because I wanted to learn more front-end development. I was very interested in learning how to consume data from a REST API and format it appropriately. To better understand JSON data and REST APIs, I learned how to use Postman. Postman is an API development environment that allows you to speed up your API development process.

Under the tutelage of a development manager, I was able to code the front-end for the prototype, which consumed APIs and formatted the design accordingly. There was one portion that was beyond my knowledge, and this had to do with the data that was sent to the store and how to process emails. The development manager of course refactored some of my code and implemented the back-end. Soon after this, we launched the test in stores!
Screenshot of Postman in action - using the search API
Final Thoughts
It was a wonderful learning experience to collaborate with different teammates on this project. It's crazy to see how far we've come since we first started working on it.

Up until this project, most of the projects I worked on were focused on improving experiences for online only. So I was excited to finally work on product that blends the experience of digital in a physical context. The intersection between these two is what I greatly enjoy designing for. Lastly, it felt great to code a prototype that is actually being used to test in stores.