Skip to content
BuzzMedia· Mobile
Director of Product, Mobile · 2011-2012CELEBUZZ!
BuzzMedia / SpinMedia · Mobile

One mobile system. Forty-plus celebrity brands. A hundred million readers a month.

BuzzMedia was a network of entertainment and music sites, Celebuzz, Just Jared, OK! Magazine, Idolator, PureVolume, Stereogum, Egotastic, and dozens more. I led the mobile team that put all of them in your hand, not by building forty apps, but by building one system that could wear any of their skins.

40+
brands
100M+
monthly
20+
apps + sites
2011-12
tenure
Celebuzz m-dot home on iPhoneEgotastic m-dot feed on iPhone
The Situation

A network that skipped the phone.

In 2011 the audience had moved to phones and most publishers had not. BuzzMedia had dozens of high-traffic brands, each with its own look, its own voice, its own fans, and almost none of them worked on a phone. The naive fix was forty mobile projects. There was neither the time nor the team for that. We needed the whole network mobile at once.

The Idea

Don't build forty apps. Build one that becomes any of them.

Every one of these brands did the same fundamental thing: put a celebrity photo and a sharp headline in front of a reader, with galleries, a couple of section tabs, and a share button. So we built that once, as a single mobile publishing framework, and made the brand a variable. Swap the wordmark and one accent color and Celebuzz's magenta becomes Egotastic's red becomes any property in the network. The structure holds; the skin changes. One system, forty faces.

--brand:#A9034Athe only variable. It is recoloring this page's chrome as you scroll.
The Proof

Same bones, different face.

Here is the framework wearing two of its skins. Same masthead, same tabbed feed, same gallery and reader, magenta for Celebuzz, red for Egotastic. Multiply that by the rest of the network and you have an entire media company on mobile, built from one system.

Celebuzz m-dot home
1234
Celebuzz · #A9034A
Shared structure
1Masthead bar, brand color + wordmark
2Tab row, black active tile with notch
3Article-list item, photo + bold headline
4Gallery + comment count chips
5Dek + "Read More »" in brand accent
The only difference
wordmark + accentvswordmark + accent
Egotastic m-dot feed
125
Egotastic · #C12E0C
Celebuzz m-dot article reader
Article reader
Celebuzz m-dot gallery detail
Gallery detail
Celebuzz m-dot non-blocking ad slot
Non-blocking ad slot

Reader, gallery, and ad layouts came with the skin for free. The ad slot never reflowed the page; on an ad-supported network reading over 3G, that was policy, not polish.

And the rest of the network, same system, real files
Socialite Life m-dot home
Socialite Life
Idolator m-dot home
Idolator
Kim Kardashian m-dot home
Kim Kardashian
Stereogum m-dot home
Stereogum
P!nk m-dot home
P!nk
The Superficial m-dot home
The Superficial
The Frisky m-dot home
The Frisky
Just Jared
OK! Magazine
Hype Machine
Buzznet
Videogum
+ the rest of the 40-plus
The App, Recreated

Operate the thesis.

This is not a screenshot. It is a small live recreation of Spin Play, the SPIN iOS app, running on the same shell logic as everything above: one structure, brand as a variable.

Tap through News, the ranked "20 Best Songs of 2010" tracklist, Reviews, and Photos. Then flip the switcher: the SAME shell becomes Celebuzz, becomes Egotastic. Two variables change, the wordmark and the accent. Nothing else moves. That is the whole company strategy, in your hand.

01Tap the splash to open. Tabs navigate sections.
02In Listen, tap a play button; it flips to a playing state.
03Open a story: heart it, share it, era-style.
04Flip the brand switcher below the phone. Watch what does NOT change.

Rebuilt from the design system's framework components, faithful to the original Spin Play flow and the network's real brand skins.

AT&T 3G11:16 AM
SPINTap to open
SPIN
One shell. Three brands. Two variables.
Range

Phone, browser, tablet.

The same system met readers wherever they were: native iPhone apps, fast mobile web for everyone who just tapped a link, and an image-immersive tablet experience, like the Kim Kardashian iPad app, where a full-bleed photo and a slide-over share panel turned a gossip post into something closer to a magazine spread.

Celebuzz native iPhone app home
Native iPhone app
Celebuzz for iOS: hero carousel, Hot Now, celeb follows
Celebuzz m-dot in mobile Safari
Mobile web, m-dot
The framework in Safari, persistent browser chrome and all
Kim Kardashian immersive celebrity app
Immersive celebrity app
Kim Kardashian for iOS: full-bleed hero, nameplate masthead, tap to the gallery
The Body of Work

Twenty-plus apps and mobile sites, two years.

The receipts. One small team shipped this much because the system let them.

Native iPhone apps
Celebuzz
The Frisky
Socialite Life
The Superficial
PureVolume
SPIN (Spin Play)
Buzznet · build + icon in flight
Go Fug Yourself · in flight
Gorilla Vs Bear · in flight
Mobile web, WAP + m-dot
Celebuzz · built and re-built through several versions
Egotastic
Socialite Life
Idolator, The Superficial, The Frisky · design sets in the files
Kim + Kourtney Kardashian, P!nk, Stereogum · design sets in the files
Each with home, article, gallery, profile, registration, and ad layouts, all on a shared BuzzMedia WAP template designed to roll the same mobile site across the rest of the network's brands.
Shared surfaces + strategy
Mobile landing page
User registration + profiles
Social + commenting
Company Mobile Roadmap + mobile strategy
Advertiser mobile integrations · e.g. a Cadillac branded program
Mobile build platforms · Gumiyo, Polar Mobile
Celebuzz CB! app iconBuzznet app iconThe Frisky app iconGo Fug Yourself app iconSLTSPVSPIN (Spin Play) app icon
Fast and Lean

Small team, whole network, two weeks.

~17
mobile sites stood up
~2wks
to do it, with a lean team
~80%
rough page-load performance gain

The framework was the strategy, and it paid off in speed. With a lean team we stood up something like seventeen mobile sites in about two weeks, and cut page-load times dramatically, roughly an eighty percent performance gain, which for an ad-supported network reading on 3G was not a nicety, it was the business. I owned the mobile initiative end to end, including its P&L.

Figures are Matthew's own stated numbers from the period, presented as his account.

The Transition

And then the network itself got a new name.

BuzzMediaSpinMedia

Midway through, BuzzMedia bought SPIN, the music magazine, and reinvented the whole company around it: BuzzMedia became SpinMedia. I helped carry that transition on the product side so the mobile presence the team had built did not skip a beat when the company above it changed its name.

One system was not only a design template; it was a shared iOS platform. Every brand's app was built on a common core, BuzzmediaBase, so the apps were siblings, not strangers. Bringing SPIN into the family meant a real platform migration: moving the SPIN iOS app (Spin Play) onto that shared codebase, so the new flagship ran on the same foundation as Celebuzz and the rest. That is the payoff of building a platform instead of a pile of apps, when a new brand arrives, you migrate it onto the system rather than start over.

The SPIN app you can tap through earlier on this page is that migrated app, running on the shared platform.

The SPIN acquisition, the iOS platform migration, and the app transition began during Matthew's tenure; the full company rename completed around the end of it.

SPIN redesign · homepage
SPIN redesign · homepage
SPIN redesign · feature
SPIN redesign · feature

My part.

I was Director of Product Management for mobile at BuzzMedia, through its transition to SpinMedia. I led the mobile team and the roadmap across the network's forty-plus brands: the framework, the Celebuzz app, the mobile sites, and the tablet work. The job was to make one system flexible enough to be every brand and disciplined enough to ship fast. Get that right once, and a whole media company goes mobile.

The Daily Buzz studio at Celebuzz, Hollywood
Inside BuzzMedia, Hollywood: the Celebuzz studio, mid-taping.

The lazy way to put forty brands on phones is forty times the work. The right way is to notice they are all the same machine wearing different paint, and build the machine. That was the job, and it is still how I think about scale.

BuzzMediaSpinMedia
Mobile product by Matthew Wardenaar · BuzzMedia / SpinMedia · 2011-2012