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.
- 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 accomodate a wide variety of reading behaviors, advertising needs, and business goals.
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.
Modernizing the Journal's typography
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.
Each typeface currently used in print was designed specifically for the needs of the Journal’s format and printing process. Those typefaces are:
- Escrow, designed for the Journal by Cyrus Highsmith in 2002,
- Exchange, designed for the Journal by Tobias Frere-Jones in 2002, and
- Retian, designed for the Journal by Tobias Frere-Jones in 2000.
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 peopl, we finally brought these typefaces to wsj.com on December 11, 2017.
A programming language for design
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 structue that editors, designers, and engineers could read and edit.
The sandbox allowed users to define layouts using plain text, making it easy to quickly try new variations and combinations.
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.
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 first step in this project was to define guidelines and educate our organizational stakeholders on the benefit of designing with accessibility in mind.
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.
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.
As of 2019, the wsj.com was rolling out the result of this work in an iterative, continuous fashion.