Placeholders in the Spectra Design System

BRIEF

I created a scalable placeholder system that standardized 70+ inconsistent components across CNN teams, increasing Figma library adoption by 8x and helping platform designers build pages with speed and clarity.

SCOPE

Design Systems

CMS Platforms

DURATION

3 months

TEAM

Spriggs (Design)
Laura Schoenheit (UX Writer)

IMPACT

8x increase in insertions;

7x decrease in detaches

Placeholder label

Placeholder label

Placeholder label

Placeholder label

Placeholder label

Placeholder label

Component

Component

Component

AI Component

AI Component

AI Component

Dynamic Content Wrapper

Dynamic Logic Component

US

World

Politics

Business

Opinion

Health

Entertainment

Style

Travel

Sports

Video

OVERVIEW

Designing for Designers

Designing for Designers

During the second half of my CNN internship, my work shifted from newsroom-facing tools to the internal infrastructure designers and engineers rely on every day.​ I focused on refining core components for Spectra, the design system for CNN's CMS (Stellar).


After conducting an audit of 70+ placeholder patterns in Stellar, I found overlapping behaviors, inconsistent visuals, and vague labels that made it harder for platform designers to move quickly and stay aligned with production. Partnering with product designers, content designers, and engineering, I refactored placeholders into a reusable Spectra component set with clear variants, sharper labels, and stronger guidance for when to use each.​


This case study is still a work in progress. In the meantime, I've prepared a slide deck documenting my design decisions and impact metrics.

This past summer, I joined CNN's Platforms and Foundations team to design tools for Stellar, the internal CMS where editorial teams draft and edit articles before going live. My focus was on improving efficiency across the newsroom.


Through conversations with journalists and editors, I identified a common pain point: converting paragraphs to subheads required manual creation, which introduced friction in time-sensitive areas like breaking news. Working with my team, I designed and shipped a one-click conversion feature directly in the Quill bubble editor, while also refining the visual design of the component.


This case study is currently in progress. In the meantime, I've prepared a slide deck documenting my complete design process and impact metrics.

©2026 Haipei Chen

©2026 Haipei Chen

©2026 Haipei Chen

Last Update: 2026.1.8

Last Update: 2026.1.8

Last Update: 2026.1.8