Color Matching in the Design Lab

Problem

Customers can upload their logos and other imagery in the Design Lab. While their logo may look correct in the initial mockup, it may not arrive looking as expected once it's printed. Many customers don't know that stock colors are printed by default and may not be an exact match to their branding. Customers could only find out about our color matching options by calling customer service and this was not called out in any obvious spots on the website.

Solution

We increased awareness of color matching options in multiple spots within the Design Lab and created a self serve experience for entering custom colors. This enabled customers to easily color match any color in an uploaded design.

Outcome

A conversion lift of $1.7 million was gained with this new feature. 

Now brand colors are being added more frequently and the final result matches customer expectations. 

Determining the Problem

Business customers, our target audience, need their designs to print in specific colors that are part of their branding. Looking at error data, it was clear that we had a problem correctly matching the colors of uploaded designs. Many of these color mismatches stemmed from colors in uploads that didn't match our standard color palette.

After analyzing the data, I conducted a competitive analysis to understand how competitor sites and design sites approach color options and matching.

Internal Experience

I looked in the internal company wiki to understand how color matching was being handled by internal roles. After talking to sales reps, I was able to understand that additional charges were needed in many cases. Charging customers after they had already placed their order was creating a negative experience.

If we enabled a self-serve color matching feature, then sales reps would be able to spend less time helping customers with color matching and post-order error resolution.

Early Alignment

I connected early with the product manager and engineering to ask questions and review basic wireframes that illustrated potential solutions. It was essential to understand  and align on what was and wasn't possible based on technical limitations and time constraints.

While an ideal user experience would be to allow the user to give us their custom colors in the format they have available, we needed to start with a limited scope to get initial learnings. After conferring with internal teams, we proceeded with Pantone matching as the starting point because we could more confidently guarantee an exact color match than we could with other color types, like CMYK and RGB.

We also discussed pricing and agreed it was important to create transparency around the price throughout the experience to ensure price conscious customers could make an informed decision.

Usability Testing

Usability testing was done to validate functionality and clarity of the high fidelity designs. While the process was easy for users looking to ensure a Pantone match, there were some tweaks needed to ensure maximum clarity and price transparency.

The way the price was originally displayed in the modal caused confusion. The button was designed to show the additional price being added to the order total, but because it was a also a "save" button it wasn't clear if the user was increasing their order by $20 or saving $20. With multiple areas in the flow already hitting on the price, I opted to remove the price from the button.

Final Designs and Handoff

The final designs were reviewed by UX leadership and stakeholders. Then the handoff file was reviewed with the engineering team to get alignment on execution. Because of regular communication throughout the process, the handoff and design QA were a smooth experience.

Impact

The A/B test showed positive results for the test and a conversion gain of $1.7 million. 

We're optimistic we will also see a reduction in color errors and that data will be coming soon.

Next steps

We learned Pantone matching is something business customers need and are willing to use a self-serve option to ensure brand colors are matched. The next step is to upgrade the experience for the next phase of work.

To make the process smoother, we can enable users to enter Pantone colors, Hex values, CMYK values, or RGB values so they will be able to enter the color type they have on hand. These updates will take the color matching tool to the next level and ensure a great experience.