Anatomy of a Breakout

An interactive editorial study of The Weeknd’s career from 2011 to 2015, exploring how dated events and numerical observations can support a career narrative.

My contribution · direction & review

I proposed the project’s ideas and direction, reviewed outputs, identified issues and gave feedback on visual presentation. AI tools were used for programming and implementation.

The design problem 01

A release timeline and a growth chart offer different ways to present an artist’s career. This project explores how to build a narrative without implying a continuous measured trajectory where comparable historical data is unavailable.

Dated events structure the narrative, with a separate layer for numerical observations and their sources. The guiding question is what had become publicly observable at each point in the timeline.

Opening screen of the Anatomy of a Breakout case study
Fig. 1 — Opening screen. The study covers 2011–2015 and is framed as a personal research and design project, not as an official or commissioned work.

An editorial system 02

Charcoal, blue-black and deep red establish a restrained campaign identity; warm cream is reserved for type and fine rules. Instrument Serif supplies headlines, a neutral grotesk carries the reading text, and a mono face distinguishes dates, units and controls.

The interface moves through discovery, acceleration, an event-spaced timeline, a chart-topping milestone and subsequent career developments. Consistent navigation is intended to help readers follow these sections.

Interactive timeline screen with phase rail and dated events
Fig. 2 — The timeline is explicitly event-spaced, not time-proportional. The phase rail lets a reader drag, jump by year, select events or return to discovery.

Evidence that arrives in time 03

The reconciled master supplies 16 events. A separate evidence layer holds 13 numerical observations backed by nine source records, and every event keeps its source links attached to the corresponding narrative.

The interface distinguishes venue capacity from attendance, reported streaming activity from Spotify-specific listening, and album-equivalent units from pure sales.

The interface uses report dates to determine when numerical observations become visible, so first-week results appear after the release date. Two early observations rely on a searchable contemporary excerpt; the cards note that the full article was not retrieved.

Evidence cards showing numerical observations with source records
Fig. 3 — Evidence cards displaying observations alongside their sources, report dates and units.

The anchor 04

10 August 2015 — the first reported Hot 100 No. 1 for Can’t Feel My Face — is the chosen editorial moment. The interface shifts to deep red and reveals a single large #1. DAY 1604 ties that moment back to the start of the study, so the distance travelled is legible without a chart.

The acceleration graphic is labelled as a schematic rather than a measured curve. This distinguishes the visual interpretation from the numerical evidence.

The breakout moment screen with a large number one and day count
Fig. 4 — The breakout screen. Later events are labelled “after the breakout” to distinguish them from the selected editorial milestone.

Editorial choices 05

Presentation choices and their limits
Choice in the projectPurposeLimit to preserve
Use a chart milestone as the narrative anchorProvide a dated reference point that the interface can express.The selected milestone is an editorial definition, not a complete explanation of the artist’s success.
Space the timeline by eventGive each event room for its narrative and source material.Equal visual spacing does not represent equal elapsed time.
Reveal observations by report dateKeep later knowledge separate from what was available at an earlier point.Publication dates and event dates answer different questions.

A further evaluation would ask readers to distinguish documented observations from editorial interpretation after navigating the study. This has not yet been tested with readers.

Follow-up evidence and its limits 06

A second No. 1, a No. 1 album and Grammy recognition support different kinds of follow-up evidence. None of them supplies listener cohorts, so the final section labels 30/60/90-day retention NOT MEASURED.

Historical Google Trends and YouTube series were not included because a reproducible dataset at the intended scope was not obtained. These gaps remain distinct from measured values of zero.

Delivery and validation 07

The October 2026 project record describes a standalone HTML/CSS/JavaScript build with local fonts and embedded data, suitable for opening from disk or serving on static hosting. It records desktop, tablet and mobile layout checks, together with twelve automated checks covering date boundaries, missing data, repeated navigation and export consistency. These are results for that recorded version.

Mobile layout of the case study
Fig. 5 — Mobile layout. Reduced-motion styling preserves the same information without animation.

Scope

  • A portfolio prototype. The scope does not include a complete historical platform dataset, cohort-retention analysis or a production deployment.
  • The source record describes the hero photograph as material for private local presentation, with source and credit recorded. It does not establish a licence for public reuse.
  • No user-study results or product-impact metrics are claimed.