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.
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.