x.ai Styleguides

As owner of the UI-based experience for x.ai, my first step in creating a design process was to standardize the visual and interaction design language. I had 3 goals: Create a cohesive style guide, create scalable interaction design patterns, and remove needless decision making for the development team.

A secondary goal was to slowly reduce the need for my involvement in smaller interaction design decisions, thus scaling our ability to rapidly deploy new features and fixes.

I started out in Sketch to update our basic components. I based this system on the Atomic Design System and Type-scale. Once I had created a system that re-defined the core styles, I expanded the system to standardize a variety of visual and interaction design patterns on the site.

my.x.ai style guide

The static styleguide that provided the basis for the coded styleguide.

At a certain point it became easier to switch to a coded styleguide, so I created a microsite.  The Engineering team are now in the process of creating a ‘living’ styleguide that reflects production code.

In conjunction with creating the design system, I performed an extensive audit of the my.x.ai CSS. This took the better part of 2 days to comb through the code to identify duplicated classes, repetitive declarations, and opportunities to leverage LESS preprocessor capabilities. The result was a spreadsheet to document the exact location of the changes, as well as a plan to collaborate with Engineering to update the CSS files in a phased rollout.

x.ai CSS audit

Nothing fancy here. Just a spreadsheet which captured 81 instances of redundant styles.

← back to x.ai case studies