The Wall Street Journal Homepage

The Wall Street Journal is one of the world’s most trusted sources of news, and the homepage of wsj.com is the face of the Journal. This single page is read by more than half a million people every day. It is continuously curated, updated minute-by-minute to reflect the rapidly evolving news landscape. In 2018, it needed its own evolution.

Year
2016-2018
Role
Design Director
Outcomes
  • New design language for curating the news across devices and platforms
  • 40% increase in mobile traffic
  • Industry-leading accessibility score

The role of the homepage

Before the rise of social media and powerful search engines, the homepage used to be the most important page on a website. Homepages served as directories, discovery engines and brand marquees. But in the past decade, the homepage's purpose has changed. It's no longer the primary platform of discovery; many people read the Wall Street Journal without ever seeing the homepage.

In response to this shift, the editors of the Wall Street Journal wanted to begin exploring how the homepage can be a standalone news-reading experience. The goal was to provide a snapshot of the news that could quickly adapt to the minute-by-minute coverage the Journal provided. The homepage would not only need to change to reflect the news, but also accommodate a wide variety of reading behaviors, advertising needs, and business goals.

Explorations of how the homepage could change on weekends to reflect different reading behavior

The editors of the Journal also wanted to introduce features to the homepage that built on existing brand equity. For instance, the front page "What's News" column is one of the most recognizable elements of the newspaper: short bullet-style snippets that provide an overview of all the day's business and finance news. Part of my team's goals was to build a system that would support these new features.

One exploration of how the "What's News" column from the paper (left) could be incorporated into the homepage (right)

Modernizing the Journal's typography

Related Essay: Changing all the fonts on WSJ.com

The Wall Street Journal has a long history of quality typography. There’s a wealth of design wisdom behind the paper’s current look, as the evolution of news design is encoded in each page.

The paper in 1889 and 2017

Each typeface currently used in print was designed specifically for the needs of the Journal’s format and printing process. Those typefaces are:

The three typefaces we brought to the web in 2017

While these typefaces are central to the brand of the Journal, digital channels are a significantly more complicated environment. After many legal and technical hurdles, and with the hard work and cooperation of many people, we finally brought these typefaces to wsj.com on December 11, 2017.

A programming language for design

Related Essay: Designing with code

Tools can make or break a project. Working with the journalists at the Journal, I discovered that traditional design tools wouldn't do; the news changes too fast and is too unpredictable to be constrained by static elements in a Sketch file.

Instead, I created a software tool — called the homepage sandbox — to enable designers, developers, and journalists to collaborate on the design of the homepage. This effort paid off, and the partnership between stakeholders allowed designers to iterate quickly and explore more broadly.

The homepage sandbox pulled data in real time from the Journal's content APIs. It formatted story data into a simple structure that editors, designers, and engineers could read and edit.

{ 
"id":"SB11503272875369313808404584415401863740902",

"headline":{
"text":"U.S., China Draw Up Plan to Settle Trade Dispute by
November",
"style":"News"
},
"summary":"Chinese and U.S. negotiators are
drawing up a road map for talks to end their trade impasse ahead of meetings
between President Trump and Xi Jinping in November.",
"media":{
"url":"https://images.wsj.net/im-22615"
},
"byline":"Lingling Wei in Beijing and Bob Davis in Washington",
"category":"World",
"storyType":"World",
"avatar":false,
"timestamp":1570738629100,
"bullets":[],
"commentCount":169
}
An example API response

The sandbox allowed users to define layouts using plain text, making it easy to quickly try new variations and combinations.

+card(data, { 
orientation: 'horizontal',
headline: {
size: 'l',
},
borders: false
})
A card component configured with the data from the API and some additional options

The software outputs static html which could be easily shared or hosted online, giving the team a way of sharing ideas without relying on proprietary file formats or specialized software.

The result of the code example above — a simple story card.

Accessibility

Part of the work I led on the homepage was to refine the mobile experience. In addition to matching the look of wsj.com to the look and feel of the native iOS and Android apps, we took the opportunity to drastically increase the accessibility of the page as a whole.

The mobile homepage before and after our updates

The first step in this project was to define guidelines and educate our organizational stakeholders on the benefit of designing with accessibility in mind.

What is accessibility?
Accessibility is the word we use when describing a broad set of guidelines and principles that make our products easy to use.

Why is accessibility important?
Many of our members have visual, hearing, motor, or cognitive disabilities. It is our goal to provide the same value to them as any other member.

However, accessibility is for everybody. Here are some examples of situational disabilities:

  • Visual: Reading a story outside in bright sunlight that makes it difficult to read small text
  • Hearing: Watching a video in a loud place that makes it difficult to hear audio
  • Motor: Wearing winter gloves that make it difficult to use a touchscreen accurately
  • Cognitive: Listening to a podcast while cooking, making it difficult to pay attention
By adhering to and maintaining these principles and guidelines, we can make our products better for all our users.
An excerpt from the 2016 Wall Street Journal accessibility guidelines

The previous mobile homepage scored an embarrassing 39 points on Google’s Lighthouse accessibility audit. But after our work, the mobile homepage is at an 82.

An image showing that the Google Lightouse score of the new mobile homepage is 82

These accessibility improvements, along with performance and usability enhancements, resulted in an increase of unique visitors, visits, and page views by upwards of 40%.

Putting it all together

Having a robust set of design tools allowed an unprecedented level of coordination between designers, developers, and editors for the Wall Street Journal's homepage. The resulting collaboration has given the homepage a new life as a uniquely valuable news reading experience.

Editors often wanted to create "packages," groups of stories that shared a thematic and newsworthy subject. Cards could be reconfigured on-the-fly to accommodate complex layouts and hierarchies.
With the updated card-based approach, some of the Journal's most recognizable landmarks (the A-hed, left, and the Lede, right) could be brought from the paper to the website.

As of 2019, the wsj.com was rolling out the result of this work in an iterative, continuous fashion.