Evolving a Design System

Co-led a design system and spearheaded cross-product implementation. Significantly improved design consistency and usability, and increased product team’s speed and efficiency.

The Challenge

Common Sense’s product team had created the beginning of a design system with a library of components, but there were many components that needed improvement and the system wasn’t implemented evenly across the site yet.

During my 4 years at Common Sense and in close partnership with our team, I was key in evolving the design system, improving our team’s workflow, and updating our entire website to use the design system. The design system helped our team work more quickly and efficiently, and the updated website is more user-friendly, trustworthy, and accessible.

(I had previous experience leading a design system for desktop apps with Endless Computers, which gave me an in-depth understanding of atomic design and systems thinking. Read about it here!)

Team

Product Designers (me)
Engineers
Product Managers
Copywriter

Improving the Existing System

I had to get a sense of what components had been created, what was in the middle of development, and what was missing. Since there were no full-time roles dedicated to the design system, we had to be smart about our workflow in order to keep our other product improvements moving forward.

Our Team’s Workflow

First, we convened and reflected on how difficult it was to keep the design system work flowing alongside our regular work. Our team of designers and engineers needed to be able to work quickly and autonomously to free up the product managers’ time and to let us make decisions more quickly. We were also juggling many tools— Asana, Jira, and Slack— and hadn’t found a way to flow easily between them.

We decided that we needed to get through a big bulk of work that was waiting in limbo, so we suggested having a few dedicated sprints to get through as much as we could. We got the time approved from leadership, and my fellow product designer and I started preparing for what we should prioritize.

To fix slow collaboration and too many tools, I recommended making our workflow as transparent as possible to let us all keep a mental map of where we were in development (usually the work of a PM). We would use Asana to keep track of work, and Slack for urgent updates/more tight-knit collaboration.

I went into Asana and redesigned our workflow to allow us to pass work to each other more seamlessly:

“Is component-worthy”: A place to triage a new task as a team. We would give a task a score based on the amount of effort required to create the component vs. how much it would affect user experience. We would meet once a week to make sure all tasks were triaged and that everyone had a list of tasks to run with for the week.
“Design”: Currently in design. Designer would pass the task to “Engineering” once it was ready.
“Engineering”: Currently in engineering. Engineer would pass back to “Design” if it needed more design thinking.
“Code Review”: Being reviewed for final implementation.
“Design Review”: Being QA-ed by a designer for quality.
“Documentation Review”: Being reviewed by a designer or a PM to ensure that the component was documented properly.

Improving and Creating Components

I improved, tested, and redesigned many existing components and components waiting to be finalized, and I created many new components.

Here are a few highlights:

User-Generated Content

Since a big part of our offering is letting parents see reviews from other parents, a snippet of a review would be used in many different places on the site.

I designed a component for this snippet that was independently responsive and could work in any context, e.g.: A review for a movie/TV show would need an age rating and a star rating, but a review for an Edtech tool would only need a star rating.

Tables

Another big part of our user offering is recommendations on the best EdTech tools for teachers. Our content team wrote many articles comparing tools, and tables allow for clear visual comparisons.

I designed a table component that was responsive and flexible enough to support titles, no titles, scrolling, no scrolling, etc.

Modals

Modals are used everywhere on our site: logging in and signing up, watching video reviews and trailers, providing feedback, and more.

We had a set of modals in place, but they weren’t responsive enough, particularly on mobile. I expanded the design to make them flexible for any screen size.

User Summaries

We needed snippets of an author or a user in many places on our site, especially for media reviews and for articles written by our staff.

I expanded the component to allow for multiple authors to be shown at once, and created a new smaller size for mobile screens.

Implementing the System Across the Site

The next step was to actually use the system on our site.

The site was built an outdated platform (Drupal 7), and the product team was already planning to migrate the site to the updated platform (Drupal 9), so we decided to combine the efforts. This migration was a massive, company-wide, cross-functional collaboration between product, design, marketing, copywriting, and content writers that took almost 3 years, ultimately championed by our great product managers.

Our job as designers was to ensure that the updated site, with the integration of the new design system, kept a high standard of UI, user experience, and brand personality. The design system allowed the page redesigns to run smoothly and quickly, and we were able to keep an eye on bigger UX questions.

Giving Each Page an Update

In close collaboration with the PMs and engineers, my fellow product designer and I went over every page on the site and translated them to use our design system. This required keeping track of the immense legacy site in our heads, with years of design decisions to sift through and many executive decisions needing to be made on whether to change or keep different designs. A PM would give us a page to work on, and we would provide specs and design guidance on how to translate it to use our design system.

Spending Time on Bigger Redesigns

Some pages needed more holistic redesigns that would improve the usability and user flow. I helped identify and prioritize which pages these would be, and did many redesigns myself. Some of these included our Press Room page, our Research Reports page, some sign-up/sign-in flows, and our User Review forms. The updated design systems helped these redesigns go smoothly and quickly.

Working on Components as We Went

This was the ultimate test for our design system. If a component wasn’t working as expected on the live site, we would fix them and redesign them to ensure that they were as flexible as possible to meet the needs of the live site.

A New Brand System, Too?!

Alongside the front-end design system, our brand team had done a huge overhaul of our brand language. The new brand system excellently honed and clarified our brand personality, voice, and tone, and included updated assets, updated copy, a new color system, a new illustration system, etc.

While our graphic designers updated their Adobe libraries for marketing collateral, I collaborated closely with the VP of Brand to ensure that the system was reflected in the product experience.

I did a sitewide audit specifically focused on assets and colors to identify where we needed updates, and worked closely with our visual designer to implement these assets properly on the site.

The Results

After many years of work and collaboration, we had an updated site with improved and consistent user experience and a honed brand personality. We had finally phased out legacy pages and outdated UI and UX, and the site had a steady base for future product improvements to grow from. We were incredibly proud of our work.