omo

Building Vo: A Design System for Voyance

Visit project
Vo is the name the design team gave to our design system. It was derived from Voyance.

The Beginning: A Design System Was Needed

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.

Vo 1.0: The First Attempt

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.

Vo 1.0

Why Vo 2.0?

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:

  1. We had not involved engineers early enough. Instead of designing with real-world constraints in mind, we handed them a set of components and expected them to implement them. This resulted in elements that weren’t practical for development.
  2. We had overlooked marketing and brand design. Our choices didn’t always align with the company’s external communication, creating inconsistencies between product and marketing materials.

It was time for Vo 2.0—a more collaborative, scalable, and thoughtful approach to our design system.

The Research: Learning From Our Mistakes

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:

The Process: Rebuilding Vo From the Ground Up

We approached Vo 2.0 with atomic design principles, breaking components down into five levels:

  1. Atoms – Basic UI elements (buttons, text fields, icons).
  2. Molecules – Groups of atoms forming reusable components (form fields, dropdowns).
  3. Organisms – More complex structures combining molecules (modals, cards).
  4. Templates – Page-level layouts defining structure.
  5. Pages – Fully realized interfaces using templates.

UI Audit & Inventory

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.

Tooling & Collaboration

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.

Colour system on version 1

Colour system on version 2

Key Improvements in Vo 2.0

A Smarter Color System

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).

The primary colour on the version 1 had a lower score

The primary colour looked better at a higher contrast.

Typography Upgrade

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.

Comparing Proxima Nova with Aeonik Pro

Simplified Buttons

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.

The buttons on version 2

Grids & Spacing

We implemented a 24-column grid for our dashboards, allowing for flexible layouts. Spacing followed an 8px scale, ensuring more predictable and responsive designs.

Iconography Overhaul

We built a versatile icon library, ensuring that every icon served a clear purpose. This improved navigation and usability across our platform.

Language & Copywriting

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.

Implementation & Adoption

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.

Impact: A Design System That Works

The time investment paid off. With Vo 2.0 in place:

We also created company-wide documentation, ensuring future hires could quickly onboard.

What’s Next?

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:

Lessons Learned

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.

Say hi!

Send me an email or connect with me on LinkedIn