Enabling consistency, and faster feature delivery
Unblocking a re-branding through a design system and building the foundation for a more consistent, higher quality and collaborative culture.
Introduction
To support a strategic change in business offerings CommonBond was embarking on a brand re-fresh. Due to tech debt, the transition posed a challenge.
CommonBond was a financial technology company that offered student loan and solar financing products. Unfortunately, they closed shop in late 2022 and this work did not see it's full potential.
In the beginning, bringing people together and aligning them on a unified path forward was the biggest challenge.
Given the pressures on all teams at CommonBond to change due to the brand refresh we found it difficult to align. Everyone jumped into problem solving mode in silos without consulting other teams leading to lots of churn. I saw this as an opportunity to facilitate collaborative sessions and help the org unify and unblock the brand re-fresh.
Workshops bought people together and goal specific Slack channels helped us align and share information.
I facilitated a variety of cross team workshops, and stakeholder interviews to uncover pain points, align, and identify opportunities to move forward in a unified fashion.
We learned we have similar problems (consistency, quality, efficiency) and were all re-inventing the same wheel.
Design systems allow us to create consistency, quality and efficiency. I felt by creating a cross department design system we could solve our problems together, and setup CommonBond for more efficient growth in the future.
We workshopped what this would look like together and landed on a design system that we all owned.
The core design system team would ensure quality of the system, ambassadors embedded in teams across the org would educate and contribute to the system, consumers benefit from the flexible model.
Maintaining a single source of truth for all, but allowing for brand variablity to meet business growth and unblock the brand refresh.
Distributing key roles to design system members to ensure speed, quality, and not overwhelming the core design system team.
By aligning on the high level strategy and governance we were able to solve our unique problems without stepping on each others toes.
For design, the primary challenge was to allow us to theme all our products, and visually enable the brand refresh.
This was pre-Figma variables
Given that the products were built with a mix of an old style guide and custom styling we had our work cut out for us. Florencia and I started with auditing our current system and then working with engineering to understand how things were implemented.
Working with engineering we found a unique opportunity to enable theming and build in automation to prevent a delta between Figma and code while reducing the management overhead.
A key challenge that arose from the rebranding was the amount of tech and design debt due to rouge primitives and inconsistent principles for building CommonBond products.
Walkthrough of Figma files with tokens
Walkthrough of Figma files with theming
Creating a system of consistency, quality, and efficiency.
Unfortunetly, this project was not fully realized. CommonBond shutdown due to the COVID-19 impact on their student lending business.
