Sun & Moon Explainer
A connected astronomical experience for The Weather Channel: sun, moon, tides, and stargazing as one system.
Overview
I owned the end-to-end design direction for the Sun & Moon explainer experience on The Weather Channel app. Sun, moon, tides, and stargazing were reframed as one connected astronomical system instead of four isolated modules. The redesign shipped across web, iOS, and Android at 100M+ MAU and turned a data feature most users ignored into something they could understand at a glance and act on.
The challenge
The Weather Channel app already showed sun and moon data: rise/set times, moon phases, illumination percentages, twilight types. Comprehension was low. Users could see the numbers but most had no idea what they meant for their day.
Terms like “waning gibbous”, “civil twilight”, and “illumination percentage” are inherently technical. The existing presentation leaned heavily on raw data and charts that required prior knowledge to interpret. Tides were treated as a separate silo from the moon. Stargazing data wasn't surfaced at all. We were serving science to hundreds of millions of users, and nobody was reading it.
The reframe
Meaning first. Data second.
Instead of leading with charts and raw numbers, every module had to answer three questions before anything else: What is happening? Why does it matter? When is it relevant? The chart stops being the product. The chart becomes the supporting evidence for a sentence anyone can read.
The second half of the reframe: sun, moon, tides, and stargazing aren't four separate features. They're one system, all driven by the same astronomy. Once that landed, the connections became the design.
Key decisions
Charts paired with one human sentence
I redesigned charts to highlight key moments (peaks, transitions, phase changes) while stripping out visual noise. Every chart was paired with a short human-readable explanation. Progressive disclosure let curious users dig deeper without overwhelming casual scanners. Tradeoff: I cut several “astronomy purist” data points (precise altitude angles, specific azimuth degrees) from the default view to keep the explainer scannable. Win: instant readability for someone opening the app for the first time.
Tides as a connected system, not a silo
Tides are directly influenced by the moon's gravitational pull, which makes them part of the same system, not a separate feature. I designed tide visualisations and language as an extension of the moon experience: simple visual cues for high and low, clear timing for planning activities, accessible language replacing oceanographic terms. Tradeoff: tides could have been deeper and more technical for power users (anglers, sailors). Win: coastal users got something they'd actually use, integrated with the moon information they were already reading.
Stargazing as a real use case
Moon phase and illumination directly affect how visible stars and celestial events are. A bright full moon washes out the night sky; a new moon creates ideal conditions. Sunset timing and twilight phases determine when the sky becomes dark enough for observation. I surfaced this prominently: illumination, phase, and timing weren't secondary data, they were the planning signal. Tradeoff: more screen real estate for what looked like a niche use case. Win: the experience broadened from daily utility into curiosity and passion use cases without adding feature bloat.
No-data states that still teach
Astronomical data is often incomplete. Gaps in coverage, seasonal unavailability, location-specific quirks. Rather than blank modules or generic error messages, I designed fallback states with educational placeholders that still provided value. No dead ends, no broken trust. Tradeoff: more states to design and maintain. Win: the experience never felt broken even when the data was.
Modular patterns across platforms and tablets
The system needed to flex across geographies, seasonal variations, varying data availability, and mobile and tablet layouts. I built modular patterns that adapted while staying visually consistent. Tablet got special attention: split-view map and explainer combinations, better chart visibility, and reading layouts designed for the medium rather than stretched from mobile.
Impact
Shipped across The Weather Channel's web, iOS, and Android at 100M+ MAU.
Clearer educational framing turned raw data into something users could act on.
Tides surfaced as part of a connected astronomical system rather than an isolated silo.
Stargazing emerged as a new use case for the app without adding feature bloat.
Resilient experiences during data gaps. No more blank screens or broken states.
A reusable explainer pattern (chart + human sentence + progressive disclosure) extended to other weather features.
Stronger alignment with TWC's consumer-scale design standards across the broader product.
Reflection
Good weather design isn't about accuracy alone. It's about translation. Users don't want raw science. They want meaning. Whether the moon will be bright enough for an evening run, when golden hour starts for a photo, whether tonight is good for stargazing, when the tide will be right for a morning walk on the beach.
The strongest signal of senior thinking on this project wasn't any single screen. It was seeing sun, moon, tides, and stargazing as one connected system instead of four separate features. That systems lens is what turned a data module nobody read into something people actually used.