Finansia's Design System

Role
Specialist UI Designer
Duration
6 months
Catagory
Design System
Design Tokens
Project Overview
A design system is a collection of reusable components, guided by clear standards, that can be assembled to create a responsive website design. The need for design systems aligns with the demands for scalability, efficiency, and consistency in design. In this project, you will see some of the components built for this design system from scratch, including design tokens and documentation.
Objectives
To establish standards and consistency in design, we consolidate reusable components and clear guidelines.
This enables design and related teams to work together efficiently, reducing redundancy and speeding up the design process.
Acceptance Criteria
The Challenge
Since there was no design system previously, I started from scratch. The problems we identified were:
-
Lack of consistency
-
Outdated styles
-
Colors not following WCAG standards
-
Absence of a style guide
Given these issues, I developed a design system to establish a standard design process and provide a general design framework for other products produced by our team.
- Accessibility: Improves the user experience by following WCAG standards.
- Heuristic: Assesses design elements based on established usability principles.
- Design System Utilization: Every designer on the team can use the design system to streamline their work.
Process
Style Guide
Foundational Elements
Design Tokens
Component Library
Summary
01
Style Guide
Initially, our company lacked a clear style guide for website design, resulting in a wide variety of design styles and outdated. This was the first thing we started on the project.
Target User
Our website and application are currently being used by individuals belonging to the Generation X1965-1980) age group.

Gen X used technology but not as much as Millennials. 72% use internet for business research. consider the following:
-
Simple and Straightforward Design
-
Recognizable Design Patterns
-
Accessibility Features
-
Personalization Options
Our User
Resouce : https://www.bigdropinc.com/
Outcome
We have created a new style guide to enhance the user experience by simplifying, making it more familiar, and increasing accessibility.
02
Foundational Elements
These establish the visual language, including the of elements and the overall voice and tone of the product, such as color and typography. They also typically include icons, logos, illustrations, as well as your accessibility and brand guidelines.
Pain Point
Designs that do not meet accessibility (WCAG) standards can be challenging for users to navigate, particularly due to inconsistent font sizes and color patterns that are not easily visible to adults. This necessitates a redesign, which must be approved by management.
Solution
Revise all of foundational elements to meet accessibility standards by following WCAG guidelines.
Outcome
Typography

The font used by the company is the biggest issue.
Our font family has a significant issue: the 'DB Heavent' font does not conform to standard height metrics. This discrepancy necessitates modifications to align the font with standard values such as X-Height, Ascent, Descent, Line Gap, and EM square. As a result, I had to adjust 'DB Heavent' to 'DB Heavent FSS' using
Color Palette

Using Figma Plugins :)
-
Foundation Color Generator : Create color palettes based on great design systems like Ant Design.
-
Color contrast : check contrast according to WCAG guidelines.
03
Design Tokens
Design tokens are the atomic elements of a design system - the smallest units that store visual design information. They can include colors, spacing, typography, or any other core elements that constitute the building blocks of a product's UI.
Token Naming
The naming convention that we use for our is kebab-case. We replace spaces with a hyphen "-" between each word and all of them lowercase. This convention is commonly used for CSS and HTML5.
After validating the naming tokens modal with our team, we have decided to use the
C-T-I approach.
Outcome
Light / Dark Theme

Using Figma Variables, our team can easily switch between light and dark themes and reduce the time it takes to deliver designs to the development team.
Responsive

To change the font size from desktop to mobile size, simply click on the icon in the variable and adjust the font size accordingly. This feature is incredibly helpful for our team and we hope it makes your website creation process easier as.
04
Component Library
These are reusable visual elements and interaction patterns, such as templates, layouts, code snippets, and components, that define your product's interface and behaviors, all supported by detailed documentation.


05
Summary
Our design system and library provide pre-defined components and guidelines that speed up workflows and streamline the design-to-development handoff, resulting in increased efficiency. Additionally, it minimizes design and development costs, cuts down on revisions, and leads to a 70% increase in design consistency within the team.

Keep up the good work!
Sharing knowledge with our team is a great way to improve collaboration and productivity.
