CNN

Reimagining The CNN Magic Wall

The CNN Magic Wall, with John King at the controls, has been a popular and critical part of CNN’s politics and live election coverage and storytelling for almost 10 years. It has spawned internet memes, been a guest of Saturday Night Live, and been imitated by all of CNN’s competitors.

With the approach of the 2018 midterm elections (which were sure to be the most watched and hotly contested in history) CNN partnered with Code and Theory to take its iconic Magic Wall to the next level.

Natl Map Pres State
Global App Switcher 1
H Bo P Dot View Labels

1

The Challenge

Designing an experience that could bridge physical with digital broadcast.

The Magic Wall presents a number of design challenges. It is a piece of digital software that is operated by one user on a large touchscreen. The ultimate audience experience is watching John King use a piece of technology as the performance is captured by various television cameras under specific lighting conditions in a television studio. That means we had to take into account everything from John King’s height to his personal motion preferences: how he likes to move, how he pinches and zooms the map, the level of responsiveness he looks for from the telestration feature, and also how colors would look on camera.

Information had to be big, bold and bright to show up from a variety of camera positions, while interactions and animations had to pop in a theatrical way that would look great on broadcast. Finally, John had to be able to smoothly operate a number of complex features and filters while continually talking and never turning his back on the audience.

Pasted image 9

2

The Solution

Working collaboratively with CNN, we reimagined the look, feel and core feature set of the main individual applications that make up the Magic Wall. We developed a suite of new features and capabilities designed around anticipated 2018 Midterm Election storylines, including, for the first time ever, a House Battle for Control simulation application.

We also reworked the technology to make it more secure and scalable for the future, helping CNN stay ahead of its competitors in an increasingly crowded and cutthroat media environment.

Considered Design And Functionality

To create a more modern (and intuitive) look, we incorporated CNN's proprietary font throughout the Wall, made the key information panels more vibrant and engaging, and made the map movements more theatrical and immersive. A new information hierarchy made previously complex information much more digestible to the audience.

We also built an entire country's worth of custom maps, and narrowed down the scalable features to make geographic borders cleaner and clearer, giving them the most powerful and flexible storytelling opportunities.

3

The Results

CNN was the #1 rated show in the most critical demographics.

The Magic Wall performed flawlessly throughout 13 continuous hours of intense use on live television and, by CNN’s estimation, was on camera for more time than any other national election broadcast in the history of the program. It enjoyed far more screen time than competitors’ products.

Magic Wall apps, including some experimental features, on Surface tablets, were used in the CNN control room to help the politics team drive the coverage. Some of CNN’s journalists used the Magic Wall installs outside of the studio to come up with story ideas for that night and the next day. Not only did the Magic Wall end up being an invaluable on-air storytelling tool, but it played a big role in helping the CNN team off-camera as well.

Meta Image 1200x627
Amazon

Ads that work as hard as you do

Code and Theory developed the integrated, global campaign connecting Amazon Ads with small businesses everywhere.

Read More
  • Proved Amazon Ads are made to match the right person, with the right business, right away.
  • Doubled traffic to Amazon Ads' dot com destination.
  • Produced a global, integrated campaign in less than six months.

Driving B2B Growth

Partnering with some of the world's largest companies to fuel their business-to-business expansion.

Evolving E-commerce to Fit Modern Audiences

We are shaping the digital transformation of the industry by creating strong connections between audiences and brands.

Leading With Empathy and Inclusivity

Having deeper conversations, widening the funnel, and driving innovation with an inclusive-first lens.

Screen Shot 2023 03 01 at 11 14 04 AM
Marriott Bonvoy

Reimagining Marriott Bonvoy as a Hub for Travel and Commerce

Evolving Bonvoy’s design system to be more modern and immersive while staying true to the core strong brand identity.

Read More
  • Mobile-First
  • Contextualized Conversion
  • Flexible Design and Content Systems
Black BoxBlack BoxBlack Box

Recognition

  • YETI x Code and Theory

    Innovation by Design

    Best in Marketing
  • Code and Theory

    Innovation by Design

    Design Company of the Year
  • Code and Theory

    Ad Age

    Agency A-List
Untitled design
Allspring

Speed to Market for a Portfolio Optimization Tool

Crafting a UI for a complex product through user input and clear data visualization.

Read More
  • Improving workflow processes through enhanced user interface design
  • Clear and simple data visualizations for complex data sets
  • Designing a roadmap to continue to iterate and optimize the product on a rolling basis post-launch

All Work

 2023

Says a Lot —

Latest

News — 

CampaignLive | Behavior as a prompt: Why AI’s ability to anticipate will change business forever

News — 

Code and Theory Wins Three Drum Awards For AI, Creativity, and UX with YETI and Tipico

News — 

Under Armour Launches UA Rewards with Masterclass-style Video Series, in Partnership with Code and Theory

News — 

Figma Names Code and Theory as Launch Partner in New Service Partner Program

News — 

Scout by Sutter Health™ Launches an App Focused on Resilience Building for Youth and their ‘Champions’, Built by Code and Theory

News — 

Code and Theory Network Wins Six W3 Awards

News — 

Facing the Future: A Guide to AI and Design Transformation

News — 

Amazon Ads Debuts First Small Business-Targeted Campaign