When I joined Voyance as a product designer in September 2020, the company had no design system. Designers worked in silos, making independent decisions about typography, colors, buttons, and spacing. The result? An inconsistent user experience across our products.
The only thing tying our interfaces together was the company logo—and even that varied in size and placement across different screens. Beyond branding concerns, this lack of cohesion was a nightmare for engineering. Each new component required custom development, adding unnecessary complexity and slowing down our ability to ship.
It was clear we needed a system. So, the Head of Design and I set out to build one.
We named our design system Vo, short for Voyance. Over the next few months, we built Vo 1.0—a library of reusable components designed to unify our interfaces and streamline development. Working closely with frontend engineers, we established a shared codebase to reduce redundancy and improve consistency.
The impact was immediate:
But Vo 1.0 was far from perfect. It was our first attempt, and we made critical mistakes.
Months after launching Vo 1.0, our Head of Design left, and I stepped into the role. As I worked alongside an Associate Product Designer to refine the system, two major issues became clear:
It was time for Vo 2.0—a more collaborative, scalable, and thoughtful approach to our design system.
To ensure Vo 2.0 truly worked for everyone, we conducted interviews with:
Key findings:
With these insights, we set clear goals for Vo 2.0:
We approached Vo 2.0 with atomic design principles, breaking components down into five levels:
To ensure nothing was overlooked, we conducted a thorough UI audit, dividing into two teams:
This process revealed inefficiencies, redundant elements, and opportunities for refinement.
We used Figma as our central design tool, leveraging its library system to maintain consistency. Notion helped us manage tasks, track progress, and collaborate across our distributed team.
Our previous system had too many colors—designers often used multiple, slightly different shades of blue interchangeably. We streamlined our palette, reducing variations from 9 to 5, ensuring better contrast and accessibility (following WCAG guidelines).
We replaced Proxima Nova with Aeonik Pro as our primary typeface. Aeonik offered:
We also introduced a type scale based on a 16px base font size to create a clearer visual hierarchy.
Vo 1.0 had three button sizes, but we only used two in practice. In Vo 2.0, we eliminated the redundant size, improved contrast, and optimized spacing for smaller screens.
We implemented a 24-column grid for our dashboards, allowing for flexible layouts. Spacing followed an 8px scale, ensuring more predictable and responsive designs.
We built a versatile icon library, ensuring that every icon served a clear purpose. This improved navigation and usability across our platform.
We collaborated with technical writers, PMs, and marketing managers to refine our product’s tone. The result? Clearer, more user-friendly copy that improved engagement and comprehension.
Rolling out Vo 2.0 required buy-in from every team. To ensure smooth adoption:
Initially, developers were concerned about the workload of rebuilding existing products. To ease the transition, we moved at their pace, integrating Vo 2.0 incrementally instead of overhauling everything at once.
The time investment paid off. With Vo 2.0 in place:
We also created company-wide documentation, ensuring future hires could quickly onboard.
Design systems are living entities—they require ongoing care. Since Voyance is still growing, the team behind Vo 2.0 will continue managing it until we can establish a dedicated design systems team.
Future plans include:
Building a design system is not just about design—it’s about alignment, collaboration, and advocacy. The biggest challenges weren’t technical but organizational: bringing teams together, securing leadership support, and ensuring ongoing adoption.
In the end, the effort was worth it. Vo 2.0 transformed how Voyance designs, builds, and ships products—creating a foundation that will scale with the company for years to come.