Design System for an AI-enabled Analytics Platform

Executive Summary

The analytics group I previously worked with needed a scalable, reusable design system to support a growing internal platform. They had hired new designers but lacked a unified foundation in Figma. I was brought in as a freelance UX designer to create a comprehensive, production-ready design system tailored to their data-heavy workflows. Starting with the Material Design base, I built and documented nearly 100 components optimized for analytics use cases, including AI-enhanced feedback, metrics displays, color-blind friendly charts, and responsive layouts. This system accelerated handoffs, reduced visual inconsistencies, and helped new designers onboard quickly.

Design System view in Figma
Overview of the full design system in Figma, organized for scalable analytics use.

Background

The internal analytics platform supported multiple departments across the organization. Over time, the team had grown organically, with different designers and developers creating components as needed. As new designers joined, the lack of a shared system slowed down projects, led to inconsistent interfaces, and created confusion during reviews.

To solve this, the team asked me to return as a freelance designer and take the lead on building a unified design system in Figma. They needed more than a UI kit. They wanted a system that could scale, enforce accessibility standards, and reflect their analytics-focused use cases. The system also had to support new AI-enabled features that required consistent interaction patterns and adaptive feedback elements.

My Role

As the lead designer, I created the entire design system in Figma, starting with the Material 3 foundation and expanding it to fit the platform’s real needs. I designed nearly 100 components that included foundational elements like buttons and form fields, as well as complex data cards, filtering panels, charts, and AI feedback modules. I worked closely with developers and new designers to ensure the system was clear, reusable, and accessible.

Design Process

I began with core elements like buttons and layout structures, then expanded the system into modular interface patterns that matched the platform’s use cases. I used Figma’s component properties and variables to manage complexity and allow flexible theming. Each component was built to support real features such as AI-generated responses, metric visualizations, and configurable filters.

Buttons

I created a full set of button components that allowed designers to configure actions across different layouts and themes. Each button supported hover states, icon placements, and toggled content visibility using Figma variables.

Custom button designs
Customizable buttons with variable-based hover states, icon options, and toggled visibility.

Cards

I designed two core card types. The media card supports imagery, short text, and actions—ideal for content surfaces. The metric summary card was tailored for analytics, summarizing performance indicators in a visually digestible layout.

Custom card designs
Media cards and metric summary cards for analytics and interactive content.

Metrics and Charts

The analytics platform required a comprehensive set of chart and metric components. I created detailed tables, stacked bar charts, line charts, and compact summary modules called mini metrics. These allowed users to scan performance quickly or explore deep insights.

Metrics and charts
Stacked bar charts, tables, and mini-metrics used for visualizing trends and performance.

Navigation and Menus

To support the platform’s complex structure, I designed responsive navigation bars, dropdown menus, and overlay components. Each menu was configured for both light and dark modes and included flexible connector options for dynamic positioning.

Menus and Navigation
Responsive menus, tooltips, and navigation bars with flexible configurations.

Form Elements

Form elements were built for high accessibility and feedback clarity. Each component supported validation states like error and success, icon usage, and contextual help. These were tested to ensure readability and clarity during data entry workflows.

Form fields
Accessible and customizable form fields with error states and icon options.

Media Elements

I created responsive components for displaying imagery across screen sizes. These were used in hero layouts, thumbnails, and visual cards, and they maintained aspect ratios and loading clarity across mobile and desktop views.

Media elements
Responsive image components designed for media flexibility across layouts.

Each component included proper states, accessibility support, and theming flexibility. I also created documentation and examples so the team could apply, reuse, and extend components easily across projects.

Outcome and Impact

The system was adopted across the team’s active analytics projects. New designers were able to prototype and hand off screens faster, with a consistent foundation. Developers found the structure easy to work with, especially for high-complexity areas like AI feedback and responsive filtering.

Feedback from the team highlighted faster onboarding, easier collaboration, and clearer visual language across their platform. The use of variables, templates, and documented components reduced decision fatigue and improved design quality. Although my role ended after handoff, the system continued to support consistent and efficient design well beyond the project timeline.

This system continues to power rapid prototyping, designer onboarding, and consistent user experience across a growing analytics platform.