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.

Foundations

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

Grids, layout and spacing
Copper Banking Design System
Copper Banking Design System
Color palette
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Iconography and Illustrations

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.

Elevations
Copper Banking Design System
Logos
Copper Banking Design System
Typography
Copper Banking Design System
Copper Banking Design System
Components
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Copper Banking Design System
Low-fidelity UI Kit
Copper Banking Design System