How might we imrpove working process for designers and developers as well as provide consistency in the product?
Product
FinCompare is a comparison portal, offering small and medium-sized businesses digital access to financial solutions. Its product is a platform where SMEs, financial advisors and bank employees work together on applications.
Challenge
Over 6 years of existence, FinCompare lacked a design system as well as UI library. As the team and the number of developed features grew, designers and developers started to face challenges in the daily work.
Solution
Being fascinated about improving working processes and collaboration between design and developers, I pitched a necessity of the design system and started working on it.
It is known that without a design system, product teams struggle with inconsistency, inefficiency, poor collaboration, and scalability challenges. Apart from that, we faced also following problems:
User Confusion
Inconsistent patterns for the same actions led to user confusion
Slow Design Process
The absence of reusable design assets caused delays as everything had to be created from scratch.
Slow Development
A limited number of reusable components slowed down development and testing.
Diffucult Onboarding
Bringing new designers and developers up to speed was extremely challenging due to the lack of a documented system.
While I was pitching the idea of having a design system, here is how I explained how will our product benefit from having it:
Speed Up Workflows
Make our design and development processes more efficient, saving time and effort.
Quick Iterations
Easily update and refine designs with a ready-to-use components library.
Better User Experience
Maintain a consistent look and feel across our platform, making it easier for users to navigate.
Interviewing colleagues uncovered plenty of pain points
While biggest pain for designers was inefficiency of current assets and the need to design from scratch, developers complained about inconsistency in different libraries and no single place of truth.
UI Audit showed the scale of the problem
According to Atomic Design, I run an inventory of the current state of the interface components, and as a result, I identified a lot of inconsistencies, which only proved that a design system is urgently needed.
After I presented the findings of the UI Audit and received a green light to continue working on the design system, I led a collaboration between design and engineering: we agreed to set up a UI component library in Figma for designers and another library in Storybook - for developers.
We regularly synced to nail down such things as grids, breakpoints, and naming conventions—because teamwork is everything!I
also organized everything using Atomic Design, and when I saw our components were outdated and lacking accessibility, I drove the updates to ensure our design system was not only modern but also inclusive.
Reusability
Every element is an instance of the component provides with harmony and clarity
Scalability
Create one component that covers as many use cases as possible using component properties in Figma
Accessibility
Components should comply with WCAG AA accessibility standards
Responsiveness
Layouts are user-friendly on every screen with a Figma’s Autolayout function as well as defining breakpoints
Aesthetic
Provide users with a delightful experience on the platform
Some of my activities from this stage:
1. Defining new color palette (primary, feedback, neutrals), typescale, and grid taking accessibility and responsiveness into focus
2. Unifying tokens and components, for example, limited the color scheme to max 9 shades or decreased number of used font sizes
3. Redesign of the main interface components, improving user’s interaction with them
4. Regular check-ins with other designers and developers to present iterations on the component and get a feedback
5. Writing a documentation about use cases when each component should be used
At this time, because of the scale of the project, I also got help from my team, so kudos to them!
Using Figma Variants, we incorporated states (hover, active, disabled) and layout variations (icon left, content right) to meet diverse needs. Each component was meticulously documented with specifications for size, margin, padding, and responsive behavior.
After handing off the designs to engineers, these components came to life in Storybook, ensuring consistency and usability across the entire product ecosystem.
It was a true team effort that streamlined workflows and set the stage for scalable design solutions.
To ensure the design system's success, I created comprehensive documentation in Figma, complete with guidelines, best practices for design, and developer tips. This became the go-to resource for seamless collaboration between teams.
On the development side, our team built a robust pattern library in Storybook, thoroughly documenting component use cases. Together, these resources empowered designers and developers alike, ensuring consistency, clarity, and efficiency across the board.
Creating a design system might not always come with immediate metrics to flaunt, but its impact was undeniable. For our team, it transformed the way we worked:
Designers gained the freedom to focus on creativity and solving real problems, no longer bogged down by recreating screens or triple-checking consistency. Meanwhile, developers celebrated having a robust library of components, reducing errors during QA and streamlining their workflow.
The result? A more harmonious, efficient, and motivated team, with everyone working smarter—not harder. It was a game-changer, and being at the helm of this transformation was one of my proudest moments.
