Angelou Design System
Angelou is Newsela’s evolving Design System. Product and technology work together to provide reusable and fully accessible UI components and design resources for use across our growing number of applications.
Role Lead product designer
––––––––––––––––––––––––––––––––
Company Newsela
––––––––––––––––––––––––––––––––
Team 1 a11y engineer, 2 Front-end engineers, 3 designers
The problem
There are inconsistencies between the React library, Figma and the live site.
I met with designers and engineers to understand pain points with the current design system and the company’s historical approach to systems.
Components were created blindly
Components were being created based on what other design systems across the web were doing. They weren’t based on the needs of our users.
Value of design systems was underestimated
The company’s strong focus on work related to new features made it difficult to understand the value of internal products such as design systems.
Responsibilities weren’t clear
Leadership saw the design system as a design system team problem, not an org problem. Therefore, other teams weren’t encouraged to contribute.
Hypothesis 1
A SoT design system will increase the productivity and consistency among the Product Org.
Starting from scratch
Conducting an audit
I outlined a process for a visual audit. Myself, along with two other designers divided and conquered and carried out the audit. We worked in a joint Figma file to collect screenshots and take notes.
Colors
There were many different blues, greys and blacks. They looked similar to the naked eye but upon using the inspect tool, I noticed a lot of different hex values. In addition to having multiple values of the same color, there was no logic behind their usage.
Typography
Even though there was consistency with the font families (Noto Serif and Circular) there wasn't much clarity on when and how these fonts should be used. Sometimes a serif font was used. Sometimes a sans-serif font was used. No rhyme or reason as to why.
ANGELOU DESIGN AUDIT
Buttons
While doing the color audit, I noticed inconsistencies in buttons. Some had square corners. Some had round corners and some were completely pill shaped. There were times when two primary buttons were side by side. We even had buttons that weren’t WCAG compliant.
Square buttons found
Pill buttons found
Documenting the system
I did an analysis of open source design systems across the web. IBM’s Carbon Design, Salesforce Lightening Design, Google’s Material Design, and Uber were among the few.
Based on other design system structures, I created a template for myself and other designers to use for documenting our components and styles.
Angelou 2.0 was created
After numerous site and Storybook audits, we designed and documented the most used/needed components and created tickets in our backlog for engineers to tackle the React implementations.
Use the dropdown to explore.
Releasing Angelou 2.0
I created a new Figma file for the Angelou design system and release notes to go along with it. I set up a bi-weekly Angelou office hours as well as working sessions to help designers update their recent files to the new system. It was launched to all 11 teams within the Figma organization. Across those 11 teams were 13 designers who used the design system on a daily basis. I monitored the usage for the first month.
First month activity
In that first month I saw usage metrics totaling 11K instances. However, I noticed a significant amount of detaches across some of our most frequently inserted atomic components. I had a plan for the next release.
21 components launched
The systems team designed and documented the most used/needed components and included them in our first release.
~11K instances 📈
Across the 13 designers using the library, a little over 11k instances were present within the first month. This was great internal usage.
82 detaches 😱
I saw a total of 82 detaches across 6 major components. After digging into the designs, I noticed variants that weren’t accounted for in this first release.
Adding variables
After seeing the amount of detaches across components, I spoke with designers to understand the reason behind these detaches.
I put design tickets in our backlog to create more variants for the designs needs.
Next month release
In the next release I saw an increase in instances and a decrease in detaches, which let me know the design system was a success and the variants supported designers’ needs.
6 new components
Over the course of the first month I noticed designers reusing custom created components across multiple files and teams. To make their lives easier, I included these in the next release.
~19K instances 📈
In the next release I saw about 8K more instances. This was partly due to new teams being created as well as new components added to the system.
-21% in detaches
While component usage increased detaches went down from 82 to 17 (a 21% decrease in overall detaches).
Hypothesis 2
Helping leadership understand the value and impact of a design system will solidify its spot on the company roadmap.
Catching 🪰🪰🪰 with 🍯
We faced the problem of getting leadership to see the value of a design system. I put together a presentation showing the benefits of design systems. I presented to the Product Org leadership which resulted in more engineering resources to help us implement the new components in Storybook.