Design System for an AI-enabled Platform

Freelance UX Design

Project Overview

As a freelance designer, I was tasked with developing a scalable and cohesive design system for an AI-enabled, analytics platform that required modular, adaptable UI elements. Leveraging Figma’s advanced AI tools, including auto layout, component properties, and variable management, I created a system to ensure design consistency while allowing for flexible customization. This design system included essential UI components such as buttons, cards, modals, metrics, menus, form elements, navigation, and media elements, complete with examples demonstrating variable-based customization.

Design System view in Figma
Problem

The analytics platform faced challenges in maintaining a consistent user experience across its expanding suite of features. To address these needs, the design system required components that could be rapidly adapted for different use cases without sacrificing brand integrity. Additionally, the platform team wanted to integrate the latest design technology to streamline collaboration and prototyping.

Solution

Component Creation with AI and Variables: Using Figma’s new AI-powered tools, auto layout, and variables, I designed each component with flexibility in mind. This approach enabled the platform’s team to implement customizations across themes, colors, and layouts efficiently. The following are some of the components that are a part of the design system.

  • Buttons: Configurable across various styles and states, these buttons are designed to fit diverse actions throughout the platform. They support multiple states (e.g., default, hover, active, disabled) and can be customized in color, size, and icon placement to align with different contexts.
    • Customizable buttons with swappable icons, hover states, and toggled icon visibility, providing flexible and interactive options for diverse use cases.
    Custom button designs
  • Cards:
    • Media Cards: Created specifically to display media content like images or videos, these cards include fields for titles, descriptions, and optional call-to-action buttons. They provide users with quick access to key information alongside engaging visuals.
    • Metric Summary Cards: Designed to show high-level summaries of metrics, these cards highlight essential statistics, trends, or performance indicators, making it easy for users to quickly grasp critical insights without diving into detailed metrics.
    • Responsive card designs featuring a media card with customizable content and a metric summary card with detailed statistics and actionable icons.
    Custom card designs
  • Metrics and Charts: A comprehensive set of components for displaying and analyzing data trends and performance across various categories. This includes detailed tables, stacked bar charts, bar charts, and line charts for in-depth data analysis, as well as compact Mini Metrics for quick, digestible insights. Each component is designed to ensure readability, scalability, and adaptability across various screen sizes.
    • Responsive metric components, including detailed tables, stacked bar charts, and line charts for in-depth data analysis with sub-components for charts that are flexible and swappable.
    Relevant metrics designs
  • Menus, Navigation, and other Informational Components: This set of responsive components includes a navigation bar, various menu styles, tooltips, and toast notifications, all designed to adapt seamlessly to different screen sizes and content requirements. The navigation bar supports dropdowns, icons, and buttons, providing a flexible solution for complex content structures. Menus are available in both light and dark themes, with customizable connectors that allow them to be positioned dynamically. Tooltips and toast notifications are also responsive, automatically adjusting to fit their content and text. These components ensure a cohesive and accessible user experience, allowing users to navigate the platform efficiently while maintaining visual consistency across all devices.
    • Examples of responsive navigation and informational components, including a menu with customizable connectors, a toast notification for brief messages, and a tooltip for additional context.
    Custom menu designs
  • Form Elements: Designed with usability and accessibility in mind, these components support intuitive data entry and form completion. They are optimized for a seamless user experience, reducing friction in tasks requiring user input.
    • Customizable form field components with multiple states, including active, error, and success indicators, as well as options to show icons. Designed to enhance user feedback and improve data entry accuracy.
    Form fields
  • Media Elements: Optimized to work seamlessly across different device sizes, these elements provide consistent visual displays for images, videos, and other media types, maintaining clarity and responsiveness on both desktop and mobile.
    • Responsive image components with multiple size variants, allowing flexibility in design layout and ensuring optimal display across different screen resolutions.
    Responsive Images and Hero Images

Documentation and Examples: To ensure easy adoption, I provided comprehensive documentation and examples of each component in action, showing how they could be customized with variables to meet different analytics scenarios.

Process

The design process involved:

  • Conducting user research to understand the platform's needs.
  • Collaborating with the development team to ensure seamless integration.
  • Iteratively designing and testing components for usability and accessibility.
  • Documenting and demonstrating the design system for easy adoption and scalability.
Results

This design system enabled the platform team to significantly reduce design and development time while ensuring a cohesive user experience. User testing of team members reported a 30% faster prototype creation time and 20% fewer design iterations during development, with positive feedback from developers on the system’s adaptability and ease of use.