WSJ Website
The Wall Street Journal website is a critical touchpoint for delivering news and driving engagement. Designing this experience requires a holistic approach that integrates brand, editorial and experience design disciplines into a cohesive, user-first platform.
Title
• Director, Experience Design, WSJ
Roles
• Design Strategy • Design Leadership
Results
• Oversaw design strategy for complete re-platform of the homepage and section fronts
• Implemented design system components for consistency and reuse
• Aligned strategic design decisions with larger company-wide design language initiatives
Another Brick in the Wall
Design Strategy
Found State
The homepage suffered from visual overload, clashing attention zones, and unclear hierarchy, making it difficult for users to focus or navigate.
Competing content, aggressive ads, and dense financial data crowd the space, while subtle navigation cues and poor typographic contrast weaken clarity.
With smarter grouping, visual restraint, and a clearer priority structure, the experience could be significantly improved.
Voices
Each component was considered from the perspective of the information it held. We called that perspective “voice” and it informed how specific elements would ultimately be designed. Considering how tone and language varied between voices allowed us to clarify purpose and express the design of each element precisely and appropriately.
Consistency
Inconsistencies in typography and how information was organized degraded SEO, brand architecture, and user experience. We sought to simplify the design language using core WSJ typefaces and patterns that were familiar to our users to better express brand and editorial intent.
Architecture
We implemented a modular component strategy for both the homepage and section fronts. The foundational Autofeed template uses a single component to display stories chronologically, without human curation.
Building on this are the Preset and High-Touch templates, which introduce more visual storytelling options. These can be either automated or curated and are used for high-traffic section fronts for greater editorial control.
The Homepage follows a similar approach but supports a broader range of components for more complex layouts.
Content Tags
To unify horizontal content strategies across a vertically structured system of sections and topics, I introduced a layer of Content Tags—flexible descriptors like Live, Exclusive, Breaking or Opinion that transcend traditional taxonomy. These tags operate independently of section or topic, allowing for dynamic surfacing of time-sensitive or editorially significant material across the product. The diagram illustrates how Content Tags intersect with multiple sections and topics, creating a lightweight, scalable framework for highlighting priority content without overloading the structural hierarchy.
Fronts
Design Implementation
Homepage
Complete replatform for design system enhancements
Section Fronts
Olympic Banner
