Atlas Design System Relaunch
Design Systems, Figma, Branding, UI Design, Platform Design
Atlas, the U.S. News design system, had grown since 2017 with no one pruning it, and earlier attempts to refresh it had failed. I won leadership buy-in, then led an overhaul of how the system was organized and how it looked: rebuilt on Google Material, reorganized by function, and set up so the team could maintain it after launch.
MY ROLE
Design lead. Secured leadership buy-in, planned the refresh with platform, led the design team through the rebuild
TEAM
My design team, the platform team, development heads, leadership
TIMELINE
Planned to a shared timeline with platform team
TOOLS
Figma (libraries and variables), Google Material, MUI, Storybook
What We Saw | Root Cause | So the Refresh Needed |
|---|---|---|
Designers and front-end devs struggled to onboard | Bloat plus gaps in the documentation | A findable structure, refreshed docs and retraining |
The company disliked the look and feel | A dated visual language nobody had revisited | A visible aesthetic refresh, not just cleanup |
Inconsistent aesthetics across products | The system scaled without anyone checking it | One shared foundation of variables for type, color, shape and spacing |
Duplicate and near-duplicate components piling up | Open contribution, with teams adding new pieces instead of updating or deprecating old ones | A full audit, plus a merge workflow and tracker |
Few meaningful updates since the 2017 launch | Limited resources, and earlier refresh attempts that failed | Leadership sponsorship and a plan agreed with platform |
01
Diagnose
Atlas didn't need more components. It needed fewer, and a new governance strategy
Feedback was about the look, but a new coat of paint would have drifted the same way. I traced each recurring problem back to its cause to work out what the refresh actually had to fix.
Build on Google Material instead of from scratch
WHY
After evaluating several frameworks, we chose Material. Its base components and variable structure gave us a tested foundation, so the team's effort could go into U.S. News' own content components.
TRADE-OFF
Material's patterns were very basic so many components would still need to be built. The default look is very basic. Material is closer to a library then a framework.
What Success Had to Look Like
Leaner
Overlapping components merged, with a way to stop new duplicates.
Findable
A new designer or developer can locate the right component without asking.
Visibly refreshed
A look the company would actually want to see on its products.
Nothing breaks
Existing uses keep working while the system changes underneath them.
02
Pitch & Align
Earlier refreshes failed, so this one started with buy-in
Previous attempts had stalled, so I secured leadership buy-in before any design work began. I then worked with the platform team and my design team on a shared plan and timeline for a full refresh of both organization and aesthetics. Leadership wanted a better look for selling to ad-partners so the aesthetic changes were key.
Captured everything
With help from my team, we screenshotted every existing component and imported them onto a single Figma board.
Regrouped by function
We sorted components by what they do rather than how they were built, which made overlaps obvious.
Flagged overlaps
Components doing the same job were marked as merge candidates.
03
Audit
Putting every component on one board
Before rebuilding anything, we needed to see the whole system at once, including the parts nobody remembered adding.
What the audit showed
Laid out by function, the bloat was visible at a glance. Several components were doing the same job under different names.
Refreshed libraries
A Material-based theme
A Figma theme built on Material's variable structure became the foundation library everything else draws from.
Rebuild only where needed
Material base components were kept with minimal functional changes. We rebuilt only the components that needed it.
Existing uses still work
Rebuilt components used existing component properties, so every current use could be reproduced on the new foundation.
New library organization
Functional over atomic organization
WHY
Atoms, molecules and organisms make sense to the people who built a system, not to the people looking for something in it. Grouping by function made the library easier to learn and to search.
Trade-off
We needed to figure out a way to organize dependencies
04
Rebuild
A new foundation that didn't break what was already live
We rebuilt the Figma libraries from the foundation up, and then reorganized them so people could find what they needed.
Library organization
To assist with training developers and designers for the new organization, visuals like this were made to explore the library layout
Library Files
New Figma library files were made to house the new components using a scannable frame template
05
Roll out & sustain
A refresh only lasts if people use it and the bloat stays out
Retrained
Refreshed the documentation and retrained the team on typography, color, borders and shape, spacing, and processes.
Proven in production
The U.S. News homepage redesign was the first product built with the refreshed components.
Guarded against bloat
Set up workflows and a tracker for merging components, so duplicates get resolved instead of piling up.
Kept everyone informed
Ran update sessions for leadership and staff, and delegated component redesigns to my team members so I wasn't a blocker.
06
Outcome & Reflection
A foundation the rest of the product can build on
The refresh gave U.S. News a system the team can extend without it sprawling again. The homepage redesign showed it working in production, and spreading component redesigns across the team meant the system no longer rested on one person.
Shipped
Component audit, a Material-based Figma theme, rebuilt and functionally organized libraries, refreshed docs and training, a merge workflow and tracker, and a homepage redesign.
Early Signal
The homepage built on the refreshed components saw higher time on page and clicks. New components allowed for quick construction of new tools like the compare product.
What I'd do differently
Material UI doesn't perform well as a scalable framework, Shad.cn or Tailwind would have been a better route. Federating component construction created friction with teams that had other priorities.
More Projects
U.S. News Homepage Refresh
Partnered with executive and platform teams to relaunch the U.S. News & World Report homepage using the refreshed design system.
Atlas Design System Refresh
Overhauled the organization and design of Atlas, the U.S. News & World Report design system.
Research Operations
Led Usability Research Operations to establish research frameworks, training materials, and self-serve processes that democratized user insights across teams.
Quizzard
I played a key role in building "Quizzard," a recommendation tool that matches users with products or services based on their needs.
Figma Migration
Led the migration of the U.S. News Design System to Figma, leveraging deep design system expertise and operations experience to streamline adoption.
