Haikus Unlocked

Congratulations! You now have access to the incredible Graphic Design Haiku Machine.

No, Thanks

The Wall Street Journal

Sr. Product Designer

2015 – Present

As the line between fact and fiction has blurred, there has never been such a great need for the truth. It is a privilege to work at an organization that sets such a high bar for ethics and standards. It is an equally interesting challenge to build design systems that power quality journalism and the subscription model that supports it.

The Wall Street Journal

Subscription Flow

The first project I worked on was a redesign of our storefronts and subscription processes. The previous subscription flow was nearly a decade old, wasn’t mobile-friendly, and was far too complex.

We started by designing a new storefront template that could be easily updated for seasonal promotions. The design was driven by years of feedback, market research, and A/B test results. Our primary objectives were to simplify product offerings, increase transparency, elevate the WSJ brand and, of course, convert new members.

Responsive storefront templates can be adjusted for seasonal promotions.
Responsive storefront templates can be adjusted for seasonal promotions.

Next, we redesigned the subscription flow from the ground up. It was as much an exercise in design as it was restraint. Do we really need a user’s mother’s maiden name? Do we really need a physical address for a digital subscription? We cut the number of fields in half, simplified the flow into three clear steps, and designed everything mobile-first. The result has been a double-digit increase in conversions year-over-year.

Simplified 3-step mobile sign up flow with 50% fewer fields.
Simplified 3-step mobile sign up flow with 50% fewer fields.

Single Sign-on

Riding on the heels of the subscription flow success, we tackled the sign-on flow next. The Dow Jones family of products includes The Wall Street Journal, WSJ Pro, Barron’s, MarketWatch, and others. In the past, each brand had managed their own authentication systems. Some were modern and mobile-friendly, others were not. After redesigning the WSJ sign-on flow, we extended the system by providing a set of variables that would allow it to be repurposed across the entire suite of products.

Sign-on pages with various brand themes applied.
Sign-on pages with various brand themes applied.

Component Library

After two successful launches, a component library began to emerge. We built out an extensive Sketch library and corresponding React storybook of UI elements that could be used for future customer-facing systems. The components below are being used to power new projects all across the business. Many of the projects can’t be shared publicly at this time.

WSJ UI kit and form library maintained in Sketch.
WSJ UI kit and form library maintained in Sketch.

Emails & Newsletters

WSJ offers a suite of more than 50 daily newsletters and alerts. Over the years, individual newsletters had drifted away from the brand guidelines. Many also weren’t mobile optimized. We needed to bring emails into the 21st century.

We designed a modular framework that could be applied across the entire suite. Most components would be shared, but some newsletters could still leverage custom-tailored components such as the Olympic medal count module. Each component could be independently tested in various email clients and optimized for mobile.

I’m particularly proud of the build pipeline we setup. Our custom development environment makes spinning up new newsletters and making edits to all newsletters totally painless – even, dare I say, a joy.

WSJ 2018 Olympics newsletter and a Politics Alert email.
WSJ 2018 Olympics newsletter and a Politics Alert email.

Off-platform

WSJ content lives two lives. The first is on our apps and website, the second is off-platform on social media and third party news aggregators such as Apple News. Our team took a cohesive look at the off-platform brand system, updating the visual identity across various disparate Facebook and Twitter accounts.

Banner featuring public figures illustrated in the iconic WSJ stipple style. Used for Facebook and Twitter branding.
Banner featuring public figures illustrated in the iconic WSJ stipple style. Used for Facebook and Twitter branding.
Business section branding.
Business section branding.
C-suite section branding.
C-suite section branding.
India section branding.
India section branding.
Life section branding.
Life section branding.
WSJ branding for Facebook and Twitter.
WSJ branding for Facebook and Twitter.

We also extended the system to in-home devices such as tvOS, Amazon Fire TV, and voice-activated devices such as Amazon Alexa.

WSJ Apple TV branding.
WSJ Apple TV branding.

Marketing Direction

Quality products deserve quality marketing. Over the years, a number of marketing pages had sprung up at various obscure URLs. Many didn’t reflect our true product offerings. We decided to consolidate them all into one high-quality destination. After shooting new product photography, we designed an engaging single-scroll page detailing our latest product offerings and highlighting some of the year’s most acclaimed stories. We hope it’ll raise the bar for future marketing materials. Have a scroll!

WSJ subscription marketing site – mobile.
WSJ subscription marketing site – mobile.
WSJ subscription marketing site – desktop.
WSJ subscription marketing site – desktop.

Onward & Upward

The above represents a tiny fraction of the work we’ve done over the past three years. So many other incredible things have happened in that time. We updated all the fonts and typography on WSJ.com (read Matt’s account here / Che’s interview here). We launched an entirely new iOS app that went on to win the 2018 Webby for Best News App. Currently, we’re focussing heavily on overhauling our newsroom tools to simplify processes for our world-class journalists. We also continue to improve and expand our product offerings.

We have an incredible product and engineering team and we’re always looking for talented designers and engineers. If you’re interested in joining our team, please contact me.

Up Next

Hendrix

Hendrix