Bloomberg

A Smarter, Faster Bloomberg.com

“The site is a reinvention of how we bring our stories to the world. It's faster, smarter, and bigger than anything we've ever done...”

In his editor's note to announce the new Bloomberg.com to the world, Bloomberg's Digital Editor Josh Topolsky underscored the magnitude of the launch, and what it meant for the Bloomberg brand.

After all, the new site, dubbed Bloomberg Business, was the first-ever flagship destination for everything within the Bloomberg media universe—Bloomberg News, Bloomberg Businessweek, Bloomberg TV, Bloomberg Video, and content from entirely new channels like Bloomberg Politics.

Going into the project, the team was aligned on two goals: The new Bloomberg.com had to be smarter and faster than ever before.

Here’s how Bloomberg and Code and Theory brought that vision to life.

9ab9a904657a8149ce6b26e34d6602abf06c7520
Bloomberg has always been very avant-garde and bold in pushing the limits of how to tell a story. The site is a reflection of that.
Josh Topolsky | Chief Digital Content Officer, and Editor of Bloomberg Digital

1

THE CHALLENGE

The challenge of bringing order and hierarchy to everything in the Bloomberg ecosystem started with a question: Who are we trying to reach?

As outlined in March 2014 by Bloomberg Media CEO Justin B. Smith, the goal was to broaden Bloomberg’s core audience beyond its traditional finance roots, towards global business.

Bloomberg Business was to be the centerpiece of that strategy.

The challenge, then, was how to accommodate both active and passive readers: from the hardcore business news junkie who needs fast, accurate, dynamic information about the markets, to the more casual topic-focused reader looking for Bloomberg’s take on the latest in technology or politics.

The solution was a flexible, modular design system that highlighted Bloomberg’s breadth of news coverage while encouraging deeper engagement into each vertical.

A2c1c0eeff157012a84bccbfd0363436d84878e9

2

Design, Functionality and Purpose

The visual language of Bloomberg.com is a combination of aesthetics and function. From the bold colors, to the use of motion, to visual cues like breaker modules and pull-quotes—everything was purposefully designed to help move a user down the page.

The article page was a major focus of the redesign, as it’s often where users land first. It’s why we made sure visitors were presented with a variety of visual cues—or pathing options—to encourage a continuous, uninterrupted reading experience. For example:



bloomberg business

01

A Progress Marker

A line at the top of the page tells readers how far along they are in the story.

B1ae7ebf6ffc7a3d0429feaa9ac542ada398a57d

02

A Persistent Bloomberg TV Video Player

The player is always visible in the top navigation bar and allows for both active and passive video consumption.

8bbcfe0db8e992bdf7cf891b2276f91f25968d9b

03

Relevant Shoulder Content

Adjacent to every story package is a grouping of relevant content to entice readers to discover more.

C5921ba9331f069144e02413159332b236171a7e

04

More Beautiful Ad Experiences

Building off of the custom ad strategy established in the design of Bloomberg Politics, Bloomberg Business takes things one step further. Our system of custom ad tools allowed Bloomberg’s ad partners to tell its unique story through a variety of units that connect a user’s scrolling behavior to the motion animation within the advertisement.

3

Story Development

To ensure that the visual treatment of every story matches its editorial importance in the news hierarchy, each content module—like live video feeds, image galleries, text, or pull-quotes—can be snapped together in near infinite ways.

Bloomberg.com can bend and flex with the news flow, and express editorial purposefulness. Consider this example:

Breaking the News

In late September, Bloomberg broke a major story about the sudden ousting of the founder of PIMCO, one of the world's most powerful bond funds. A bold, red headline is published at the top of the page.

Developing the Story

Several hours later, the story develops into a full-fledged feature story and is promoted at the top of the homepage.

Giving Context

Ten days later, editors gather supporting stories and related material to help contextualize the story arc and give readers a better sense of the history of unrest at PIMCO. The story becomes a multi-layer feature package.

Defining the Conversation

As the conversation gains momentum in the financial world, Bloomberg publishes a bold cover story—The Fall of the Bond King—and promotes it on the homepage and throughout Bloomberg.com.

E98d1554929005faf7c29629f0beb21690ee9495

4

The Response

Since its debut at the end of January, the bold, new Bloomberg.com has been the subject of heated debates in media and design circles.

Wired.com wrote that its “kaleidoscopic, modular design” heralded the “future of web news,” Venturebeat called itseriously great,” and Nieman Journalism Lab wrote that the site aims to have the “visual and rhetorical oomph” to reach a broader audience for business news.

But the project didn't end there. Bloomberg and Code and Theory continued to explore how users interact with the site, with the goal of refining and optimizing the site functionality and features to accommodate visitor needs and changes in user behavior.

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