← Live page How we work — 10 layouts All tests
01

Ruled ledger

Three full-width rows divided by hairlines, the numeral in its own column and the copy holding a 46ch measure. No panels, no fills — the section is typography and rules, which is the cheapest way to look deliberate on a white ground.

How we work

  1. 01

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. 02

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 03

    Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

02

Oversized numerals, copy hung beside

The numeral becomes the illustration — set at display size and cropped tight to its own line, with the step hung off its right shoulder. Most graphic of the ten and the only one where the sequence is legible from across the room.

How we work

  1. 1

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. 2

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 3

    Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

03

Connected path

A horizontal rail with three nodes joined by a line, so the causal chain — equip, host, change — is the visual. The strongest option if the point is that step three depends on step one.

How we work

  1. 01

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host conversations with their peers.

  2. 02

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 03

    Change school culture

    When students feel seen and empowered to connect, they change their school culture to one of belonging.

04

Stair step

Each step sits lower and further right than the last, so the layout itself climbs. Reads as progress without needing an arrow or a line; falls back to a plain stack below 900px where there's no room to stagger.

How we work

  1. 01

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. 02

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 03

    Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

05

Heading holds the left column

"How we work" sits in a sticky left column while the three steps scroll past it on the right. The section title stays with the content it labels, which is worth more the longer the section runs.

How we work

Three moves, one season, one school at a time.

  1. 01

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. 02

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 03

    Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

06

One sentence, three clauses

The steps written as a single running sentence at display size, each clause carrying a small numeral above it. Least diagrammatic option here — it argues rather than lists, and it takes the least vertical space of the ten.

How we work

01We equip 9-12 student leaders at every school, 02they host weekly gatherings across a 40-day season, 03and the culture of the school changes to one of belonging.

Adult volunteers train the leaders; the plug-and-play card deck model runs the gatherings.

07

Dial

Three spokes on a wheel: pick a step and the wheel turns it upright. The only option that shows the three as a cycle rather than a finish line — a season ends and the next one starts. Needs script, and it is the least mobile-friendly of the ten.

How we work

08

Full-bleed bands

Each step is an edge-to-edge band with the numeral set in the margin, so the section breaks the page grid instead of sitting inside it. Gives the three steps the weight of three chapters — probably too much weight for a middle-of-page section.

01

Equip student leaders

Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

02

Host weekly gatherings

Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

03

Change school culture

When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

09

Count-in on scroll

The steps arrive dim and light as each one crosses the middle of the screen, with a rule drawing down the left to mark how far through you are. Scroll does the pacing — nothing to click, and it reads the same on a phone.

How we work

  1. 01

    Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. 02

    Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. 03

    Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

10

One panel, three states

Three numerals act as the control and a single panel crossfades between the steps. Takes a third of the height of the other options, at the cost of only ever showing one step at a time — the trade the carousels make, without the hidden right edge.

How we work

Equip student leaders

Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

Host weekly gatherings

Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

Change school culture

When students feel seen and empowered to connect with others, they change their school culture to one of belonging.

11

Archive — the shipped three cards

What the live page carries today: three equal tinted cards side by side, numeral above the step name. Kept for comparison, using the live page's own styles.

How we work

  1. Equip student leaders

    Adult volunteers provide 9-12 student leaders at each school with training and tools to host fun and fulfilling conversations with their peers.

  2. Host weekly gatherings

    Student leaders facilitate gatherings over a 40-day season using our plug-and-play card deck model.

  3. Change school culture

    When students feel seen and empowered to connect with others, they change their school culture to one of belonging.