Code and Theory’s partnership with Josh Topolsky began in 2009 with the launch of Engadget, and has grown over the last decade, having launched The Verge, Bloomberg News, Bloomberg Politics, and The Outline, Bustle Media Group’s groundbreaking publication.
As Editor-in-Chief of BDG, Topolsky came to us with a new vision: launch new digital property Input, and relaunch the iconic digital sites for Nylon and Bustle, and Inverse, a science entertainment destination. The challenge? How do we both stand out in a sea of sameness (most sites follow the same formula: image, headline, dek, and paragraphs of text) and drive monetization during a time of rapidly declining ad sales. We knew we had to create experiences that connected with consumers in unique and innovative ways. That’s how we’d drive value and loyalty.
Having created a completely unique card system for The Outline, we deeply embedded ourselves with the BDG team to reimagine the rules of the card system. We wanted every post on the site to be a fully art-directed digital card that offers a variety of formats. Headlines might be bullet-pointed arguments, evocative phrases, interactive visuals, data visualizations, or pull-quotes. Some headlines are designed to tell a complete story; some are used to frame a long-form essay. The formats (e.g. how some pieces resemble click-through “IG stories”) very much mirror how today’s consumer (particularly the younger generations) interact with information on mobile. This was the key to developing long-lasting relationships with readers and monetizing the publications.
To reach users faster and more efficiently, the sites’ navigation structure is centered around the feed, or the stream — an infinite scroll of cards that represents a story. In a world where scrolling through feeds is second-nature, we designed the three properties without traditional homepages. Upon landing on all four sites, readers see an infinite scroll of stories. Each story offers a snippet: the headline, maybe a quote, or a key stat, along with some information. The reader can then expand that story in the feed to read more, or continue scrolling. Everything is designed to be interactive, bringing the reader into the unique world of each publication.
Accordingly, the look and feel of the four experiences were design-driven and visually arresting. For Input, we were inspired by the old-school Risograph idea with vibrant, colorful, paint-like vibes, but introducing modern CSS image effects and big, bold typography.
For Inverse the concept leaned into the namesake of the site– actually inverting the visual mood for a darker, cinematic treatment to serve the more scientific, theory-driven content. The color story was sharper, with more contrast, and compositions utilized gradients and hard shadows to dial up the drama.
Our design for Nylon brings to life grungy textures, graphical references like a music festival poster, hand-written graphics, and bold energetic typography. The grid and scale of elements reflects the slower publishing pace with large imagery and expressive type.
The primary audience for Bustle is the smart, witty, intelligent woman. The design features bold and clean typography with clear hierarchy and big moments to show off original photography. The color palette is warm, clea, and mature–with circular, graphic elements and postage stamp motifs bringing out the witty personality of the site.
