Design System
Building an atomic component-based design library.
Industry
Fintech
Role
UX/UI Designer
Main goals
Build a unified component-based design system to improve efficiency and scalability.
How can we create a design system that is simple, scalable, and understandable by designers and developers?
Creating a consistent design library was one of my first missions when starting at Rauva, to help the scaling of the business and accelerate the growth.
How can we create a design system that is simple, scalable, and understandable by designers and developers?
Creating a consistent design library was one of my first missions when starting at Rauva, to help the scaling of the business and accelerate the growth.
How can we create a design system that is simple, scalable, and understandable by designers and developers?
Creating a consistent design library was one of my first missions when starting at Rauva, to help the scaling of the business and accelerate the growth.
Challenge
At the time, there were 5 different design libraries used across the different products. As Rauva is scaling very fast, we needed to create a unified library, component based to be able to design fast and communicate with the developers efficiently.
One of the biggest challenges was to re-create the library, harmonize it and create while building new designs and new products, as well as updating the old ones.
On the left image, the Dashboard before the harmonization of the design system. We can see plenty of accessibility issues, as well as inconsistent patterns.
Solution
Solution
Creating a single source to view components, patterns, and styles.
New changes for the same projects can be redesigned and managed at scale through the design system.
Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally.
Ability to replicate designs quickly by utilising pre-made components and elements.
Reducing the need to reinvent the wheel and eliminating inconsistency.
Reduces wasted designs or development time around miscommunications.
Creating a single source to view components, patterns, and styles.
New changes for the same projects can be redesigned and managed at scale through the design system.
Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally.
Ability to replicate designs quickly by utilising pre-made components and elements.
Reducing the need to reinvent the wheel and eliminating inconsistency.
Reduces wasted designs or development time around miscommunications.
1
1
system, atom-based
system, atom-based
64
64
components
components
+200%
+200%
efficiency
efficiency
Process
Process
We started with an audit of the app, and all the screens that have inconsistencies. We wanted to move fast, so the easier for us was to start with colors and typeface. We noticed that colors were coming from 5 different libraries and at least 3 typefaces with different sizes were being used.
Thanks to very useful documentation coming from great brands, such as Shopify, Airbnb, Google or Apple, we decided to create an atomic design system with atoms, molecules and particles. This allowed at the same time a lot of flexibility as well as strict guidelines. We decided that once the components are built, we would be allowed to edit them only as local components, but the golden rule was "never detach an instance".
We instored weekly meetings with the developers to show them the progress, and also to understand their point of view, and the complexity of implementation. Desktop and mobile are built on different stacks, so we would have to create 2 different design system on the front and back-end. This was extremely useful and prevented us back and forth, allowing a smooth implementation.
We started with an audit of the app, and all the screens that have inconsistencies. We wanted to move fast, so the easier for us was to start with colors and typeface. We noticed that colors were coming from 5 different libraries and at least 3 typefaces with different sizes were being used.
Thanks to very useful documentation coming from great brands, such as Shopify, Airbnb, Google or Apple, we decided to create an atomic design system with atoms, molecules and particles. This allowed at the same time a lot of flexibility as well as strict guidelines. We decided that once the components are built, we would be allowed to edit them only as local components, but the golden rule was "never detach an instance".
We instored weekly meetings with the developers to show them the progress, and also to understand their point of view, and the complexity of implementation. Desktop and mobile are built on different stacks, so we would have to create 2 different design system on the front and back-end. This was extremely useful and prevented us back and forth, allowing a smooth implementation.
Results
Results
The design system is still in progress, and constantly being iterated on. With the new components that were implemented, it has improved the product. From a quarter to another, the amount of ticket completion increased from 40% thanks to this.
We spend less time on coding new components, handoff goes faster, there's less back and forth during QA and coded design is way more consistent.
The next step would be to create all the documentation on Confluence with every single use case to help onboarding of new designers and developers
The design system is still in progress, and constantly being iterated on. With the new components that were implemented, it has improved the product. From a quarter to another, the amount of ticket completion increased from 40% thanks to this.
We spend less time on coding new components, handoff goes faster, there's less back and forth during QA and coded design is way more consistent.
The next step would be to create all the documentation on Confluence with every single use case to help onboarding of new designers and developers
Explore more work
Challenge
At the time, there were 5 different design libraries used across the different products. As Rauva is scaling very fast, we needed to create a unified library, component based to be able to design fast and communicate with the developers efficiently.
One of the biggest challenges was to re-create the library, harmonize it and create while building new designs and new products, as well as updating the old ones.
On the left image, the Dashboard before the harmonization of the design system. We can see plenty of accessibility issues, as well as inconsistent patterns.