Helping users find what they're looking for without disruption.
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.
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 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.
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.
After releasing the new filter functionality, users stated two major problems:
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.
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.
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:
I created three wireframes to start our team’s discussions in order to design the most informed product for users:
This design closely reflected the current RH website, while allowing customers to shop an overarching category of product, and then filter down.
At a glance, a user can choose a category from one page.
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.
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.
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.
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.
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.
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.
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.