Color Matching

Giving customers confidence their branding will come out as expected on their custom swag.

Pantone matching modal on desktop and mobile

Problem

Customers can upload logos and other imagery in the Design Lab. While a 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 colors. Customers could only find out about our color matching options by calling customer service and paying an additional fee. 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.

Project Info

Team: Custom Ink Ecommerce

Role: Lead UX Designer and Researcher

Timeline: 3 weeks

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 wireframes that illustrated potential solutions to help us align on the requirements. It was essential to understand what was and wasn't possible based on technical limitations and time constraints.

Limited Scope: 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.

Early Concepts

Working within Technical Constraints

During initial feasibility conversations, engineering let us know that due to technical limitations with the color selection process, we would not be able to integrate this new feature easily into the Lab and suggested we move it further down the flow. Product and UX aligned on this approach and I started working on an add-on option from the quote screen that would enable a user to update any stock colors to specific Pantone colors. This would enable the user to see the cost and feel confident about their branding before adding to the cart.

Pivot from V1 to V2

Though the Pantone match option could work as an add-on from the quote screen, it was clear that surfacing the option earlier in the flow would be more beneficial. Usability testing showed that users were specifically looking for this earlier in the flow and unsure where to find it.

I had another conversation with engineering and product to see if we had any wiggle room in the location. We were able to get more clarification from engineering that we could put the color matching option earlier in the flow, but it would need to be handled separately from the current color swatch selection process.

I pivoted to a simpler approach that enabled customers to enter their color matches earlier, while they were still in the design process. By showing a color matching info alert in key spots, users were able to know their options and add color matches as needed through a modal.

Color match modal

Giving Users a Way to Match Brand Colors

Price Transparency

It was important to create transparency around the price throughout the experience so all users would know the full price up front and to ensure price conscious customers could make an informed decision.

Qualitative Data: Taking past research into consideration, we knew that being up front about the additional price was important to keep customer trust and ensure a clear understanding about the total cost. We have heard feedback from sales reps about how upsetting it is for users to get asked to pay more later in the process, after they have already paid.
Transparent Pricing Through the Journey: Pricing would be shown in the modal, on the quote screen, and in the order summary in the cart.

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.

Accounting for Errors States

With the various user scenarios in mind, I needed to have error states ready for different issues a user may need to address.

Color Changes: With a cost for color matching, it was imperative that the cost was removed if the user changed a color from a Pantone color to a stock color. I created a confirmation alert to ensure users intended to make this change.
Product Swaps: Not all products can have custom colors applied because it is dependent on the print method the product is set up for. An alert was added to confirm product changes so expectations were clearly set.
Quantity Limitations: Pantone matches can only be applied to orders of 6 or more, if there are less than 6 items an error is shown on the quantity screen which gives the user the option to add more items or remove the Pantone matches.

Final Designs and Handoff

The final designs were reviewed with UX leadership, product, 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. These updates will take the color matching tool to the next level and ensure a great experience.

Accept Additional Color Models: 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.
Incorporate Custom Colors: Invest in combining custom brand colors into the same color selection experience as the standard color palette to make the process seamless and even easier to use.
Expand Branding Options: Let users save brand colors, fonts, logos, and other assets to help keep all aspects of their designs on brand with their business.

Check Out Prototype

< Visualization

Personas >

Google Sites

Report abuse