Frame

Reinventing a digital publication's product for scalability and engagement

Article cover
Article screen 2
Article screen 3
Article screen 4

brief

As a startup journalism publication, Frame was producing innovative multimedia concepts, but didn’t have a scalable product.

The challenge was to maintain their identity and product principles while creating a scalable solution.

My Contribution
Led a product redesign through research with the founders, their audience, and into the journalism landscape.

Outcome
Bridging software solutions with a brand refresh and a new UX, we created a Webby-winning article form that gained 20% engagement and reached an audience of 1.5+ million readers globally.

Role:
Design Lead

Functions:
Product Strategy, UX Research, Product Design, Journalism

Duration:
18 months

Project Link

Frame User Controls Demo overlay
Frame First Page Demo overlay

Example articles that Frame was previously producing - both animated videos hosted on the web, spawning a few issues:

Not Web Native

As .mp4 files, the articles weren’t screen-reader friendly, lacked SEO optimization, had accessibility issues, and lacked interactivity.

Unresponsive Design

On desktop they could only render at the video’s size, meaning they were just portrait-videos centered on screen.

Resource Intensive

Each video had to be hand-edited by a motion designer, slowing down the production process and preventing journalists from making edits directly.

Challenge

Maintain Frame's core principles while reinventing its product to be both scalable and web friendly.

Goal

Help Frame launch a refreshed publication bringing to life their editorial vision.

Four directions for research:

Frame

Problems they faced, impacts they sought to make, and resources available to the team

Frame’s readers

Values they found in Frame’s existing editorial style and product.

Journalism landscape

Challenges facing publications and where opportunities for innovation existed

Readership trends

Stats, trends, and anecdotes into where, why, and how news was or wasn’t being read
User research insights

Readers were most drawn to Frame's visual storytelling, while noting that news often felt overwhelming or discouraging.

Journalists, meanwhile, looked for more expressive forms of storytelling to engage readers.

Artifact 1 - Early workshop insights

Artifacts from early workshops focusing on Frame's position in the journalism landscape and the founders' vision for growth.

Prioritizing multimedia forms and interactivity, the team sought to develop its own innovations in journalism and technology.

Secondary research highlights:

Reuters 2023 Digital News Report:

  • 63% of news readers aged 18-24 prefer to read their news, compared to 18% who prefer to watch
  • 56% used a smartphone for news in the last week in 2022, up from 31% in 2013.
  • 38% of news readers sometimes or often actively avoid the news, up from 29% in 2017.

"News-avoiders describe news as unpleasant, untrustworthy, and inaccessible."

Avoiding the News: Reluctant Audiences for Journalism

A few patterns emerged across Frame, its readers, and the wider news ecosystem:

  1. Readers wanted visual and mobile-first formats, yet still preferring reading to watching
  2. Frame wanted to be innovative, and could build its own software solutions
  3. Systemic issues in journalism persisted, and while they might not be solved, they shaped the intentions behind our design

Takeaways:

Emphasize multimedia

Frame previously used one typeface and lacked a consistent palette. Through a brand redesign, we established a system with three types, unifying styles across different news series.

Retain Frame’s dynamic and visual style, while refreshing it to become more familiar.

Rethink pages

Prioritize mobile, but not at the expense of desktop.

Leveraging what digital devices do best - layering visuals, motion, and interaction - create an engaging reading environment that adds context without spiking reading times.

Progressive disclosure, applied to text.

Address concerns from newsreaders

Readers described news as "unpleasant, untrustworthy, and inaccessible" — symptoms of a wider disconnect between readers and journalism.

We looked to build an approach combining human-centered storytelling with artful, expressive design to make difficult stories more resonant.

Interactivity became a bridge: keeping experiences concise while offering readers context that made stories feel clearer, more transparent, and easier to follow.

Balancing the above, we built and tested prototypes, refreshed Frame's branding, and developed two connected web apps: one for readers to view articles, and the other for journalists to create them.

Frame's article:

Frame Darien Demo overlay

In four different serialized verticals:

Stock

Human stories, reported from the source.

Stock vertical example

Dispatches

Human stories, reported from the source.

Dispatches vertical example

Currents

Culture, punchy and topical.

Currents vertical example

Flashpoint

Historical, revealing, gritty.

Flashpoint vertical example

Responsive across screen sizes:

Chinatown article view 1
Chinatown article view 2
Chinatown article view 3
Chinatown article view detour
Chinatown article view 4
Chinatown article view 5
Chinatown article view 6
Chinatown article view 7
Chinatown article view 8
Chinatown article view 9
Chinatown article view 10
Chinatown article view 11
Chinatown article view 12
Chinatown article view 13
Phone overlay
Browser chrome bar
Chinatown desktop view 1
Chinatown desktop view 2
Chinatown desktop view 3
Chinatown desktop detour view
Chinatown desktop view 4
Chinatown desktop view 5
Chinatown desktop view 6
Chinatown desktop view 7
Chinatown desktop view 8
Chinatown desktop view 9

Using "Detours" as a core interactive feature:

Created to allow readers to access supplemental context without losing their place in the main narrative, while keeping reading times low.

See how a journalist used one here  ➡️ ⬇️

Post-launch, we continued improving both applications, and my work increasingly took the form of designing the articles, producing and animating assets for them, and a range of editorial operations in collaboration with fellow journalists.

All of Frame's articles can be read here.

outcome

Reader Engagement: +20% compared to the industry standard, measured by time in article and completion percentage

Audience: 1.5+ Million readers globally

And we won a Webby in News and Politics for our work!

The product solved the web-native concerns and preserved a visually expressive format, but it wasn’t as interactive as envisioned and relied on still-developing software. Features for greater interactivity, animation, and efficiency were roadmapped but not yet implemented.