Longform Stories

Designing an immersive experience to enhance longform storytelling at Business Insider

Role:

Sr. Designer

Role:

Sr. Designer

Role:

Sr. Designer

Contributions:

UX. UI.

Contributions:

UX. UI.

Contributions:

UX. UI.

Overview

.

Overview

.

Overview

.

Business Insider set out to transform its storytelling by giving editors tools to create richer, more immersive narratives and deepen reader loyalty. The old article template prioritized efficiency but limited longform journalism with a rigid layout and repetitive ad placements. The challenge was to design a flexible, visually rich framework that empowered ambitious storytelling, enhanced immersion, and supported monetization without compromising design integrity.

Example of the existing, standard article template

I designed the Exceptional Storytelling Template, a flagship longform format that launched as a live pilot. The template removed the rigid right rail, introduced immersive layouts, and rethought ad integrations to balance editorial ambition with business needs.

Results

.

Results

.

Results

.

300% increase in scroll depth on Exceptional Storytelling stories compared to standard articles

300% increase in scroll depth on Exceptional Storytelling stories compared to standard articles

300% increase in scroll depth on Exceptional Storytelling stories compared to standard articles

Readers who engaged with these stories were 40% more likely to return than readers of standard content

Readers who engaged with these stories were 40% more likely to return than readers of standard content

Readers who engaged with these stories were 40% more likely to return than readers of standard content

A "game-changing" tool for the newsroom that matched their storytelling ambitions

A "game-changing" tool for the newsroom that matched their storytelling ambitions

A "game-changing" tool for the newsroom that matched their storytelling ambitions

Approach

.

Approach

.

Approach

.

Discovery

Discovery

Discovery

I studied longform experiences from The New York Times, Washington Post, Vox, Vanity Fair, and Vogue. These outlets demonstrated how narrative techniques, scrollytelling animations, and integrated multimedia could heighten impact. The analysis highlighted both best practices and opportunities for BI to carve out a distinct voice.

Competitive analysis

Collaboration with Engineering

Collaboration with Engineering

Collaboration with Engineering

From the outset, I worked hand-in-hand with developers to vet design ideas against feasibility. This partnership ensured animations, media integrations, and custom layouts could be supported within BI’s CMS without introducing excessive production overhead.

Partnering with engineers on new, 2-up image layout

Partnering with engineers on enlarge image functionality

Prototyping and Iteration

Prototyping and Iteration

Prototyping and Iteration

I built Figma prototypes to test narrative flow and partnered with engineering to QA early builds. The initial template launched with a feature story that served as a live pilot, generating direct feedback loops from both readers and editors.

See the complete design: Desktop Mobile

See the complete designs: Mobile

Final template that was used as a pilot for testing

Explorations Beyond the Pilot

Explorations Beyond the Pilot

Explorations Beyond the Pilot

To push the framework further, I designed additional templates—including a scrollytelling version and a number-list format for list-based storytelling. While these concepts were never launched, they showcased the system’s adaptability and laid groundwork for potential future formats.

Scrollytelling exploration

Scrollytelling and list-based storytelling explorations

List-based storytelling exploration

Scrollytelling and list-based storytelling explorations

Outcome

.

Outcome

.

Outcome

.

Rebrand Evolution

Rebrand Evolution

Rebrand Evolution

When Business Insider underwent a major rebrand, the Exceptional Storytelling Template was updated to reflect the new visual identity. The redesign introduced refreshed typography, color, and component styles while preserving the immersive framework. This ensured the template remained both brand-consistent and future-proof.

See the rebrand design: Desktop Mobile

See the rebrand design: Mobile

Reflections

.

Reflections

.

Reflections

.

This project proved the value of piloting bold editorial formats in a controlled, measurable way. By combining competitive insights, technical feasibility, and iterative testing, I delivered a longform storytelling framework that elevated BI’s journalism while also driving clear business impact. The explorations that didn't ship, and the later rebrand adaptation, highlighted the system’s flexibility, ensuring it could continue to evolve alongside the brand.