RH Sale Section Redesign

Helping users find what they're looking for without disruption.

About the Project

The sale section on the RH website is constantly in flux, with the merchandise changing often. This project centered on improving the sale section, making it easier for users to shop. An initial redesign was launched internally, and I jumped in to implement design updates accordingly. With minimal time and budget, we did our best to understand our users by speaking with both gallery associates (who are closely connected to customers) and RH home office employees.

My Role

I led the design for this project while collaborating with two product managers and a senior UX designer. There was no prior design system in place, so I created all components in Sketch.

A User-Centered Shopping Experience

Historical Context

The Original

A replica of the regular site but only showing sale products. Categories range from being quite small to an endless scroll of products, making it a frustrating user experience due to a lack of functionality or thought.

Introducing Filters

New designs were released to utilize the new filter functionality. The introduction of filters was a great step forward, but the UI was not intuitive; there was no indication of when categories changed or when filters were selected. It needed to be updated to both simplify and clarify the shopping experience for users.

The Problem

After releasing the new filter functionality, users stated two major problems:

  • They get lost and confused regarding where they are in the experience; there needs to be a way to identify the current path of exploration and be able to backtrack easily.
  • It is unclear which filters are selected and whether they’d be able to further refine them.

"...every question mark adds to our cognitive workload, distracting our attention from the task at hand."

- Steve Krug

Understanding & Defining the Users

Discussions with employees and gallery associates revealed there are two types of sale shoppers:

The Deal Hunter browses through anything and everything with the goal of finding a great deal.

The Comparison Shopper has a certain item in mind and hope it will be on sale.

These personas have something in common: they don't want anything to distract or confuse them while shopping.

Analyzing eCommerce Sites

By conducting an analysis of other eCommerce sites, I found a common pattern among them: there is a clear indication of when filters are selected and the options available, and they orient a user to where they are on the site. Many sites chose to present refinement options together to a user, displaying all the options at once. With the feedback around the filters in separate dropdowns, it seemed like our users would benefit from having refinement options in one place.

The Solution

Browse by categories, refine with filters. We replaced the product category filter (ie: living, dining, bath) from the original design with a browse menu. The established information architecture for categories creates a visual and functional hierarchy, making it ideal for browsing and finding items fast. The remaining filters are condensed into a single panel, allowing users to see all of their options together with nothing hidden.

Goals to Make the Redesign Successful:

Browse
  • Show categories on various levels for shopping broadly or more specifically.
  • Display the path so users know where they are at all times.
  • Allow a user to backtrack to broader categories, if desired.
Filter
  • Make it easy and clear for a user to select numerous refinements.
  • Display how many and which filters are currently selected.
  • Allow a user to clear undesired filters.

The Design Process

Wireframing to Find the Best Browse Solution

I created three wireframes to start our team’s discussions in order to design the most informed product for users:

Wireframe 1: Condensed Categories

This design closely reflected the current RH website, while allowing customers to shop an overarching category of product, and then filter down.

Wireframe 2: Open Categories

At a glance, a user can choose a category from one page.

Wireframe 3: Horizontal Categories

Categories are horizontally represented and change based on what was previously selected. This option has a different feel from the previous two. I offered it to provide a contrasting approach to the larger design problem.

A Hybrid Approach

Having a few wireframe options to share my ideas was beneficial. We were able to analyze and weigh the pros and cons of each. We eliminated wireframe 3 because too much would change on the screen, and our users expressed similar confusion to the original problem. Wireframe 1 & 2 were more on track to solving the problem, but there was a level of detail that I had left out. I had assumed that the third level of categories was not necessary to see at the beginning of browsing, but I was immediately reminded that some of our users want to find a specific category quickly. By creating a hybrid of design 1 and 2, this allowed for a third level of categories to be introduced to satisfy that need.

The Redesign: A New Way to Shop Sale

Less is More

We reduced several actions into three - browse, filter, sort - by condensing the filters that spanned across the top of the page. Now the user can make a quick decision regarding how they want to shop and not have to question where to begin.

Before:
After:

Browsing & Knowing

Establishing "browse" helps a user get to a category quickly while also allowing other users to shop at a broader level. Browse, combined with hover/active states and breadcrumbs, lets a user know where they are within sale at all times, making everything self-explanatory.

Everything In One Place

The Filter Panel

A single filter panel shows a user all of their options at once and is not hidden in dropdowns. The panel is dynamic but remains open so a user is aware of what is going on at all times. The number of results updates, selected filters move to the top and filter options change. Leaving the panel open also indicates that more filters can be selected, if desired. The panel does all the work so a user can concentrate on what they are looking for.

Breaking Up the Lists

To help a user scan vs. read long lists, I chose to use three different components to represent filter options. Breaking up the wordy lists makes it more interesting for users and allows them to find what they're looking for quickly.

Color Swatches
A user can visualize a shade of color but not know the exact name of it, so the swatch is helpful. A hover to see the color name is used to assist the visually impaired.
Sliders
A user can type a range or drag the end to change results. I chose to use the bar graph to illustrate the number of results so a user could gauge how many items they would see based on their selection.
Plain Old Text
Some filters, such as luxury upholstery fabrics, are best represented by text. Reading the text creates a better sense of the look and feel than a swatch image would.

Putting it Together - Watch the Prototype

Conclusion

I was happy with my decision to provide a diverse array of wireframes from the start. These options allowed us to think of how a customer shops our website while also considering the companies broad assortment of merchandise. Putting the time into exploring numerous options allowed us to create a better, more-informed final product for both our clients and the company as a whole.

Next Project - Alo Yoga Mobile App→