Vol. I · 2014 — 2017

Independent Journal Review

Product design · Washington, D.C.
The IJR home page, September 2017
Home, September 2017 — Hurricane Irma week. Latest · Trending · Highest · Most Commented; “Join IJR” in the rail; the red bar is reserved for breaking news.
Role
UX Director
Years
2014 — 2017
Team
IJR product + editorial
Scope
Web, iOS, design system, community

Overview

IJR was a fast-growing news site with a newsroom that published faster than its design could keep up. I worked on it for three years: first as concepts that pushed how a story page could feel, then as a brand, and finally as the 2017 redesign — a full system covering reading, topics, community, accounts and the company itself, on desktop and mobile.

Three years, five front pages.

The home page is the whole argument for a news site, so every year got a new one. Left to right: the dark magazine concept, the iPad reading concept, the green Independent Journal brand, the developer build, and the 2017 system.

Dark magazine concept, June 2014
Dark magazine concept, June 2014
The iPad reading concept
The iPad reading concept
Independent Journal — green brand
Independent Journal — green brand
The developer build
The developer build
2017 — Old Town
2017 — Old Town
01 / 05

The 2017 system

One site, 54 screens.

Not a homepage refresh — the whole publisher. Reading, topics, community, your account, and the company pages, each designed as part of one system with one type scale, one grid and one accent. The map below is the actual site map; scrolling walks it branch by branch.

Read

Topics

Community

You

Company

every thumbnail is a real screen · click → lightbox

54 screens in five branches.

When the story is bigger than an article.

Hurricane Maria, the Mexico City earthquake, North Korea: hubs with a dark masthead, a live timeline, a map and a way to help. Three of them, one template.

Hurricane Maria
Hurricane Maria
Mexico City Earthquake
Mexico City Earthquake
North Korea
North Korea
01 / 03

A thread you can actually read.

Yellow is the thread’s only colour, and it means “you”: the reply you’re writing, the comment you left, the presence of someone typing. Replies stay one level deep. Sorting is by top, not by loudest.

A comment thread on the phone: the reply being written is marked in yellow
The comment flow on desktop, every state on one sheet

Three ways to say “curated.”

The Edit was the editors’ daily pick. Three explorations of the same page — a portrait, a double exposure, a colour field — with the list that never changed.

The double exposureThe portraitThe colour field
variants

Old Town UI.

The 2017 site shipped with its own system. BentonSans, a 12-column grid, nine colours, three depths and an 80-symbol library built atoms → molecules → organisms. Gold meant you. Red meant now.

Primary

Dark Gray#222632

Grays

Mid Gray#9DA9B5

 

Light Gray#D2DAE3

 

BG Gray#F2F4F7

Accents

Gold#FFB700

 

Highlight Yellow#FFD487

Faction palette

Declaration Red#FF5D50

 

Response Blue#2CBAED

 

Breaking News#FF0000 → #FF6438

Type · BentonSans

  1. The front page.H1 · Bold · 38 / 50
  2. Maria, hour by hourH2 · Bold · 30 / 39
  3. Why the comments moved to the sideH3 · Medium · 20 / 26
  4. Trending nowH4 · Medium · 14 / 18
  5. Fifty-four screens, one grid, one voice.Body · Regular · 18 / 24
  6. “Yellow means you. Red means now.”Pull quote · Italic · 18 / 24
  7. By Jordan Flaig · 4 min readLabel 1 · Regular · 14 / 19
  8. Updated 12 minutes agoLabel 2 · Regular · 12 / 16
  9. BREAKINGLabel 3 · Bold · 12 / 16
  10. Read next →Label 4 · Regular · 16 / 21

Grid

1200 px · 12 col · 20 px gutter · 80 px margin

Depth

shadow-1 0 / 12 / 34 7%
shadow-2 0 / 19 / 45 12%
shadow-3 0 / 19 / 45 23%

Library · 80 symbols

53atoms
10molecules
17organisms

in-text link #46AEFF · hover #0092DD · bipartisan gradient #FF0000 → #4F00EB