Stellar Design System

A presentation for relevant business, developer, and design stakeholders explained the pain points in our tech stack, and the advantages of slimming down and migrating to Figma.

I mapped out processes and priorities for the design team to tackle the migration and audit of all components.

While thinking through governance of the design system, I partnered with UX designers to update internal documentation to better define our overall design team processes as well.

Our libraries were organized around a simplified atomic structure, with Base flowing into Components, flowing into Templates.

This aligned nicely with how our developers thought about coding components, and allowed designers to navigate fewer overall files.

Style and component documentation was handled natively within Figma itself, both as text on frames and in component descriptions.

Overview documentation was included in each section of the design system (Base, Components, Templates). Our files were regularly accessed by both designers and developers, so this documentation was focused on keeping us aligned on how we expected our files to be navigated, and how we communicated about the status of working files. This was also a great opportunity to reinforce our responsibility to maintain ADA Compliance as an educational institution.

While leading the UI design team, my day-to-day responsibilities involved managing and distributing work across team members, conducting peer reviews, and completing my own ready for handoff Hi-Fi screens, using assets from our design system.

When the decision was made to change our primary design software, I spearheaded the migration of all design system libraries from Sketch and InVision DSM to Figma. We also took that opportunity to conduct a full system audit, which involved removing, adding, and editing styles and components while working closely with our front end dev team to align on organizational principles and design tokens. Once the migration was complete, I also created documentation and hosted informational sessions to make sure all product teams understood how to interact with Figma, and how and when to use our available resources.

In addition, new resources were created to address needs we identified during this process. Our design system was robust and comprehensive, but third party vendors didn’t need that much information, so a lightweight UI kit was created to address basic CSS reskins. Our Lo-Fi UI kit was created as an optional tool to help unify visual language across our Lo-Fis when designers were ideating new features.