Fintech Figma Design System

Crafted comprehensive branding and visual identity for Canua, integrating Aarron Walter's emotion-driven design methodology. Developed product personality ideation in collaboration with the client, emphasizing a thoughtful and user-centric approach.
Design System for a fintech product
Company
Canua is the first-ever personal finance automation platform.
Industry
Fintech, Banking
Role
Lead Product Designer
Key Areas
Design System
Visual Design
UI

About

In response to the integration of multiple open banking APIs, like Plaid, we initially aimed to craft custom icons. However, recognizing the broader potential, our focus expanded to include various components, leading us to embark on a comprehensive design system project for Canua.

Our primary goals were twofold: firstly, to streamline and expedite the process of designing and engineering by enabling the quick creation and replication of pages and complex components. Secondly, we sought to establish a unified language across cross-functional teams, fostering visual consistency throughout Canua's interface.

The project unfolded in stages, commencing with the development of a style guide. Subsequently, we delved into constructing a component library, encompassing individual UI elements. As the project evolved, we extended our efforts to include a pattern library, housing collections of UI element groupings and layouts. This systematic approach not only addressed the immediate need for efficiency but also laid the groundwork for sustained visual coherence within Canua's design ecosystem.

Stats & Results

Timeframe
1 year
Team
7 people
Components
1728
Icons
915

The Design Process

01
Icons
Initiating the design system journey, we began with the creation of an Icons Library. The focus was on crafting icons for every income and expense category across various integrated open banking APIs, such as Plaid.
02
Research
Recognizing the need for a more comprehensive approach as the product expanded, the next step involved Research. I delved into understanding developer preferences and optimal file structuring. We concluded that a dual approach using Figma and Zeroheight would best serve our needs.
03
Component Lib
In the Component Library phase, the initial emphasis was on constructing less complex elements. This involved the creation of individual UI elements, including e.g., buttons and menu items, streamlining the design process.
04
Pattern Lib
Expanding our efforts, we later introduced a Pattern Library. This addition aimed to enhance efficiency in both design and front-end development by incorporating groupings and layouts of UI elements, ranging from cards to entire pages composed of components.
05
Figma
In Figma, the culmination of the design work took place. The components were meticulously structured according to industry standards and developer preferences, ensuring a seamless transition to the next phase.
06
Zeroheight
The final step involved the creation of a Zeroheight file. This file not only compiled all components from Figma but also included essential code snippets. This document served as a practical reference for developers, facilitating easy copying and pasting and providing a foundation for issue resolution.

Icons

Design System for a fintech productIcons for a fintech productDesign components for a fintech product

Components / Component Library

Design System for a fintech product

UI Patterns / Pattern Library

Pattern library for a fintech product

Figma & Zeroheight

Design System for a fintech productZeroheight and design system for a fintech product