AI Studio Design System

Hewlett Packard Enterprise acquired Pachyderm Inc., and Determined AI. Between the three entities there were 3 different design systems. My job as the design system lead and sr. designer was to create a unified design system that would be used for the new product, and then scaled to all products in our portfolio.

Product Portfolio

  • The AI Solutions product family provides tooling for data scientists and data engineers to create, tune, and manage AI models.

Business Problems

  • Loss of customers in highly regulated industries due to poor accessibility.

  • Reduced developer velocity due to 3 design systems.

  • New product demo expected within an oppressive timeline.

Outcomes

  • Functional design system within 4 weeks.

  • WCAG 2 AA rating for text and background; other elements compliant with draft WCAG 3 guidelines.

  • Fully tokenized design system

My Role

  • Project lead & solo designer

Timeframe

  • 6 weeks

I started by assessing HPE’s design system. I discovered that it would not meet our users’ needs, which means it would not meet our product’s needs.

Core User Needs

  • Information density → Users have to connect the dots across multiple data points and statistics.

  • Signal over noise → Users must monitor the health and status of various processes. They want to minimize unnecessary distractions.

Conflicts with HPE’s Design System

  • Information density → Existing design system leverages large typography, padding, and icons. No guidance provided for scaling the design system for information density.

  • Signal over noise → Bright highly saturated colors that are only accessible at larger sizes. Some UI components do not meet accessibility standards.

I worked with our developers to identify an open source library to expedite the delivery of the design system so we could meet our demo deadline.

Developer Frustrations

  • Too few tokens that leads to additional required logic to create UI components.

  • Grid systems built around px instead of rems.

The team settled on using Radix for its great set of primitives. We assessed other options, but the other libraries had too many dependencies.

Further Actions Taken

  • Took HPE’s base colors, and created a color ramp using Accessible Palette — which gives color contrast in WCAG 2 & 3 and allows you to calculate ramps in the CIELAB color space.

  • Evaluated font families to use that would be legible and accessible at 12, 13, 14 pt sizes. Inter and Roboto Mono were the choices made by the team.

  • Created figma variables and styles for color, typography, padding/margins, and corner radii — in light and dark mode.

  • Created product specific components where necessary.

We shipped! So, I figured out a system for maintenance and issue tracking.

Next Steps

  • QA and design system requests logged and tracked in Jira.

  • Further refinement of UI components.

  • Scale design system to other products in the the portfolio.