#designsystem
#productdesign
#uidesign
#figma
#accounting
MyUnisoft - Design System
MyUnisoft is a SaaS software solution for accounting professionals, designed to centralize and simplify the day-to-day tasks of accountants.
To facilitate the design of this complex environment and its various functionalities, the creation of a design system bringing together all the graphic elements was essential.
Here's how I created and deployed this design system.
2020 - 2023
Timeline
Role
Context
Building on a few existing elements, the aim was to create a complete design system, for product teams (P.O., design, developers).
The purpose of this tool is to facilitate the day-to-day work of the teams and ensure the overall coherence of the product.
To create this design system, we began by defining the different levels that would make it up. then we chose the various distribution tools and processes, before embarking on the actual conception of the design system.
Levels
The purpose of defining these different levels is to correctly prioritize the creation of all the elements that make up the design system.
By relying on the first two levels, the design of complex patterns and templates has been greatly simplified.
Level 1 - Foundations
The foundations are the basic graphic elements that are indispensable and necessary to create an attractive user experience.
They include the color palette, as well as guidelines for typography, layout and structure.
These elements will serve as the basis for building the components for level 2
Level 2 - Components
Components are the structuring elements of our design system.
Each represents an interaction that responds to a user interface need.
Created from the fundamental elements, they are designed to work together.
Combining them will enable us to create the patterns for level 3.
Level 3 - Patterns
Patterns are combinations of components. Their purpose is to meet a recurring user need in the product.
In our case, these include navigation elements, modals, tables and forms.
Based on these patterns, we'll be able to build the different pages of level 4.
Level 4 - Templates
Templates are the most sophisticated and complex elements of our design system.
Composed of elements from the three previous levels, each is designed to meet a specific user requirement.
In the production phase, they are enriched by dedicated elements to create our final pages.
Distribution
To ensure that all product teams have access to the same level of information about our design system, we created a dedicated distribution channel.
Conclusion
This design system has enabled us to offer users a coherent environment in terms of operation and interface, providing them with the essential reference points for a comfortable experience when using the product.
For the product team, it has made day-to-day work much smoother and increased the speed with which new features are designed, from the research phase through to the development phase, by having a common base on which to build.
The majority of the elements making up the design system have been designed to be modular, allowing them to adapt to future needs and facilitate regular updating.
Figma File
Tools
Figma
Jira
Zeplin
Storybook
Made with love by Mathis Terramorsi - ©2024