Design System • Shipped 2025

Building a design system from 0 to 50+ components

Timeframe: 4 months
Role: UX/UI Designer
Team: UX/UI Designer
Software Engineer
Skills: Design System, Prototyping

CONTEXT

Building the building blocks of an early-stage startup

Quantoflow is an early-stage startup focused on simplifying complex reporting systems through automation. When I joined, the developers were still in a experimental stage, where ideas were being built, but without a clear direction.

There was no design system, leading to inconsistent UI across pages. I built one from scratch to unify the experience and streamline handoff.

IMPACT AT A GLANCE

50+ component design system to scale and improve development efficiency

Over the course of a few months, I established our design system, brought clarity to compliance workflows and improved consistency and accessibility throughout the entire product.

Feedback and iteration process — Image
Colours and typography.

DISCOVERY

Life before the design system: accessibility issues, inconsistent UI, and unclear system feedback

While developers shipped features quickly, the absence of a design system led to product inconsistencies and slowed down the handoff process.

Design Challenge

How might I create a scalable design system that unifies the product experience, streamlines design–developer handoff, and improves accessibility?

Auditing the application revealed usability gaps

Looking at the product, along with previous feedback from industry professionals, I conducted an audit to identify areas for improvement.

Lack of colour contrast with the text.

Inconsistent patterns with spacing and styling.

Lack of feedback states

Inconsistent spacing and unnecessary emojis reduced professionalism.

The developers didn't see the value of a design system...they were focused on building

Despite early disinterest from the developers, I saw an opportunity to create a design system that streamlined development, improved handoff, and prioritized the overall user experience.

THINKING LONG-TERM

Even though it meant taking time to build the design system, the long-term benefits were evident:

→

Save time on tedious development + cleaner code

Build reusable components to standardize and reduce developement time.

→

Improved usability

Consistent, accessible design to improve the user experience.

→

Long term scalability

Less time spent on design and development in the long run.

→

Professionalism + visual appeal

UI that makes the company look professional and legit.

I prioritized three main things when building out the design system ...

Accessibility

Ensuring accessibility is built into the components

AI usage causes significant environmental strain

Consistency

Creating a consistent system with colour, typography and style

Reusability

Build reusable components that can be used across multiple interfaces

Revisiting the same components over and over again

As there were priority shifts, redirection of the product and feedback from users, I kept iterating on components to see what information was most helpful and points of improvement.

SOLUTION

Leveraging a 50+ component design system in a fast moving environment

VideoNavbar component animation.

VideoReport type selection.

VideoSubmission upload component.

VideoFINTRAC reporting guideline component.

CONCLUSION

Learning from existing systems and building a maintainable design system

This was a rewarding project to work on. Going into it, I hadn’t built such a large and in-depth design system before. As the sole designer on the team, it helped me to reference existing design systems for inspiration and iterate on components with constant feedback. By working backward from implementation needs, I strengthened my understanding of design systems and best practices.

Design is never linear

With hiccups along the way and many back-and-forths with developers and users, I learned to see design as a dynamic process where you must always question design choices, iterate, and focus on progress over perfection.

Embracing ambiguity

There was a lot of ambiguity around what the product should be, especially in the beginning. I learned to become more comfortable with the unknown and see it as an opportunity to explore and ask deeper questions.

Product Design • Shipped 2025

Simplifying anti-money laundering compliance reporting workflows