Overview
In 2023, I joined Dictionary.com's design team to work on a pivotal site-wide redesign. With this redesign, Dictionary.com aimed to strengthen their brand presence, boost content awareness, and enhance ad view-ability, among other goals.
As the Design System Designer, my responsibility was to capture and scale design decisions in order to maintain consistency across the site. It wasn't long until the Aardvark Design System was born and at the heart of it, a streamlined Design Tokens workflow that not only kept designs consistent but also enabled faster design delivery times as well as improved designer to developer parity.
Here are some of the highlights.
"Opting for one-off fixes over a design system is like solving for a ceiling leak with a bucket. We all know bigger problems will follow." - George Frederick, VP User Experience and Design, Dictionary.com
Tackling one-off design solutions.
Over the years, Dictionary.com had accrued significant design debt in the form of scattered, one-off solutions that diluted brand identity, slowed down iteration efforts, and prevented users from forming the right mental models when navigating the site.
Moving forward, we looked to create and maintain a strong foundation of design decisions - or design tokens.
The design token workflow
For Design Tokens to work, we needed a smooth workflow that wouldn't burden our engineering resources. To achieve this, we experimented with Amazon's Style Dictionary tool and Lukas Oppermann's plugin to efficiently translate our Figma styles into practical code. It looked something like this:
While we were honing in on the workflow, we also worked on a naming scheme for our tokens - arguably the most important part for scaling design decisions.
Color tokens
The challenge with naming colors was finding the right amount of abstraction levels. Many Design Systems like Adobe's Spectrum have 3 levels: global, alias, and component but taking into account the bandwidth of our team and our needs, we landed on 2 levels of abstraction: palette, and contextual.
- Palette Colors. The foundational level for our colors. These are used as references for contextual colors. You can think of these colors as all the available options. (e.g. palette/blue/700)
- Contextual Colors. Colors that we apply to UI elements. You can think of these as our choices. (e.g. color/bkgd/button/enabled)
Typography tokens
Converting typography decisions into tokens was particularly challenging. We faced a decision between two approaches: creating separate tokens for each typography property (such as font-family, font-size, font-weight, line-height, and letter-spacing), or consolidating properties into a single typography token. We experimented with both and opted for the latter approach.
Scaling these decisions
Our Design Tokens, along with reusable components built with those tokens, would end up supporting major redesign initiatives including the homepage, synonym and definition pages, subscription flows, and content landing pages.
We were able to do all of this within 1 year with limited to no design-development churn. All while improving ad view-ability across core experiences by up to 19%.
