Creating a scalable visual language for wealth management

Rebuilding CircleBlack’s Design system

Top Image.png

Background

CircleBlack is a wealth management app that connects investors with financial advisors and transforms the way they interact with their finances. The app seamlessly integrates all aspects of wealth management, from account aggregation and performance reporting to financial planning and risk assessment. Its intuitive interface and robust features empower users to gain a comprehensive view of their financial portfolio, track investments, and make informed decisions.

As Lead UX Designer at CircleBlack, I led a 3-month initiative to completely audit and update the platform’s visual design system. Our goal was to create a unified, modern, and user-friendly design language that reflected CircleBlack’s values of clarity and confidence. Additionally, we wanted to equip the design and engineering teams with a scalable, efficient system for future growth.

Role

Lead UX Designer

Timeline

October 2024 - December 2024

Context & Problem

Over time, as CircleBlack’s platform expanded, each product team made design decisions independently. This led to a fragmented user experience with inconsistent colors, typography, and UI components. Developers often rebuilt similar patterns from scratch, slowing releases and creating visual debt across the product.

It was clear we needed a unified design system that could:

  • Bring consistency and scalability to the UI

  • Improve accessibility and usability

  • Streamline collaboration between design and engineering

  • Strengthen the product’s visual identity

Goals

  1. Establish a cohesive and scalable visual design system

  2. Improve accessibility compliance and visual hierarchy

  3. Create Figma components that mirror code for faster development

  4. Reduce design-to-development time and rework

  5. Modernize the interface to feel more inviting and intuitive

As Lead UX Designer, I owned the end-to-end strategy and design direction.

I collaborated with:

  • One UX Researcher (to align on design strategy)

  • One Front-End Engineer (for design-code parity)

  • A Marketing Manager (for visual alignment and tone)

  • Product Managers and Engineering Leads (for rollout planning and governance)

Audit & Discovery

I began with a full interface audit across the product, mapping out inconsistencies in color, typography, spacing, and component usage. I also gathered feedback from designers and developers to identify common pain points, such as redundant components and unclear documentation.

This audit revealed dozens of variations across multiple visual components and multiple mismatched color styles. Additionally, differing type treatments resulted in confusing and inconsistent hierarchy across similar pages. A centralized design system was overdue.

Defining the visual language

The next step was to establish a cohesive visual foundation.

  • Color Palette: Introduced a refined palette focused on clarity and accessibility, with meaningful color roles for data visualization and alerts.

  • Typography: Defined a clear hierarchy using a modern sans-serif font for readability.

  • Spacing & Layout: Implemented an 8-point grid system for consistency across layouts.

  • Accessibility: Adjusted contrast ratios and standardized text sizes for improved clarity and accessibility.

The overall direction emphasized simplicity, and approachability, creating an experience that felt more human and less “financially intimidating.”

After conducting a full audit of the product color system, a new minimized palette was chosen that added alternatives for accessibility when viewing pages on light mode.

This basic palette was then given semantic tokens to map colors onto visual components and type treatments

Component Library in Figma

With the new foundations in place, I built a modular, scalable component library in Figma.

  • Designed reusable components (buttons, forms, cards, tables, modals) with variants and constraints

  • Created design tokens for consistent spacing, colors, and typography

  • Established clear naming conventions and documentation standards for easy adoption

  • Partnered with engineering to ensure component parity between Figma and the front-end codebase

Visual Direction

The redesigned system established a visual language that felt more consistent and professional, achieving a more appealing look that stood apart from competitors’ cold, data-heavy interfaces.

Key visual principles included:

  • Clarity: Clean layouts and strong hierarchy for data readability

  • Simplicity: A simplified, consistent system with an inviting color palette and generous spacing across components to reduce cognitive load

  • Data Density: Balanced typography and structured grids to convey large amounts of data while minimizing user friction

Implementation & Rollout

To ensure smooth adoption, I led design system onboarding sessions with developers and product stakeholders. I also set up documentation directly in Figma, providing real-time access to usage guidelines and examples.

Results & Impact

The new CircleBlack Design System delivered measurable improvements across teams and the product experience:

  • Reduced design-to-development time by improving handoff clarity and establishing component usage guidelines

  • Improved UI consistency across all product modules

  • Increased accessibility compliance

  • Faster onboarding for new engineers due to clear documentation

  • Positive feedback from both clients and internal teams who found the new interface more intuitive and visually engaging

Reflections

This project reinforced that a design system isn’t just a library of components. To be able to collaborate and create efficiently, a shared language that aligns design, engineering, and product around a unified vision is required. Taking on a full audit of an existing component library with the purpose of creating from it a fully-fledged design system is an enormous, ongoing task.

Despite this difficulty, the various engineers within the team quickly began using and benefiting from the robustness of the system. There is still work to do, but by focusing on scalability, documentation, and collaboration, we built a foundation that will support CircleBlack’s growth for years to come.