Microsoft Weather Notifications
Design for dynamic cross-segment implementation
A glanceable weather card designed to give intelligent notifications and recommendations for over 1 billion Windows, MSN, and Edge browser users to be well informed and prepared for weather events. The notification allows users to get their essential local weather info conveniently and act as a call to action and entry point to click through to the weather app where users can deep dive into their local full forecast and explore global weather events.
My role
Explorations and design for intuitive presentation and delivery of accurate and dynamic weather data. Collaboration with several stakeholders across platforms to streamline design and functionality.
Collaborators
Design
Research
PM
Engineers
Platform
Windows
MSN
Edge desktop browser
Above are examples of the final notification cards. Each one reflects a unique weather forecast.
From sunny days to an incoming hurricane, just a few clouds, or a rainy afternoon; the notification was designed to reflect the dynamic nature of weather. With placements across multiple platforms, two card sizes were designed to adapt to platform feed algorithms as well as user preferences.
Along with the dynamic content, the card backgrounds also reflect the weather condition. This categorized and color-coded system for weather conditions is part of the weather app design guidelines. Applying this system to these card notifications contributes to their glanceable nature.
As well as meeting the demands of delivering glanceable and accurate information, the size and format of these cards went through an iterative process to align with framework, align with the family of informational cards they belong to, and improve design details to deliver the most valuable data clearly and legibly. The evolution of design included refined typography, iconography, and layout. As well as a color adjustment to meet accessibility standards.
With each iteration, a sampling of various card types were explored to ensure design scalability.
Updates to the Windows taskbar as well as the feeds for Edge and MSN were taking place concurrently. Throughout the design process, cards were tested in prototypes.
Nowcasting
A heads up that rain is on the way helps users plan their day. Nowcasting is a precipitation forecast for the next 2 hours. If precipitation is expected with that time frame in the locale users are synced with, the nowcast data will be shown in the card.
Reaching the design for the nowcast weather card was part of a larger project that I also worked on. This was a very comprehensive project with many details to consider. The preview in the card needed to align with the weather app experience. Here’s a peek at a handful of my explorations for the desktop web app.
Severe weather alerts
Microsoft weather alerts are aligned with the NOAA system for categorizing severe weather events. In the notifications, we included the alert category, type of event, and a preview of the corresponding weather map. Clicking through leads the user to the detailed forecast with the severe weather map.
Adding menu components
Customization is part of the systems where these notifications are featured. In addition to platform preferences, allowing the user to edit the synced location as well as temperature units is integral to the personalized weather experience.
Final implementation
Getting weather information is a high intent for users across platforms. In the Windows taskbar, MSN feed, and Edge browser, the weather card has been given prime real estate.
From each platform, the card click-through takes the user to the full forecast details that syncs with the notification.
The size of the card that is shown is dependent on either user settings or data informing the page algorithm. Below is an example of the nowcast experience.
The click-through for severe weather notifications takes the user to a weather map with up-to-date data about the severity, location, and movement of the event.
Check out what people have been saying about the update to Windows that this is a part of! And read more about the release on the Microsoft blog.
Next Steps
As part of this larger system, the notification design will continue to change along with system and design library updates. Stay tuned for updates from other teams and contributors.