Inspiration and tools used to create Gravity's palette; Adobe Leonardo, Lyft ColorBox, InVision's A guide to color accessibility in product design, Stripe's Designing accessible color systems.
Christoph Foulger
Sr Product Designer
Redefining a brand
With accessibility top of mind and using insights from leading experts, Marketing and Product teams collaborate to bring Gravity Payments and ChargeIt Pro under one brand while laying the foundation for a combined design system.
Project summary
In 2017, Gravity Payments CEO Dan Price acquired the Boise credit card processing software company ChargeIt Pro. There were no plans to combine the companies, opting to work as sister organizations.
By 2019, it was apparent that both teams would function better as one, and our customers and users would benefit from the combined relationship of one organization.
Transition plans were made and rollout discussions started. Marketing and Product worked together to bring materials, websites, and applications into one brand.
MY ROLE
Product design UX, UI: color accessibility strategy, design system structure, style updates to web applications
Tools used: Sketch, InVision, Design System Manager, VS Code
Team: Myself, Product Manager, Marketing Manager, Creative Director, Designer, Copywriter, Marketing Web Dev
Timeline: Oct 2019 - Jan 2020
PROBLEM
Gravity Payments and ChargeIt Pro brands need to be consolidated under 1 brand.
Assets, icons, type, components, and copy assets are not consolidated causing endless rework and unsystematic usage.
Gravity's primary colors (Dark Blue and Bright Green) are an accessibility issue for application patterns like buttons.
Sales and executives want a refresh of the website, materials, and one-sheets.
OUTCOME
ChargeIt Pro tradename retired. To facilitate better user understanding of application use, Maven and EI Server renamed Dashboard and Easy Integrator.
Built the foundational repository for assets, icons, type, components, and copy usage with InVision Design System Manager.
An Accessible Color System was developed based on Gravity's current brand to give designers a vast pallet while ensuring designs remain accessible.
Gravity's marketing materials were updated to use the new color system and freshen up the designs, assets, and icons throughout.
PROJECT APPROACH
Continue reading to see how I challenged the team to keep accessibility top of mind as we redefined the brand. I used a user-centered approach to better humanize our process.
This case study focuses heavily on my personal work for the Accessible Color Palette and Design System foundation. I've also included highlights from the outcome of collaboration between Product and Marketing.
Define and empathize
Define the problem
What are the problems we can address while we redefine the brand for our customers?
After years of quick-paced guerilla marketing tactics and campaign variations, the sales materials are in disarray. A repository of assets has been difficult to keep updated organically. We needed an integrated and easy-to-update system to store information that can be shared across the organization.
All of Gravity's applications and integrations are branded as ChargeIt Pro. Color, theme, and logos need to be updated throughout. Gravity's primary brand colors are not user-accessible when used for UI elements such as buttons. Gravity needs a broader color palette that could be used across websites, applications, and marketing materials. Marketing wants vivid colors to keep the look fresh and lively to appeal to a wide audience.
Hypothesis
Keeping the user front of mind will deliver campaign foundations that will drive sales and usability of the product integrations.
Product team collaboration with Marketing to bring assets into one repository will redefine our design efforts and build customer trust with a cohesive brand.
Creating a broad color palette will give designers freedom while keeping accessibility top of mind. The user will be able to easily read, understand, and take action on CTA's driving sales.
Project limitations
Timeline. The integration of the two companies must match the business transition. PR and press have set a timeline to unveil Boise's new office and signage
The precise timing of the product update releases must match the marketing timeline.
Need to work with 3 dev squads to align the changes and update all products
Assessing the need for accessibility
With the timing of the project, we leaned heavily on personas built previously for our applications and existing sales market data.
Through previous user interviews/sales relationships and reflecting on our market data, we know that a majority of partners and merchants ages are between 35–65. Without specific data on visual acuity, we inferred that we should focus on visual accessibility as a standard.
Gravity and CIP have used "Partners" to define different audiences. It can be confusing to know if it's a sales or a development relationship. Working with Sales teams we defined 2 groups: Partnerships and Developers. This allows us to speak to their unique and specific needs.
Redefining the color palette
Creating Gravity's accessible color palette
Excerpts from an article written for the Gravity team and stakeholders
You can read the full article posted for the team in our Design System. It includes my research and deeper reasoning for each point of research.
As Gravity and CIP are becoming one by name and visual style, the case for standardization is easy to make. Our users need the accessibility that a modern Accessible Color System (ACS, a color palette that includes swatches with contrasts that are ADA accessible) can offer in our current and future products.
As we work to broaden our brand color palette special attention should be taken to make our content and applications inclusive to as many people as possible while giving our designs vivid and colorful options.
My research includes articles and projects from industry experts like Adobe, InVision, Lyft, and Stripe. All of whom have extensive knowledge they share on this topic.
Defining our primary and secondary colors
Incorporating hues from across the visual spectrum
Best practices from my research suggested incorporating colors from each of the main colors in the visual spectrum. Updating our brand to include colors from the entire spectrum gives us design freedom while still defining a palette to keep our presence uniform. Gravity's primary and secondary brand colors did not include all hues. I added Violet, Orange, and Teal to broaden our spectrum.
Defining the spectrum through iteration
No place to start like version_1.sketch
After determining the spectrum I collected our current color swatches from Gravity, ChargeItPro, and emergepay. I aligned these swatches by contrast and experimented with Lyfts ColorBox tool to test if I could adopt colors similar to our retiring brand's colors while keeping Gravity's current primary and secondary brand colors.
I first defined the palette using a similar smooth HSL curve for each hue. I did not consider how much the contrasts varied from hue to hue. When validating the swatches, it was clear this made it difficult to determine compliant contrast ratios without referencing a checking tool or creating a complicated chart.
After some experimentation, It was clear version 1 was not going to be as efficient as needed. While adapting our themes for web, application, or product theme use, I found the HSL curve to be not as dynamic as I had hoped while still keeping the relational visuals pleasing for the new colors added.
On to version 2
A rose by any other color... would be a different colored rose
When selecting a value from the ACS, a designer/developer should be able to select a color percentage across the palette and the same percentages should be relative in contrast. All 10–50 swatches meet AAA or AA as text on a dark background or background for dark text. All 60-100 swatches meet AAA or AA as text on a light background or background for light text.
While generating the tints and shades, special attention was considered to make all 50-60 swatches at least AA in the alternative method. All 50 swatches meet AA as text on a light background or background for light text. All 60 swatches meet AAA as text on a dark background or background for dark text.
I successfully made 50-60 hues at least AA in all hues except yellow. Yellow by its nature is a light contrast. The yellow hues begin to turn dark/brown to meet contrast requirements. Since I wanted to have several brighter "yellow" swatches, I opted to make it meet the 50-60 AA threshold but does not meet AAA in the 50 swatch.
On to Version 3, enter Leonardo
While discussing ACS with the Marketing Designer, she pointed out that the color shade ramp of violet did not vary as much in the upper percentages. She also preferred the cooler gray family rather than the warmer family produced with ColorBox. Taking in these considerations, I used a tool by Adobe called Leonardo. Leonardo is an open-source tool used directly in an application to dynamically change color contrast within the app. When used stand-alone you can define predetermined swatches and adjust contrast to generate a scale.
With Leonardo, I used color swatches from version 2 and generated a new violet and cool neutral scale.
Version-3_final-redux_final2-final.sketch
I would like to think that this is complete, but I am realistic that there will be changes even after our "Becoming One" project launches. Color variable names are set with each hue called out with a scale from 05-100. Using the DSM design tokens the colors can be referenced and updated on the fly in our applications. Using SVG code in icons for apps and the web will facilitate easy updating of revised values. Referring to the palette colors directly in design software will also facilitate global replacements.
I created color swatch pallets in Sketch, InVision DSM, and Adobe libraries to facilitate the roll-out of the Accessible Color System.
Typography, voice, and tone
Typography
Typography also needed to be standardized for the brand. Gravity Payments' current style guide included a safe bet, Proxima Nova. Proxima Nova is a straightforward and geometric type design that offers clarity and simplicity while still offering a beautiful style. There are several weights including light, thin, regular, medium, bold, semi-bold, extra-bold, ultra-bold.
Gravity's logo typeface is Century Gothic and Brandon Grotesque. Both should be used sparingly. When using Brandon it should only be uppercase with a wide character spacing.
Keeping with a user-first approach, our base font size for the web and applications was increased from 14px to 16px. Also, the use of thin and light font faces is limited to text sizes larger than 18px.
Voice and tone
Our Marketing Copywriter provided fantastically detailed voice and tone documentation.
Documenting the voice and tone helps deliver access to everyone at the organization. Allowing them to understand how we talk to our customers and partners. This creates a unified messaging platform extending beyond just Product and Marketing.
I was excited to incorporate this messaging into the Design System.
Design system foundation
Design System Manager
Documenting all our work was essential to bring it to the organization. We've been using InVision for prototyping for years. When InVision launched its DSM I was a quick evangelist to begin use. Our designers quickly discovered the benefit of syncing work and assets.
The DSM became our source of truth documentation and repository to download the latest Sales material.
Evolution of our design system
With age, comes wisdom
In late 2020 the design team right-sized our software solutions and began the switch to Figma. Figma's built-in collaboration and shared components were perfect for our small nimble team. Using Figma as our design system tool, prototyping tool, and dev handoff tool has saved the company a significant amount per year over Sketch+InVision.
I have been working on the migration of the design system to Figma. It is a work in progress but still very valuable. Working from organisational shared components allows me to fine-tune patterns and create a better holistic user experience.
Delivery
Dashboard refresh
After the DSM, ACS, typography, and tone were complete we began rolling out to all our web properties.
Dashboard, formerly Maven, got a facelift to support the new name and Gravity branding. All colors were changed to match our new accessible system giving Dashboard an updated fresh and clean visual style.
Read my Maven case study to see the original branding look and feel.
Website, Sales materials, One-sheets, and Fact sheets
Our Marketing team spent a considerable effort to roll out the branding and consolidate our materials. The website saw a complete rebuild including restructuring our Partnerships and Developer pages.
I was lucky enough to join in on some of the fun with some color, images, and illustration work throughout our Marketing materials.
100%
On-time
92
Color swatches
12x more choices
12x more choices
1
Combined brand