Design Systems
role: Lead product designer
The Problem
BrainPOP has several products that are consumer-facing, institutional-facing, and internal. We have too many undocumented components in various styles worked on in silos by different sets of designers, developers, and QA engineers. Because of this, designers were recreating and spec-ing already existing components in Sketch, engineers were rebuilding pages from scratch, and QA spent time checking these same components over and over. There were so many bug tickets around inconsistencies that the process has become inefficient.
I was the 4th designer to join BrainPOP and at the time, we only had a style guide in PDF format. In order for us to have consistent designs, we needed a living style guide, a common vocabulary, and a set of guiding principles for visual, behavioral, and editorial.
Design Assets
The designers worked together to audit the sites for inconsistencies, debate the merits of certain interactive behaviors, identify improvements, and then build a Sketch library with all of our components in different breakpoints.
Documentation
As part of building our library, we also made sure to document each component. We worked with a front-end developer and QA engineer in naming each component, writing out guiding principles, and making sure our work was accessible.
Code
I worked with the developer and QA engineer a couple of hours weekly to also design and organize our Storybook page.
Next Steps
I am now tasked to share our process with the rest of the company so they are able to contribute to the program. I will also be working with the institutional and internal squads so they can also start their own design systems.