/ Yahoo Weather
Photo treatment
Icon design
Onboarding
iOS
Yahoo / Senior Product Designer / Sep – Nov, 2021
Yahoo Weather felt dated. Photos were already there but weren't doing much, just backgrounds with drop shadows behind every label. No system for handling light images versus dark ones. Weather is one of the few utility apps with an emotional layer. This one wasn't using it.
Three of us. Me as design lead and sole designer, two engineers. No additional budget. Occasional check-ins with Yahoo's design director, otherwise heads-down.
/ Yahoo Weather
Photo treatment
Icon design
Onboarding
iOS
Yahoo / Senior Product Designer / Sep – Nov, 2021
Yahoo Weather felt dated. Photos were already there but weren't doing much, just backgrounds with drop shadows behind every label. No system for handling light images versus dark ones. Weather is one of the few utility apps with an emotional layer. This one wasn't using it.
Three of us. Me as design lead and sole designer, two engineers. No additional budget. Occasional check-ins with Yahoo's design director, otherwise heads-down.
/ Yahoo Weather
Photo treatment
Icon design
Onboarding
iOS
Yahoo / Senior Product Designer / Sep – Nov, 2021
Yahoo Weather felt dated. Photos were already there but weren't doing much, just backgrounds with drop shadows behind every label. No system for handling light images versus dark ones. Weather is one of the few utility apps with an emotional layer. This one wasn't using it.
Three of us. Me as design lead and sole designer, two engineers. No additional budget. Occasional check-ins with Yahoo's design director, otherwise heads-down.
/ Yahoo Weather
Photo treatment
Icon design
Onboarding
iOS
Yahoo / Senior Product Designer / Sep – Nov, 2021
Yahoo Weather felt dated. Photos were already there but weren't doing much, just backgrounds with drop shadows behind every label. No system for handling light images versus dark ones. Weather is one of the few utility apps with an emotional layer. This one wasn't using it.
Three of us. Me as design lead and sole designer, two engineers. No additional budget. Occasional check-ins with Yahoo's design director, otherwise heads-down.
Photos as the foundation
Flickr had tens of thousands of photos tagged to weather conditions, and Yahoo owned Flickr at the time. Instead of treating photos as decoration, we built the system around them. Where density allowed, the app pulled from images within 10 to 100 miles of the user. The forecast bars below were relative, the day's low setting the baseline and the high setting the top, so the shape of the day read at a glance.
Photos as the foundation
Flickr had tens of thousands of photos tagged to weather conditions, and Yahoo owned Flickr at the time. Instead of treating photos as decoration, we built the system around them. Where density allowed, the app pulled from images within 10 to 100 miles of the user. The forecast bars below were relative, the day's low setting the baseline and the high setting the top, so the shape of the day read at a glance.
Photos as the foundation
Flickr had tens of thousands of photos tagged to weather conditions, and Yahoo owned Flickr at the time. Instead of treating photos as decoration, we built the system around them. Where density allowed, the app pulled from images within 10 to 100 miles of the user. The forecast bars below were relative, the day's low setting the baseline and the high setting the top, so the shape of the day read at a glance.
Photos as the foundation
Flickr had tens of thousands of photos tagged to weather conditions, and Yahoo owned Flickr at the time. Instead of treating photos as decoration, we built the system around them. Where density allowed, the app pulled from images within 10 to 100 miles of the user. The forecast bars below were relative, the day's low setting the baseline and the high setting the top, so the shape of the day read at a glance.
A scrim system that works at scale
Text legibility is the hard part of photo-first design. We solved it by treating the photo and the UI as one system. Photos were filtered so their lower half was either light enough or dark enough, no mid-tones. A light UI sat over dark photos with a gradient scrim between them. A dark UI sat over light photos the same way. The rule was invisible to the user. The app just always read.
To get the overlay effect to work in a natural way required selecting only photos that were very dark or very light on the lower half. On scroll, a darker scrim and blur would fade in, focusing on content, keeping some of the photo's flavor.
A scrim system that works at scale
Text legibility is the hard part of photo-first design. We solved it by treating the photo and the UI as one system. Photos were filtered so their lower half was either light enough or dark enough, no mid-tones. A light UI sat over dark photos with a gradient scrim between them. A dark UI sat over light photos the same way. The rule was invisible to the user. The app just always read.
To get the overlay effect to work in a natural way required selecting only photos that were very dark or very light on the lower half. On scroll, a darker scrim and blur would fade in, focusing on content, keeping some of the photo's flavor.
A scrim system that works at scale
Text legibility is the hard part of photo-first design. We solved it by treating the photo and the UI as one system. Photos were filtered so their lower half was either light enough or dark enough, no mid-tones. A light UI sat over dark photos with a gradient scrim between them. A dark UI sat over light photos the same way. The rule was invisible to the user. The app just always read.
To get the overlay effect to work in a natural way required selecting only photos that were very dark or very light on the lower half. On scroll, a darker scrim and blur would fade in, focusing on content, keeping some of the photo's flavor.
Hourly and 7-day bars use relative heights, so the shape of the day reads before the numbers do.
Hourly and 7-day bars use relative heights, so the shape of the day reads before the numbers do.
Hourly and 7-day bars use relative heights, so the shape of the day reads before the numbers do.
Hourly and 7-day bars use relative heights, so the shape of the day reads before the numbers do.
45 icons, NOAA-mapped
An icon system covering all 45 NOAA condition types. Consistent style, paired one-to-one with the conditions the API returned. No guesswork on the engineering side.
45 icons, NOAA-mapped
An icon system covering all 45 NOAA condition types. Consistent style, paired one-to-one with the conditions the API returned. No guesswork on the engineering side.
45 icons, NOAA-mapped
An icon system covering all 45 NOAA condition types. Consistent style, paired one-to-one with the conditions the API returned. No guesswork on the engineering side.
Weather everywhere, not just in the app
The same patterns started showing up across Yahoo. Tap a weather icon inside another Yahoo product and a sheet appeared with current conditions and the 7-day forecast, without leaving the page.
Weather everywhere, not just in the app
The same patterns started showing up across Yahoo. Tap a weather icon inside another Yahoo product and a sheet appeared with current conditions and the 7-day forecast, without leaving the page.
Weather everywhere, not just in the app
The same patterns started showing up across Yahoo. Tap a weather icon inside another Yahoo product and a sheet appeared with current conditions and the 7-day forecast, without leaving the page.
Weather everywhere, not just in the app
The same patterns started showing up across Yahoo. Tap a weather icon inside another Yahoo product and a sheet appeared with current conditions and the 7-day forecast, without leaving the page.
The widget install
The Weather widget shipped with an inline animation showing how to install it in under 8 seconds. Show, don't tell. Installs were strong enough that the same pattern got picked up by Yahoo Mail and Yahoo Finance for their own install flows.
Related
Two more stories. Another small creative team. A whole organization.
Related
Two more stories. Another small creative team. A whole organization.
Related
Two more stories. Another small creative team. A whole organization.
Related
Two more stories. Another small creative team. A whole organization.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Monument, Mori, and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Monument, Mori, and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Monument, Mori, and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Monument, Mori, and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.