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

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

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.

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

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.