Reece Bath + Kitchen

Role: UX Designer

Skills: UX Design, UX Research, Heuristic Analysis, Wireframing, Branding, Prototyping, User Testing

Timeline: June 2022 - February 2023

Reece's Background

Reece USA has been thriving as one of the leaders in the Plumbing and HVAC markets in the country. While Reece brands are well known across their many trade customers, their homeowner customers are growing at a rapid rate. With almost one hundred Bath and Kitchen showrooms across the country, it is just about time for Reece USA to tackle bringing their homeowner customers a more convenient method of shopping through their new online e-Commerce Bath and Kitchen website. Before I joined the team, Reece contracted Razorfish, an interactive agency, to design the Bath and Kitchen for consumers site.

The Challenge:

When I joined the team, Razorfish had long finished the designs; however, the designs were not in any shape ready for development. With Razorfish working with strict initial business requirements, a lengthy list of features, and limited time, the designs we were left with had usability problems ranging from design inconsistencies from faulty design systems to accessibility non-compliance.

Problem Statement

How might we create development-ready designs for Reece USA's customer-facing Bath and Kitchen website that would fit strict business requirements and have a smooth and friendly user experience on desktop and mobile platforms?

Design Analysis

From the designs that Razorfish had handed off to Reece, the UX team created a slide deck detailing all of the UI inconsistencies and bugs that would result in poor user experience. For each aspect and category, we wrote out the issue at hand, the task required to fix the issue, and a time estimate to help the Scrum Master, Project Owner, and Business Analyst in being able to gauge the results we would have in the upcoming Sprints.

Next Step

With the slide deck detailed, one of the first steps we took was taking a new approach to organizing the files for the designs. Razorfish had created a file for each of the features without prototyping each. To make things easier for myself and anyone else who may eventually work on this project, we moved everything into one file and created a page with the full working prototype. The number of features included was significant and I knew that not everything would be feasible for development in MVP so we held discovery sessions to find out what features were actually part of MVP.

One important part of spending my time wisely would be fixing the designs that would actually be used and tested by customers in MVP. After several discovery calls, we were able to produce a list of all of the features in MVP.

Site Map

Even within MVP, we found out that it would be developed in two phases so we decided to create a simple site map that would guide users through the prototype in a way with visual aid.

Global Updates

From the Razorfish designs, the changes shown below are updates made throughout the entire design file that details the issue, risk, and the updates we made globally in each slide.

Component Updates

We also went through all of the components and redesigned them to be consistent. The following slides go over the different components we made updates to with the before and after. This means reorganizing and managing the team's design library.

Screen Updates

Some of the required screens were simply never designed or they did not fulfill the entire requirement so in the following slide deck, we show some of the screens that needed to be designed or redesigned.

MVP Prototype

Following the visual and experience design updates, we put together the prototype to have all of the MVP deliverables, ready for development. I filmed a walk through video to talk through all of the interactions available on the desktop site.

Home

Search

Showroom

Shop

Product Detail Page

Account

My Reece

Cart

Trial and Error

Putting together the MVP prototype took months of discovery and redesign. With daily changing requirements and unclear business requirements, due to many technical decisions that needed to be made, we performed almost daily A/B testing. For every single screen that required redesign, which was most of them, we prepared several versions of the design ready for testing with our internal business team, architect team, marketing team, showroom team, and many other fellow UX designers on other projects in the company.

For instance, one of the flows that went through many iterations was our cart flow. At first, it was decided that in MVP there would be no opportunity for a complete checkout flow (regardless of the user being a guest or logged on); however, that decision changed and checkout would be available. That decision opened up a lot of doors for questions and further discovery. What did it mean? Is guest checkout available? What payment methods would there be? Can users save their payment methods and addresses? How will the tax be calculated? Does the user still have to select a showroom? Will there be shipping or will customers only have the option to pick up at a showroom? How will shipping be calculated if it is an option? Will there be multiple different shipments or will shipments happen only after the entire order can be fulfilled? What will the order history page look like?

Early Cart Designs

In this cart design, users do not have the ability to check out completely and nor do they have the option to get the order shipped in this flow. All they are essentially doing is creating a cart full of everything they want to purchase and sending it over to a showroom which is when the showroom will get in contact with the customer to complete the checkout.

The video below shows the earliest design that I worked on in this project. It has since evolved to the cart flow as seen in the MVP prototype above.

Next Step

My work with Reece Bath + Kitchen has not concluded, we have only worked on the MVP features for this site. There are many upcoming features that will be necessary to implement in the following months. I will take a leap at the beginning of the next phases by beginning the discovery and having early discussions to plan for the next features.

These next features include: Inspiration Galleries, Moodboards, and Projects.

Discovery

For the next set of features, I decided to check in with our key stakeholders to align on business requirements. These features are very extensive and not every single design decision made by Razorfish had been detailed out. I prepared the following slides to demonstrate to the stakeholders what concerns I had and what inconsistencies I found.

Phase 2

With business arranging priorities, I used this waiting period as an opportunity to move ahead and give myself more time to make user-friendly designs for some of the most important features that will be on Reece's Bath + Kitchen site.

Inspiration Galleries

The two main additions to the site are features called Moodboards and Projects. In order for a customer to make the most out of those two main features, inspiration galleries are important in helping them visualize or shop a look.

Discover Your Style

The screen on the left is one of the inspiration gallery options. These inspiration boards are curated by Reece employees and customers can use these to look at recommended products. If the customer likes a product on the board, they can save it to moodboards that the user creates.

Featured Work

The screen on the right is another inspiration gallery option. These inspiration boards are projects that Designers and Builders have successfully worked on. It is a chance for them to show off their work and for customers to select Designers and Builders for their own projects.

#MyReece

The screen on the left is the final inspiration gallery option. These inspiration boards are projects that Reece customers have successfully completed and want to show off. The customer can choose to share their project priorities, budget, timeline, team (i.e. advisors, builders, and designers), and moodboards.

My Moodboards

Once a customer has created a moodboard, they can visit their moodboard to share, edit, remove, and add to projects.

My Project Hub

Users can start a project and organize all important details of their project from My Project Hub.

User Testing

In order to see if these designs align with the true experience of Bath + Kitchen shoppers, I tested these designs with three Reece Bath + Kitchen Showroom Managers. Showroom Managers are responsible for giving customers a satisfactory experience shopping at the showroom which means understanding the wants and needs of their customers is always a priority. I also tested the designs with the Regional Vice President of the Bath + Kitchen Showrooms and her job is to oversee all of the Bath + Kitchen showrooms.

These user testing sessions consisted of two primary goals:

Evaluate the ease of creating and adding products to a moodboard
Evaluate the ease of manipulating contents within a moodboard

User 1: Showroom Manager

Our first participant is a Showroom Manager.

The main takeaways:

Creating a moodboard and adding products to moodboards are very easy (from a scale of 1-5, 1=very easy, 5=very difficult), our first participant rated the task 1 (very easy).
Manipulating contents within the moodboard was not as easy, our participant rated the tasks to be 2.5 (pretty easy).

User 2: Showroom Manager + Trainee

Our second participant is a Showroom Manager joined with a trainee.

The main takeaways:

Creating a moodboard and adding products to moodboards are very easy (from a scale of 1-5, 1=very easy, 5=very difficult), our first participant rated the task 1 (very easy).
Manipulating contents within the moodboard was not as easy, our participant rated the tasks to be 2 (easy).

User 3: Regional VP of Showrooms

Our third participant is the Regional Vice President of the Bath + Kitchen Showrooms.

The main takeaways:

Creating a moodboard and adding products to moodboards are very easy (from a scale of 1-5, 1=very easy, 5=very difficult), our first participant rated the task 1 (very easy).
Manipulating contents within the moodboard was just as easy, our participant rated the tasks to be 1 (very easy).

User 4: Showroom Manager

Our fourth participant is a Showroom Manager.

The main takeaways:

Creating a moodboard and adding products to moodboards are very easy (from a scale of 1-5, 1=very easy, 5=very difficult), our first participant rated the task 1 (very easy).
Manipulating contents within the moodboard was just as easy, our participant rated the tasks to be 1 (very easy).

User Testing Main Takeaways

I created a list of action items from the user testing results and feedback:

Text link component needs to be updated to have a more defined font size
The location of the search icon is not obvious at first glance. The lack of a search bar in the navigation bar increases the amount of effort for users to find products
The menu needs to be updated because navigation using the menu is not crystal clear
Navigation bar icons should have a text on hover state
Font size in the navigation bar should be increased
Deleting a moodboard is not possible on My Moodboards
Renaming a moodboard is not possible on My Moodboards

Design Evaluation

Unfortunately, my journey with Reece Bath + Kitchen ends there. At the beginning of February, I was pulled in to work on a new project for Reece's upcoming eCommerce mobile application, maX Mobile. To conclude my work, I went over the design files and made sure to organize the file and include detailed annotations for future developers and UI/UX designers to work on.

I have made tremendous user-backed improvements to Reece Bath + Kitchen to help customers shop comfortably online and experience Bath + Kitchen showrooms through the screen. The goal of this site is to help fulfill customers in building their dream homes (bath, kitchen, outdoor, and laundry spaces) by connecting them to high-quality products and experienced builders and designers. Builders and designers would also be able to use the space to connect with customers and promote their work by sharing specific project details.