Copper Design System
A look into the Copper Design System
Company
Copper Banking
Year
2021 - 2022
Roles
Director of Product Design
Tags
Product design, UI design, innovation, design system,
design strategy, product strategy
Copper Design System was the first design system that I created from the ground up. If you are new to design, a design system is a collection of visual elements for your company’s digital products. This collection contains the foundational elements such as color treatment, typography, grids and layout and iconography. Additionally, this system has a collection of components, such as, buttons, cards, forms and more. These components are what designers use to keep their product consistent. The design system creates a single sources of truth for the entire product team.
I wanted to establish a design system for a few reasons. First, a design system speeds up the way our design team works, which makes the product team more efficient and effective. Second, a design system creates more consistency and harmonizes the product with the entire brand ecosystem. Lastly, I collaborated with front-end engineering to tokenize the design system which makes development even more efficient.
The first thing that I did was do an internal audit on the entire app ecosystem (both teen app and parent app). I brought all the components into one file and checked their component spacing, padding, and typography. I soon noticed that there were several types of components that were all inconsistent of each other. This was manly due to not having a working grid and spacing guidelines within components and layout.
I knew that I had to make a design system that was scalable, so that was my first thought. I also needed to make sure I had one that fit both iOS and Android, as we had both those user types. In the next section, you will see my design vision and approach.
Copper's design approach
Our goal is to empower and inspire our teens and parents to make sound financial decisions while we provide them a simplistic and intuitive experience, so they can be financial independent from their parents.
We do this by being:
Customer-first
We are customer-oriented and customer-driven
Innovative
We are always one step ahead
Simple & Intuitive
We breakdown the complexity
Scalable
We make meaningful decisions as we grow
For iconography, we stuck to the material design system icons. We tweaked a couple to make the two-tone that matched our Core Purple and Lilac. For the most part we played around with illustrations until we found something that match our brand. We collaborated with the marketing team to enforce alignment across product and advertising materials.
