Sherwin Williams Case Study

Background

At Sherwin-Williams, I played a pivotal role in transforming the Blend and Tint Application (BaTApp) as part of the Facilities product team. My primary focus was the UX design of the crucial Order Tracker page.

Problem

The existing Order Tracker page struggled with clarity in indicating the order type of line items. This ambiguity resulted in inefficiencies for customer service representatives (CSRs), hindering their ability to provide timely updates to customers. The challenge was to enhance the display of order types, thereby streamlining CSR operations.

Objective

“How might we enable customer service representatives to quickly track lines items that are associated to orders in other systems?​​”

Approach

Feature Breakdown Workshop

We initiated the project with a comprehensive workshop involving the product team and UX lead. This session defined the feature scope, identified limitations, and paved the way for user interviews.

Research - Round 1

We conducted in-depth interviews with four CSRs across various facilities to gain insights into their order-tracking processes. Key findings included:

1. Icons used to indicate blend and purchase orders were unclear to the participants

   • Most participants could deduce that the paint icon related to a subject related to the paint itself. All participants had no idea what the receipt icon was supposed to represent, with the common guess being that it signified if an order had a note attached to it.

2. Experienced CSRs had an easier time finding out what order type a line item was associated with compared to new CSRs

   • Users in OT currently have to decipher product numbers to get an idea of the order type, which puts inexperienced users at a disadvantage compared to experienced users.

3. CSRs split orders into multiple orders instead of placing everything into just one order.

   • CSRs rarely placed everything into a single order, so the participants spent most of their time on the order tracker looking for the multiple orders they had made.

Lo-Fi Ideation and Decision for Second Round of Interviews:

We began brainstorming solutions via lo-fi wireframe ideation to display order types more clearly.

However, we discovered that our initial designs didn't consider a key insight: CSRs were splitting one order into multiple ones. We decided to conduct a second round of interviews to understand this issue better.

Research - Round 2

For the second round of research, we conducted user interviews with CSRs to gather insights on creating orders, entering data into POS, and reasons for splitting orders. We also validated a prototype of the Order Tracker page, focusing on displaying order types in the current experience.

The key findings highlighted in this second round were:

1. Orders were being split up based on two main factors: where the line items were coming from (their order types) and when they would arrive at the customer

   • CSRs were trained to ensure that items that were available quicker were sent to the customer as quickly as possible, without having to wait for everything to be ready to send the entire order.

2. Users want to continue splitting up their orders but want to be able to view them together.

   • Splitting up orders helps the CSRs have more control over the line items themselves and makes it easier for the customers to know when specific items are coming in before others. Being able to view orders together eliminated the downside of relaying the status of orders to customers.

3. The prototype's feedback was positive, and the participants found it very useful to see the order types on the primary and drawer data grid.

   • There was no confusion whatsoever about what the order type column meant, and they liked that they could instantly piece together what was contained under each order.

Findings Presentation

We articulated our research findings and proposed solutions, emphasizing:

• Users want orders to be split up and merged at the same time

• Inexperienced users want to be able to know what order type a line item is without needing years of work experience and inventory knowledge.

• Icons currently used in Order Tracker were unclear to users.

2 Solutions Proposed

1. Ideal Solution

Merge orders with the same PO number and split them based on availability and source.

2. Immediate Solution

Display order type labels in both the primary data grid and order details drawer.

Results

Three deliverables were made after the presentation of the findings:

Order type labels on the main datagrid and drawer datagrid (Immediate solution)

After testing the designs, we created high-fidelity mockups of the order type label display to hand off to the developers. We updated the production version of the order tracker page by merging branches within Figma. This feature was fully released to the production version of Order Tracker last month.

Updated Order Creation Work Flow

Before designing our ideal solution, I updated the user flow for the order creation process CSRs go through in light of our research findings. The updated user flow highlights two aspects of this process.

The first side showcases how the CSR builds the orders, taking the customer's order and creating multiple COEs categorized by order types. It ensures the priority blends are first, followed by blends, then customer direct, and ending with external. After that, it shows how the CSR creates more COEs for back-ordered items (items that are delayed), a common occurrence for CSRs.

The second side showcases how this order creation process is displayed in Order Tracker to showcase what happens on the opposite of this process and how the multiple orders can make it cumbersome to comprehend everything.

Mockups of a new secondary page

Our report includes a simple wireframe that shows how we could display multiple orders together in one view. Initially, we thought about adding this new solution to the current drawer view on the Order Tracker. However, after finishing the new order creation user flow, we realized the potential size of combined orders. We also considered upcoming features for the order tracker. Based on these considerations, we decided to focus on creating designs for a new secondary page for Customer Service Representatives to use when they click on an order.

We aimed to efficiently implement these pages, so for the MVP version of the mockups, our goal was to transfer all the content currently visible in the drawer to a new page. Due to the larger size, we were able to experiment with the layout and spacing of information to strike a balance between displaying enough data without overwhelming the user.

After learning to remove drawer contents and display them on a separate screen, we created more sophisticated mockup versions. These demonstrated user navigation to the page, different secondary page types (e.g., single order view, multiple order view), and how the system would handle page errors.

After finishing the mockups, we presented the designs to the developers, who approved them and confirmed that the MVP was feasible. However, shortly thereafter, the project was put on hold because the product team needed to focus on implementing backend/API features to prioritize retiring POS.

Outcome

Our solutions received overwhelmingly positive feedback. With the solutions implemented, the goal of improving the user adoption rate by 10% was achieved, leading to the commencement of the proposed feature development. Although the project was temporarily placed on hold to prioritize back-end features, the foundational work ensures a seamless and efficient transition when growth resumes.

Conclusion

This project significantly enhanced my expertise in user-centered design and iterative research processes. It underscored the importance of continuous user feedback and adaptability in crafting effective design solutions, resulting in improved user experience and operational efficiency at Sherwin-Williams.