Bill & Melinda Gates Annual Letter

Responsive 2015 annual-letter work combining modular storytelling, interactive editorial patterns, data-visualization research, and handoff-ready prototypes.

  • RoleUX Designer
  • Timeline2015
  • ScopeEditorial UX / Storytelling / Navigation
  • Editorial UX
  • Storytelling
  • Navigation
  • Axure
  • Responsive Design
  • D3.js
  • Highcharts
Bill & Melinda Gates Annual Newsletter campaign highlight hero image.
Previous caseNext case

Overview

Brief

Research digital storytelling patterns and build the 2015 Gates annual-letter experience with responsive modules, interactive chart thinking, and a clear editorial rhythm.

Role
UX Designer
Constraint
The annual-letter system needed to communicate complex global stories across devices before final content was fully available, without overpowering the GatesNotes framework.
Outcome
Created a responsive storytelling framework and prototype-led component direction for the 2015 annual-letter experience.

Project context

my role

UX Designer

client

Bill & Melinda Gates Foundation

team

  • 1 Creative Director
  • 2 UX Designers (incl. me)
  • 2 PMs
  • 4 Devs

tools used

Research Design Strategy User Experience Navigation Animation Wireframing Prototyping

platform

Cross-platform product experience

FEATURED EVIDENCE

Highlights

A quick scan of the moments that best explain the problem, the pivot, and the payoff.

Why it mattered

Story

Hypothesis

A modular storytelling system with reusable content patterns would support videos, quotes, galleries, interactives, and CTAs without competing with primary navigation.

Insights

Technology and pattern research covered responsive storytelling, secondary navigation, and reusable modules for video, pull quotes, galleries, polls, calls to action, citations, and interactive charts.

CASE STORY

Flows

Each lane isolates the clearest evidence so reviewers can scan the work in order.

01

Research · Inputs, audits, discovery

Discovery · Research

2 frames

02

Outcome · What changed

Final Delivery

3 shown · +1 more

CASE EVIDENCE

Deliverables

Research2Outcome5

RESEARCH

Discovery · Research

2 assets flow

OUTCOME

Final Delivery

5 assets flow

How it moved

Decision points

  1. Direction Chosen path and rationale

    Prototype a modular editorial system with responsive page patterns, component ideas, and interactive-chart research that could support developer handoff.

  2. Validation Testing and refinement

    Weekly reviews with creative direction, PM, design, and development partners plus daily prototyping check-ins kept the annual-letter system aligned.

  3. Engineering Handoff, specs, implementation

    Moodboards, wireframes, Axure prototypes, technology research, component documentation, and responsive page patterns supported developer handoff.

Resulting shift

What changed

  • Secondary navigation that stayed subordinate to GatesNotes
  • Responsive patterns for video, galleries, quotes, polls, CTAs, and citations
  • Interactive chart and component research using HTML5, CSS3, D3.js, and Highcharts
  • Axure prototype and component thinking for handoff

Tools

Tools used on project

The working set used to research, prototype, align, and ship this case.

  • Keynote
  • Photoshop
  • Axure RP
  • HTML
  • CSS
  • JavaScript
  • D3.js
  • Highcharts
  • Microsoft Office

See it in Action

A quick walkthrough of the decision path, interface behavior, and delivery proof behind Bill & Melinda Gates Annual Letter.

Open in YouTube

Captions and speed controls remain available in-player for fast review.

AT&T International Roaming RedesignNext caseMicrosoft Office 365 Executive Vision

Worked with the following clients