Redesigning the sun bar: six variants to make a chart tell the truth

FOMO Sun's core chart is a horizontal bar that answers one question: how much sun is where you are today, and is somewhere else meaningfully better?

For most of 1.2 this chart worked, in the sense that it showed the data. But it didn't read clearly. If you looked at it fresh you had to do arithmetic: 4¾ h for Basel, 8¼ h for Interlaken, subtract in your head, decide whether that difference was worth an hour in the car. The product was asking you to think like the recommendation engine.

1.3 changes that. Here's what we tried, what stuck, and what didn't.

The starting state

Two horizontal pill-shaped bars, one per city, coloured by sun condition hour-by-hour. Labels inside the bars. Sun-hours as a number at the right end of each bar. A little car icon marking travel time as a faint overlay on the origin bar. Duplicate time rows below — numeric ticks and clock times. An amber dashed line between the bars trying to connect “where you left” to “where you arrive.”

Complaints, all true:

• The two “4¾ h” and “8¼ h” numbers weren't at the same vertical position, so side-by-side comparison required eye movement.
• The delta — the whole point — was nowhere on the screen. You had to compute it.
• Where does the day start and end? The bar used all 24 hours without explicit day markers.
• The travel overlay was so subtle it read as “nothing” at a glance.
• Two time-axis rows below the bars. Why?

Six variants, one survivor

I spun up a /lab/timeline sandbox and built six designs on top of the same scenario — Basel → Interlaken, car at dawn, 4¾ h vs 8¼ h of sun — so I could compare them side-by-side without data differences muddying the read.

A — night edges. Each bar extends ~1.75 hours before sunrise and after sunset; that pre/post area renders as a dark slate band. Naturally anchors “this is where daylight begins.” Wins vs. the baseline.

B — labels on the left. City names pulled out of the bar and into a left column. Tight vertical stack, two bars nearly touching. Strong comparison read. Loses when city names are long (“Wengen Panorama” truncates on mobile).

C — solar halo. Gradient fade at the bar edges hinting at sunrise/sunset colours. Subtle to the point of invisibility once yellow segments are there. Rejected.

D — name in the dark chip. Put the name back inside the bar, specifically overlaid on the night band. Nice idea, but the band isn't always wide enough for long names.

v3, the survivor. Combines A's anchoring with small but meaningful changes:

• The delta — the whole point — is right there, as plain green text, directly after the sun-hours figure: 8¼ h ↑ +3½ h. No ornament, no pill, nothing to ignore.
• Sun-hours sit next to the city name, not floating at the end of the bar. Reads left-to-right as a sentence: “Basel has 4¾ h. Interlaken has 8¼ h, that's three and a half hours more.”
• Travel slab is translucent with white diagonal stripes, so the sun segments behind it stay visible. Car icon got bigger and bolder.
• A small green dot marks the arrival point on the destination bar. Hover it for the arrive-time tooltip. Replaces the old dashed connector between bars that was pulling attention.
• One axis row, not two.

v4, v5, v6 are in the queue. A sun-gain underline (v4) would highlight exactly when destination is sunny and origin isn't. Segment aggregation (v5) merges sub-7% blocks for less visual noise. A prominent arrival anchor (v6) makes the travel → arrive → sun narrative louder still. They'll roll in one at a time as live data reveals which problem each one solves.

What I learned

Comparison charts stand or fall on one thing: vertical baseline alignment. If the numbers you want the user to compare are at different y-positions, they're not comparing — they're reading in sequence. Moving the sun-hours to sit next to the city name (left-aligned, stacked at identical y) is the smallest change with the biggest effect.

Tooltips beat captions when the tooltip is optional. “Leave by 05:30 · arrive with sun up” lived as a caption under the bar through every variant until v3 removed it. It's now in the hero paragraph above (bolded inside a real sentence) and in a tooltip on the car icon. The bar got shorter. Nothing was lost.

Show the delta as text, not a chip. A green pill says “this is important.” Plain green text that matches the surrounding type says “this is the answer.” The second feels less like a marketing claim.

Designing against your own app is hard. I live in this app. I read “4¾ h” and instantly knew not to bother going anywhere today. I had to build the lab and force myself to read the baseline chart cold — the way a first-time visitor would — to see how much arithmetic was actually being offloaded to the user.

The lab is still in the codebase at /lab/timeline. Six variants side-by-side are a surprisingly good tour through how much small layout choices change what a chart communicates.

Next: watch the lab as spring arrives, sun windows lengthen past 15 hours, and every design assumption I made during fog season gets reality-tested.