Summary
As a design lead with the relatively new Design Systems team at Copper, I lead product management, research, and direction for their product rebrand. Together, with the close collaboration of the brand and marketing teams, we helped usher the product brand into a new era, making it something that would seamlessly fit in with their new company brand and all of the existing user experiences while making the product more consistent and accessible.
Company
Copper CRM Inc.
Duration
Aug 2018—Jan 2019
Role
Design Lead
Design Direction
Product Management
Copper is a customer relationship management tool that helps businesses and teams thrive in the relationship era.
The Problem
Copper had just gone through a significant rebrand as a company. While the marketing site and related assets were all updated, the product was still in need of an update to reflect the new brand and create a cohesive experience for users across their entire journey.
In fact, a study published in the Behavior & Information Technology Journal that was later backed by a separate study conducted by the research team at Google, found that people develop an opinion within the first .05 seconds based on the design of a website. To give you some perspective, it takes a human .3 seconds just to blink. This research alone made this project all the more important for Copper’s business.
Discovery
To get the ball rolling on this project quickly, I started by gathering any pre-existing reference material as well as any brand related guidelines and documentation I could find to better understand what foundations had already been laid by Copper’s marketing and brand teams.
Knowing that we were a very user-centered company, the first step in rebranding the product was to establish what is one of the most fundamental human traits, the feelings & emotions we wanted our customers to have when they used our products. So, I pulled in several members from the design team as well as some key stakeholders across marketing, sales and success to collaborate and get alignment around what these feelings & emotions should be via a mood board workshop that was based on the foundations that were uncovered previously. The result was six major themes that would become our primary guidance as we moved forward with the project.
1. Bold, not LOUD
We are not afraid to be different, make a statement, and be opinionated. However, we are never overwhelming or overbearing.
2. Open to All
We believe that the most successful businesses of the future will be the ones that embrace diverse perspectives and backgrounds.
3. Inviting
We are warm and welcoming.
4. Expressive & Playful
We’re passionate and energetic about what we do but also know when to kick back and have some fun.
5. Modern & Mature
We know the way work gets done is always changing and we change with it. We always strive to be reliable and professional.
6. Quality
We believe no detail is too small.
Our Goals
It was at this point early on in the project that I discussed what success might look like when the project was complete with stakeholders. While it was challenging to provide a pure measurement of success for a product rebrand, we came to the agreement that it meant maintaining the existing usability of our products, which our customers had come to love us for, and we prided ourselves on.
Exploration
Now that we had established and agreed upon our set of themes and goals for the project, we began experimenting with color and our products.
Color Speaks in Volumes
One of the first ways we began experimenting with color was creating a bunch of different color volume scales. Creating these scales would help us get a sense of which combinations and volumes of color best aligned with the previously determined themes and the feelings we wanted our users to have while using our products.
After reviewing the color volume scales, we uncovered three solid directions that we wanted to move forward with and explore further.
Product Tests
Once we had a clear sense of color combinations and volumes that we wanted to pursue, we began testing them in product wireframes. Testing colors in this way allowed us to quickly see how the color combinations might be applied to the product.
After reviewing these as a group had a clear understanding of how the colors we were moving forward with might be applied to Copper’s products and page layouts as well as providing us with alignment toward a final direction.
A Refined Palette
While we had an existing brand color palette to lean on for some of our early explorations, we quickly discovered with our product tests that it was not extensive enough for use across all of our products. So, I began building a new color palette with the original palette serving as a guide. The result was seven color ramps that could extend to any of Copper’s products with WCAG AA rated accessibility and more flexibility for use.
Test 1, 2, 3…
Once we had a refined and full palette to work with, we started increasing the fidelity of our visual product tests. It was at this stage, before we moved toward development, that we completed a series of 5-second usability tests alongside a few customer interviews to understand if any of the color changes we wanted to make would impact the usability of our existing products.
The testing and customer interviews seemingly revealed what we had already suspected. The color changes we were exploring did not significantly impact the usability of Copper’s products for the test participants, allowing us to continue forward with development.
Color Variables
Having been our first project as a Design System team, it was vital that we fix the existing color system in the codebase before introducing any new color updates. So, we spent a few weeks meticulously moving from the spaghetti mix of hard-coded hexadecimals, variables, and SCSS tints and shades scattered throughout the code to a single theme file with a list of all of the available color variables, making it quick and easy to change out, add, or remove colors in the future.
Letting Our Personality Shine
The final result of all of our hard work was an extensible and accessible color palette and product that aligned with our brand, our personality, and gave users a strong sense of who we were and what they could expect from us as our customers.
Key Learnings
Usability tests don’t always reveal what will happen until something new is put out into the wild. After we released the first rebrand update, we got some negative feedback, most of which we anticipated, from some of our largest existing customers. What we did not expect, was what some of the input would be about. After reading through the feedback and speaking with a few customers and Copper’s success team, we discovered that customers relied heavily on the different colors for each record type that previously existed throughout the app before the rebrand for training and learning the app.
We later learned the reason they relied so heavily on the colors for training and learning the app was actually that the page layouts in the app were too homogenous for users to distinguish between the different types of records they were actively looking at. This confusion negatively impacted the usability of the app, our primary goal with this project. So, to quickly fix the issue in the short term, we brought back different colors for each record type but in a much less prominent way. This small change provided existing customers with the help they needed while giving us time to further understand the problem before considering any more substantial changes.