Design Tokens
Components
Auto Layout
Variants
UX Documentation

Design System

UX/UI • Product Design  

Project: Creating a Desingn System for the Confinance app
Duration: 3 Weeks
Year: 2023
Tools: Figma, Figma plugins: EightShapes Specs, Color Shades Kit, Roller, Contrast.

Context

With the goal of developing my design skills and guiding and articulating design decisions to add more UX maturity to my work, I signed up for a three-week design systems online course at Button School.

After learning the foundations of a good design system and understanding it as a product itself and its goal: ensuring consistency across platforms and streamlining the design process and collaboration between users from different departments within a company (engineers, marketing, UX writing, design) we were asked for our final project to put what we learned into practice, with two options: improve an existing design system or work on a new design system for a new project.

I chose to work on an existing project that solved a real problem and, in my opinion, had great potential for improvement: the app " Confinance " which helps people build up their trust in Personal Finance.

Building a Design System

Improving the overall experience by creating a Design System for an existing product.

Working on an existing project is always a challenge, since there were already design concepts and thoughts and ideas about how the application should work and look. Since the project I decided to work on already had extensive UX research and wireframes, I was able to focus mainly on the UI elements, where I saw the potential to bring more consistency and accessibility and strive to improve the overall experience. Now...How can I improve an existing design without losing its identity?

Challenge

Goal

Create a well-documented design system to enhance UI consistency across screens and improve the usability and functionality of the app

The process

Coming soon