Creating & Implementing a Design System
PROJECT OVERVIEW
The Problem
We noticed inconsistencies emerging in our designs from company acquisitions, a growing team of designers, and ineffective communication between design and development.
My Role:
Project Lead, Workshop facilitator, Designer
The Toolkit:
Adobe XD, Figma, Zeroheight, Interviews
DISCOVERY + DEFINE
Step 1: Researching Established Design system
I began by taking a look at existing design systems to glean what they did well and understand structure styles.
Step 3: Meet with Dev & Designers to understand Usecases
Facilitated meetings with designers to make decisions on component and foundational areas, like the use of colour in layout, semantics etc.
Connected with developers + other consumers for the design system aiding with adoption.
This knowledge was used to create a template for the design system + personas as the lens through which we build it.
Step 2: Conduct Internal Audit Of existing design
Collecting all of the bits and pieces of designed components in of our existing product and styles to give us a framework for what we were working with and what we’ll need to change.
DESIGN
Designing, Testing and Iterating
Starting with Adobe XD, my team and I used Zeroheight to document how we anticipated components to be used eg, foundational details like voice and tone, typography etc
Issue # 1
The design system wasn't as useful to the developers without the code
When presenting our design system to developers I found that they wanted to see integration with Storybook which was their source of truth. While there was still valuable info regarding components and design foundations, without this, they would need to reference Storybook frequently.
Issue # 2
Too much content
There was too much to read on one page and the specific info that our different users were looking for was getting lost.
Solution # 1
We integrate with Storybook + Adobe XD
The simplest answer was to advocate for integration which is what we ended up doing. Developers mentioned they loved being able to have the code front and center and then read any additional information as needed.
Solution # 1
Keep essentials
We tabbed the information into specific categories for what users found helpful, design, usage, code, and accessibility.
DELIVER
Deliver + Support
The design system was and is a living breathing thing so as soon as it was at a stage to provide value to its user it was published and we learned as designers, dev and SMEs used it.
Challenges and Improvements
Due to time constraints, we built off an established library of Material Design, planning on adding more custom components as the system organically grew.
Bringing awareness and adoption was a smaller challenge. The team and I got creative when sharing our work with PMs, POs, and marketing by utilizing everything from department meetings to casual conversations and a Slack voting poll on it’s name to drum up interest in the design system.
The name we settled on?: Luna Design system.
Takeways
The main learning from this project was the importance of our retros. Our retros were integral as we used the feedback from there to make updates on the DS and our processes in growing it.
Secondly, it’s better to get something out there and iterate then keep it locked away until its ‘perfect’. Obvious but the project was a good reminder.
