Sun & Moon Explainer
Designing a connected astronomical experience — sun, moon, tides, and stargazing — at scale
Situation
The Weather Channel app already showed sun and moon data — rise/set times, moon phases, illumination percentages, twilight types — but comprehension was low. Users could see the numbers, but most had no idea what they actually 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. Charts showed information, but they didn't deliver understanding.
Beyond daily utility, the module also touched tide data and stargazing scenarios — both directly influenced by lunar cycles — but these connections were invisible to users. Tides were treated as a separate silo, and moon phase data wasn't surfaced in a way that helped anyone plan a night under the stars.
We were serving data to hundreds of millions of monthly users — but not helping them make sense of it, act on it, or see how it all connected.
Task
As the Senior Product Designer embedded with the IBM/TWC team, I owned the end-to-end design direction for the Sun & Moon explainer experience. The brief was deceptively simple: make complex astronomical data easier to understand for everyday users — without dumbing down the science or breaking design system consistency across platforms.
That meant balancing multiple things at once: improving comprehension of sun and moon data, surfacing the connection between lunar cycles and tides, supporting stargazing and night-sky planning use cases, creating reusable explainer patterns, designing resilient states for missing or partial data, and fitting everything within an established design system at consumer scale.
Action
Meaning first, data second
I reframed the entire content approach. Instead of leading with charts and raw numbers, every module started by answering three questions: What is happening? Why does it matter? When is it relevant? This led to structured explainer sections paired with visualisations, rather than standalone graphs that users had to decode on their own.
Chart legibility overhaul
I redesigned charts to highlight key moments — peaks, transitions, phase changes — while stripping out visual noise. Progressive disclosure let curious users dig deeper without overwhelming casual scanners. Every chart was paired with a short human-readable explanation. The goal: instant readability, even for someone opening the app for the first time.
Tides as a connected system
Tides are directly influenced by the moon's gravitational pull, making them a natural extension of the Sun & Moon experience — not a separate feature. Rather than treating tides as an isolated module, I designed them as part of a connected astronomical system. Simple visual cues for high and low tides, clear timing for planning activities, and accessible language replaced overly technical oceanographic terms. This was especially relevant for coastal users who rely on tide timing for recreation, fishing, or boating. By integrating tides into the broader system, the experience became more holistic and educational.
Stargazing and night-sky planning
Moon phase and illumination directly affect how visible stars and celestial events are. A bright full moon can wash out the night sky, while a new moon creates ideal conditions for stargazing. Sunset timing and twilight phases determine when the sky becomes dark enough for observation. I ensured this information was surfaced prominently — illumination, phase, and timing weren't treated as secondary data but as meaningful signals. Users could identify low-illumination nights, plan stargazing sessions, and understand when the sky would be darkest. This broadened the value of the feature from daily utility into curiosity-driven and passion use cases, without adding complexity.
No-data states that still teach
Weather and astronomical data is often incomplete — gaps in coverage, seasonal unavailability, location-specific quirks. Rather than showing blank modules or generic error messages, I designed fallback states with educational placeholders that still provided value. No dead ends, no broken trust.
Modular, scalable patterns
The system needed to flex across geographies, seasonal variations, varying data availability, and mobile and tablet layouts. I built modular patterns that could adapt while remaining visually consistent. Tablet layouts got special attention — split-view map and explainer combinations, better chart visibility, and reading layouts designed for the medium rather than just stretched from mobile.
Cross-functional alignment
I worked closely with engineers on data constraints and chart rendering logic, with product on scope and prioritisation, and with the core IBM/TWC design team to maintain system standards. I also acted as the quality gate — every piece of shipped work had to meet TWC's visual and UX bar before it went live.
Result
The redesigned Sun & Moon experience shipped across The Weather Channel's web, iOS, and Android platforms — reaching hundreds of millions of users.
- Clearer educational framing that turned raw data into something users could actually act on
- Improved design consistency across sun, moon, and tide modules
- Resilient experiences during data gaps — no more blank screens or broken states
- Expanded value for stargazing and curiosity-driven users without adding feature bloat
- Tides surfaced as part of a connected astronomical system rather than an isolated silo
- Stronger alignment with TWC's consumer-scale design standards
- A reusable explainer pattern that could be applied to other weather features
Reflection
This project reinforced something I keep coming back to: good weather design isn't about accuracy alone — it's about translation. Users don't want raw science. They want meaning. They want to glance at a screen and know whether the moon will be bright enough to light their evening run, when golden hour starts for a photo, whether tonight is good for stargazing, or when the tide will be right for a morning walk on the beach.
The strongest signal of senior thinking here wasn't any single screen — it was seeing the connections between sun, moon, tides, and stargazing as one system instead of four separate features. That systems lens is what turned a data module into something people actually used and understood.