theSkimm
/
Product Design
/
Design System
/
UI
/
Newsletter Design System
A scalable design system that broadens consistency across all newsletter products
THE TEAM & PROJECT LENGTH /
Lead Designer 👋, Brand Design Manager, and Senior Full-stack Engineer. 1 month.
BACKGROUND /
At the end of 2023, theSkimm was going through a brand refresh that would elevate its visual identity and deliver personalized content to a diverse audience of millennial women in the US.
Business goals /
implement modularity in system as newsletter content was being prepared for segmentation and personalization
optimize design resources by creating turnkey templates for sales teams when they have to produce for business.
constraints /
Below is the initial launch of the brand refresh, so all updates with the engineering partner needed to be low-lift changes, particularly color, typography, and spacing. The next phase would consider a whole new direction that would change content and structure to be more personalized — a cross-collaboration with the editorial and brand design team.
COURSE OF ACTION /
Apply new styles from brand refresh onto existing components with minimal engineering resources.
Assess and audit of the newsletter design system
Understand how cross-functional production designers would use the design system for their own purposes. This would inform how to simplify the components for ease of use.
Launch component library, and then educate designers on how to use and push modularity and scalability of design system.
Work under the mindset that the system is always growing and that the feedback loop is never closed. Designers were encouraged to reach out whenever the system wasn't working so that we can make improvements without sacrificing consistency.
brand refresh /
Dark mode /
The non-existence of dark mode variables was a huge gap
Audit common components across all newsletters /
A newsletter is made up of sections, where there are basic types:
header card
in-line section cards
footer card
Modularize the most common component: in-line section cards /
As the most complex, in-line cards have several variants and thus needs the most flexibility. In the simplest variant, the in-line section just needs a paragraph of text. From there, this paragraph component has many properties (which can also be programmed as base components) that can display or hide based on necessity. Properties added to the text/paragraph component include:
image(s)
on/off
different size ratios (1:1, 5:3, 4:5)
headline
on/off
body
horizontal rule
on/off
layout
horizontal (media to left/right)/vertical (top)
Leverage the "swap" feature: flexibility at all levels /
After setting the base components of an in-line card, I then could make more layered and complex versions of the card to match the section themes of the newsletter. This crucial step was extremely important to establishing a modular system.
When speaking with cross-functional teams, I discovered they needed the ability to not only edit at the card level, but also within the card. For example, adding images of different ratios, types of paragraphs, etc.
dark mode variables /
By implementing in dark mode variables to the design system, it reminds newsletter stakeholders that color considerations are important to emails.
results & final thoughts /
