Client
PFI Insurance · HSBC
My Role
Product Designer
Dev Lead
Vlad Rasnoshkov
Design System for a Data-Heavy Admin Panel
Creating and implementing a Design System for an insurance finance company's admin panel, transforming complex charts and design patterns into reusable components while ensuring data visualization accessibility.
Working alongside a senior Visual Designer and the Engineering team, I achieved two key things for PFI Insurance:
Evolving the company’s design system using Ant Design System, and breaking down reusable components into fully documented design patterns.
Drove the adoption of our design system by testing and refining colours for data visualizations, ensuring they meet WCAG accessibility standards.
I didn’t get to see this project through to the end, but working with our visual expert and engineers to expand our Design System was rewarding and hugely improved its accessibility.
NPS Score
WCAG Compliance Rate
Component Coverage Rate
Problem was - Our product had three different looks across desktop, tablet, and mobile, each built by different teams.
The original goal was to unify the UI styles into a consistent, cohesive experience across all devices and screen sizes.
We already had most of the components in place, thanks to Ant Design System—an open-source library built for data-heavy SaaS. The real challenge was pushing through the complexities of unifying styles with patience and attention to detail.
Our Sr. Visual Designer and I started by creating a well-documented section for spacing.
We had two sizing guides for mobile and one for tablet since only a small percentage of our users were on tablets.
Our desktop grid was designed with flexibility in mind, accounting for sliding menus and the help areas.
We used the Atomic Design System as our foundation to organize all reusable components - kind of like building with LEGO.
To organize all of our reusable components with a clear logic, we followed the Atomic Design guide, breaking patterns down into their smallest building blocks.
🧩 Atoms - The tiniest UI elements, like typography, divider lines, and icons
🧩 Molecules - Inputs, checkboxes, and buttons that are basically made of atoms.
🧩 Organisms - By combining molecules, we created organisms—larger components like cards.
Breaking components down to their smallest parts and reassembling them into larger structures was a great learning experience. I quickly realized that even the tiniest oversight at the atomic level could cause major issues when components were nested together.
To keep everything in check, we went through multiple rounds of QA and design reviews, making sure the entire team was aligned.
Typography, colours, icons were our Atoms.
Buttons were one of our key molecules, designed in three different variations to cover all use cases.
Modals were one of our key organisms. As a big part of our product, we designed them to be structured and user-friendly.
Another challenge surfaced, as we built our design system - The data visualization didn’t meet WCAG accessibility rules.
This became a major roadblock for the engineering team, especially after users reported difficulty distinguishing elements in our line graph with previous colours. 🟥 🟨 🟩 🟪
So, unlike UI components, where contrast can be controlled with background and text, charts with data rely purely on colour distinctions, making it harder to guarantee readability for users with colour vision deficiencies.
Since clear data visualization was crucial, I pivoted to explore better colour options, ensuring accessibility without sacrificing clarity.
Our line graph colours completely failed WCAG accessibility checks 😓.
Turn to the big names for accessible data visualization - I researched how major industry leaders approach colour in their charts
I looked into SAP, IBM Carbon, and Atlassian, exploring how other successful SaaS platforms balanced aesthetics with accessibility.
The biggest takeaway? It’s nearly impossible to create vibrant, creative colour combinations that also meet strict WCAG accessibility standards. It’s often a trade-off, either you prioritize aesthetics or ensure accessibility. That’s why most major platforms use similar muted, desaturated colours.
With this in mind, I adjusted our chart colours to align more with SAP and IBM’s approach. The result? Our charts still looked clean and professional, but accessibility was significantly improved. This turned out to be a major win for our design system—ensuring compliance no longer stood in the way of adoption.
Major platforms use similar muted, desaturated colours.
Charts with fully accessible colours. It became a main driving force for Design System adoption.
Last but not least, updating our design system documentation with accessible colors—both categorical and diverging.
To make sure our Documentation was the single source of truth for all future data visualizations, we added the colours for charts section.
And to keep everything aligned, our engineering team collaborated on naming conventions, ensuring they were part of the process and avoiding discrepancies during implementation. They also built the ARIA section for our charts, a crucial step in making our product more inclusive and accessible to all users.
Updating the accessible colours (both Categorical and Diverging) in the Design System documentation.