NovaTrans
Rol: Design System Specialist
Project Type: Freelance
Team: CEO, 2 technical development leads, me
Timeline: March-May 2025 · In development
Tools: Figma
Problem
Although NovaTrans is a leader in its sector, its outdated visual interface threatened its perceived professionalism with new clients, especially when compared to competitors offering more modern-looking products.
Goals
Modernize the visual experience and strengthen customer trust.
Create a scalable and efficient design system.
Prepare the product for multi-platform expansion (web and app)
Solution
A new design system focused on accessibility, clarity, and visual consistency.
I started by doing a component and foundations audit of the product to assess the current state of the visual system and its consistency.
After analyzing the scale of the product and how UI elements are reused, I identified a key insight for defining the design tokens:
The product is extensive but heavily reuses a very specific set of components. This meant that a complex or oversized system wasn’t necessary. Instead, it required an optimized system: robust enough to maintain control and scalability, but efficient in time and resources for both design and development.
Design Process
Step One: Naming convention and core token definition
I began by establishing a naming convention for the design tokens, ensuring consistency across both design and development. This foundation is essential for enabling system scalability and preventing misalignment between teams.
I defined the core tokens that support the system — such as color, typography, and layout — and documented them in Figma for both design and development.
Step Two: Semantic tokens by functional groups
A) I then built semantic tokens, grouping them by function and behavior to optimize usage and reduce overall system complexity.
For example, I grouped all components that share a purpose — buttons, inputs, selectors — under the "Action" category, applying consistent colors, states, borders, sizes, etc. This approach ensured visual consistency and allowed for precise change management when needed. It also eliminated the need to create unique tokens for each component, reducing the total number of tokens required and saving both design and development time.
B) For unique components or those with specific behaviors (such as main menus or tables), I defined component-specific tokens. These were always linked to the core tokens, maintaining scalability without sacrificing control or clarity.
Step Three: Component creation and validation
I designed and documented all necessary components in Figma, including their behavior and interactions. Throughout the process, I validated progress with the development team using functional templates, ensuring that the new components integrated seamlessly into the product and addressed the team’s real needs.
The NovaTrans development team is currently implementing this new system in their application.
