Weather Underground

Crafting a New Design System for a Leading Weather Site

As part of our ongoing work with Weather Underground, we were tasked with developing a new page layout and visual design language that could be implemented across their extensive weather website.

Weather Underground was the first internet weather service, started as a telnet service at University of Michigan in 1991 and launched on the web in 1995. They have the largest network of weather stations, 19,000 and counting. Their weather data is accurate, reliable and plentiful, but it was often difficult to find within the sprawling page layout.

We began by auditing the site content, which ranges from weather data and maps to blogs, apps and photos. Analyzing the dimensions enabled us to define an underlying grid that would be flexible enough to present all types of content with only minor changes. The new grid can be combined in many different page layouts whilst still feeling coherent and consistent across the site.

Content and features on the site are presented in modular containers. From the site audit we were able to determine a set of requirements for these modules and work up a flexible design language that requires just two design styles. To enable implementation of this new visual design language we developed a detailed set of guidelines for Weather Underground's development team.

Every page uses a consistent header and footer. These were completely redesigned to be more user-friendly and faster to load. The page header now functions as a dashboard for the site.

The tab-based design of the site navigation gives visitors a familiar tool to explore the new, simplified website architecture. Favorite locations and recent searches, which were previously included in a sidebar, were incorporated into the header to free up valuable page real estate and enable visitors to see their hometown conditions at a glance. In addition to admin and contact information, the page footer now provides easy access to key areas of the site and social features.