Aquanow is a leading Canadian cryptocurrency liquidity provider, with global offices and works primarily with banks and other large financial institutions. Each month, billions of dollar value pass through our platform enabling a broad range of financial services for our clients.
Pain points & Motivations
Unity, simplicity, and consistency
There were several pain points and motivation factors for investing time into a robust design system.
We were using three different ui component libraries across our products, costing unnecessary time and money in licenses and management.
Our business strategy have also led us to developing new products that need to be designed and developed faster with a unified design system.
Lastly, one of our major goals is for our clients to use more self-serve features and a more consistent experiences across a product leads to higher rates of adoption.
Internal team feedback led us to MUI
We selected MUI to be our one base component library we will customize on. Through discovery calls with internal operations and developers, we determined it was most familiar, easiest to use out-of-the-box and gave us the most flexibility to customize.
Variables
Tokenization for scalability
Setting up our new colour, spacing, and typography variables gave us a structure that can scale. I leveraged the new Figma feature to create a semantic structure that will allow flexible modification to the core features of the design system.
The use of tokenization scales with our future business strategy for whitelisted products with their own theme and colours.
Light and dark modes
Another benefit of leveraging variables in Figma is the easy switch between light and dark mode. This allows our team to easily evaluate consistency between both modes with our designs, minimizing design time and offering our users a choice between the two visual modes.
Testing & iterations
Design, product, and development come together
The process, pre-hand-off, involved designers, product owners, and developers alike.
I communicated timelines and commitment to designing for the design system to the product owners, ensuring there would be time made for the design system as a part of our agile workflow.
When the first version of the Figma component was complete, it was sent out to fellow designers to try in their files and provide additional feedback.
And finally, when the components were Figma ready, I presented the UI and interactions to the developers to gauge feasibility and address any implementation questions.
Quality assurance
Error prevention before shipping
To ensure the component is functional and visually developed, we have implemented Storybook to our tech stack to review and document each case.
Storybook reviews offer us a general idea of what each theme of the design system looks like upon implementation.
Product rollout
As of early 2025, we have begun rolling out completed design system components in our new internal tools product. While some elements still leverage out-of-the-box MUI, our design system components have begun to populate the product giving it a refreshed and new look.
This is also an opportunity for one last review of the component in a native environment before shipping it to production.
And then away our babies sail.