CNBC Newsletters

A redesign for the entire suite of CNBC newsletters.

The Problem

CNBC Newletters were never considered as a part of the overall CNBC brand experience. For this reason, CNBC had a vast suite of emails with no dedicated product team. Any media property under CNBC had the ability to launch an email with no oversight from the Design team. As a result, CNBC emails had a disparate appearance with an often wasteful replication of design resources. It was an unfitting representation for a respected media brand.

Legacy CNBC newsletters

Team and Role

I collaborated with the Director of Product Management to work on this project. I worked with a developer along with support from editorial. There was no mandate from our Product and Technology group to increase user engagement. This enabled us to focus on editorial as our end user.

I coordinated and led all facets of design including information architecture, analysis, visual, product, and prototyping. I also conducted user research using interviews and participatory design sessions in order to address both user behavior and attitudes.

The Design Process

In order to identify what was worth building, I started out by undertaking an extensive component audit. After sifting through the catalog of legacy emails, we were able to identify the key common components. This enabled us to focus on creating an MVP that met the user’s core needs.

Newsletter component audit

After interview members of the marketing and editorial departments, I realized that they wanted the flexibility to edit the content of the email to suit their needs from user engagement to driving social. It becomes apparent that a card-based design pattern would prove to be the best solution. After buy-in from internal stakeholders was secured, I proceeded to research various permutations of a card-based system.

Newsletter card wireframes

Once I created enough concept cards, I began to assemble low fidelity prototypes. Mixing and matching, I was able to generate near-endless permutations of the email prototypes. I proceeded to create a living pattern library showing each UI sample while the developer constructed a corresponding code snippet library.

Low fidelity newsletter prototypes

Newsletter Pattern Library common email components

Newsletter Pattern Library for story cards

Once the pattern library was completed, we carried tests with various members of the editorial team in order to create a new email. The effect was akin to ordering off a menu. The process was virtually seamless. All the editor had to provide was a logo and brand color. I worked alongside the developer to ensure the overall integrity of the design and to make sure the newsletters were fully responsive. The final step was to stage a number of participatory design exercises with members of editorial to train them on how to design an email and handoff for production.

High fidelity newsletter prototypes

The Outcome

The email redesign was well received within the company. Emails could now be produced and deployed in a matter of hours with virtually no oversight from Design. As a result of this experience, I was able to learn that I was able to create a solution on my own with minimal resources.

Other projects: 

Bears. Beets. Battlestar Galactica.