The Guts: Behind the scenes of WSJ’s digital redesign

The Wall Street Journal launched its digital redesign on April 21. Creative director Himesh Patel gives us an inside look at how it came together.

How is your design department set up?

The site was designed and built in house. The redesign team consisted of 5 designers and 5 UX designers. The designers/UX teams were embedded within our technical agile teams. There were 5 agile teams working across WSJ redesign – Navigation, Homepage/section front, Article, Market Data and Customer Profile.

Do digital designers work in the same team as print designers?

No, the digital design team worked separately from the print design team, but we did work very closely with the newsroom throughout the entire redesign process. As part of the Journal’s digital transformation, new product and design responsibilities have become embedded within the newsroom since the launch of the redesigned site.

Who led the redesign process? 

You have quite a challenge because your content is very number-based and serious. How did that impact design decisions? 

The new wsj.com highlights the core global coverage areas while also showcasing the visually dynamic storytelling across especially all of our content. 

Our streamlined navigation highlights the content and makes it easier for readers to find the coverage areas they value most.

Creating interactive charts that work across multiple screen sizes was a real challenge. We worked tirelessly to build tools to help achieve this. In coming weeks we will be able to dynamically generate charts that responsively size at different break points.

How did you settle on a 4-column top homepage module (on desktop)? You get a lot of headlines “above the fold” but its also quite busy. 

Our focus around mobile and tablet led us to create a 4-column grid, which would in turn scale up to tablet and desktop. Accommodating different ad sizes and placements also played a key role in defining the 4 column grid.

The redesign is based on four breakpoints  – mobile (4unit), tablet portrait (8unit), landscape tablet (12unit) and premium desktop view (16unit). Accommodating more content ‘above the fold’ was a key request from our readers, and they also wanted a real sense of editorial hierarchy regardless of screen size.

How did you decide which social media buttons to include on the story level? Evernote is irregular, but its a great idea. 

Including Evernote was a way of further connecting with our subscribers. Research has shown that they use Evernote in the workplace and they can now easily incorporate Journal content into their workflow.

I see video modules all across the site. Is this a big push for WSJ right now? 

Yes, video is very important to us and is an integral part of our storytelling. Promoting video across WSJ.com was one of our key goals for the redesign.

Your video landing page switches things up with a black background and reverse type. What was the thought process behind that? 

The reason behind using black on our video center site was to create higher contrast for a better viewing experience.  

How did you pick your new fonts? 

After many weeks of explorative designs we settled for Chronicle for headlines and body text. We found Chronicle to be versatile and hard working font with an elegant character that complimented our print typographical language.

What is your favorite feature of the site? 

There are several but the market data drawer is my personal favorite. Subscribers can access real-time information and personalized stock prices.  I like the fact you can access live contextual markets data no matter where you are on WSJ. Plus, it’s responsive.

WSJDrawer

What feedback have you received from readers? 

It’s been great to hear readers comment on the responsive design — getting Journal content on all of their devices is really important to them. We also consulted with readers throughout the process, which really helped inform our thinking/planning — their experience and feedback was our guide. 

[See an awesome design project and want to know more about it? Send it my way! You can email me at rschallom@gmail.com or find me on Twitter.]