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
Project Goals
- Provide users with content rich and glanceable weather updates.
- Ensure the design is clear, accessible, and easily understandable across various platforms.
- Incorporate dynamic features such as precipitation forecasts and severe weather alerts.
- Maintain consistency across different Microsoft ecosystems, including Windows, MSN, and Edge.
- Facilitate quick access to more detailed weather forecasts when needed.
- Optimize the design through user testing and feedback for enhanced usability and engagement.
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.
To meet the demands of delivering glanceable and accurate information, the size and format of these cards went through an iterative process to align with the framework, the family of informational cards, and to improve design details for clarity and legibility. 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 within that time frame in the user’s synced locale, 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 a 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 users to edit the synced location and temperature units is integral to the personalized weather experience.
Final implementation
Access to weather information is a high priority 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 & Reflections
As part of the larger MSN Weather platform, the notification experience will continue to be enhanced along with coordinated weather branding and design library updates. Stay tuned for continued updates and contributions.
The following are steps I would have liked to see worked into the roadmap:
- The initial prototype received positive feedback, but I recognize the need for ongoing improvements. Conducting additional user testing would help uncover any usability issues and highlight areas where enhancements are needed to better serve a diverse range of users.
- Additional features such as personalized weather forecasts and integrating alerts and notifications with other Microsoft services could enhance the experience and increase engagement.
These steps would help create a more robust, user-friendly weather notification system that meets all users’ needs.