U.S. News Homepage Refresh
Design Systems, Figma, Branding, UI Design, Platform Design
I helped pitch and then designed the relaunch of the U.S. News homepage with a flexible layout editors could rearrange without design help, content grouped by topic, and a lighter visual style that became the first public use of the refreshed design system.
MY ROLE
Design lead. Co-pitched the redesign, ran research, designed the page and handed off components
TEAM
Editors, brand leaders, executives, the platform team
TIMELINE
Weekly check-ins over three months
TOOLS
Figma, Google Material/Material UI, Brightspot CMS
How I Worked
What We Saw | Root Cause | So the Redesign Need |
|---|---|---|
The page felt dated and crowded | An aging visual system with heavy density | Lighter components with more space and clearer hierarchy |
Products were hard to find within each vertical | Every vertical section shared one identical layout | Layout variations tailored to each vertical
|
Outdated stories stayed up while launches flashed by | Dense layouts needed filler, so anything recent got rotated out quickly | Content grouped by topic, with fewer slots to fill |
The top of the page was hard to change | A static, inflexible above-the-fold layout | A flexible splash template editors control in the CMS |
Product content pushed far down the page | The layout centered on breaking news, which no longer fit U.S. News' value proposition | Products and editorial given equal footing above the fold |
01
Diagnose
The homepage looked dated, but a reskin alone would have kept the same problems. I traced what we saw on the page back to how it was built to work out what the redesign actually had to change.
Use the homepage to launch the new design system
WHY
The homepage is the most visible page U.S. News has. Building it with the first refreshed components put the new system in front of everyone and tested it in production.
TRADE-OFF
Some vertical layout enhancements were held for later iterations to keep the launch focused.
What Success Had to Look Like
Products get seen
Product launches stay visible as long as they matter, not for a few hours.
Editors self-serve
The top of the page can change without a design request.
Fresher content
Fewer outdated stories highlighted just to fill space.
More engagement
Readers spend more time on the page and click further in.
02
Pitch & Align
One page as the first step for the whole design system
I joined a group of editors, brand leaders and executives to pitch the redesign, then worked with the executive and platform teams to relaunch the homepage on the refreshed design system.
03
Explore & Research
Starting small, and looking at who was doing it well
Before any visual design, I worked out how many topics could fit on one screen, and what successful news sites had in common.
Mobile-first wireframes
Designs began on mobile, exploring layouts that could show many potential topics in a single screen.
Competitor research
I reviewed other sites in the news space and identified trends.
The more successful competitors had clean, simple designs with smaller headers and type, the opposite of our dense, oversized page.
Group content by topic instead of by recency
WHY
A tabbed section groups editorial and product content around product launches, news events and seasonal topics. Products sit beside the stories they relate to, and fewer outdated pieces get highlighted.
Trade-off
Since tabs were topical, older topics required extra clicks. This was acceptable to free up space above the fold.
Flexible splash template
A more flexible top-of-page template gave editors creative freedom in the CMS.
Less dense, Material-based
Components with more spacing, informed by competitor research and analysis of how readers used the page.
Layouts per vertical
Mocked-up variations for each vertical, such as grouping autos by vehicle type, with some planned for later iterations.
04
Design
Flexible structure, organized by topic
I laid out the final mocks using Google Material as the base for custom content components with a visible hierarchy.
05
Launch & Embed
New components only help if engineering can build every version of them
Properties and stories
I laid out the possible properties and stories for each new component.
Every combination
I identified every possible combination, and which other components would be nested inside each one.
Feeding the system
These were the first refreshed components, so they became the starting point for the wider Atlas design system refresh.
06
Outcome & Reflection
Readers stayed longer, and the design system had its first proof
The relaunch gave editors a page they could shape around what mattered that week, and gave the refreshed design system a high-visibility first use.
Shipped
Flexible splash template, tabbed topic section, Material-based content components, vertical layout variations, and full component handoff.
Results
Homepage engagement went up, including time on page and clicks, and engagement with U.S. News' AI search tool improved.
Next Steps
Research identified some weakness in scroll depth, so made modifications to the design to tease the content.
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.
