Rethinking weather.com

How to design a more digestible experience while optimizing for both user needs and business needs.

Caley Adams
Apr 11, 2016 · 7 min read

Introduction

Weather.com is viewed by roughly 26 million people in the U.S. per month* and ranks the 36th most popular site in the country*, according to estimates posted on quantcast.com. Despite the large offering of downloadable weather apps and other online resources, weather.com is still the go-to site for getting up-to-date weekly, daily and hourly forecasts. However, when users visit the site they have to fight an endless display of irrelevant ads and unnecessary information in order to just find one number. And with the sheer amount of ads on the page, the site renders slowly causing accidental clicks as content shifts around.

The business needs of weather.com as a money-via-paid-ads-business are getting in the way of general usability, but the two are not inherently at odds. In this case study, I’ll explore some ways to reconcile the two needs and streamline the content in order to balance both.

Diagnosis of current site

Ads and load time

When you land on the homepage of weather.com, it’s difficult to find the information you want most because so many components fight for your attention. To start, the ads on the page clutter the experience and slow down the load time. The most aggressive ad loads last and on the very top of the page, which then pushes down all the content in the top main area where, as a user, you would most likely be clicking. This can cause a lot of frustration when it leads to accidental clicks to parts of the site or to other sites that you had no intention of navigating to.

In addition, the ads themselves are everywhere and virtually indistinguishable from other content created by weather.com.

People coming to this site are looking for the weather. The information they find will affect their day’s schedule, their outfit, their travel plans, their future plans. Finding that information should be quick and easy.

Information density & hierarchy

There’s a major hierarchy and information density problem. Because the eye moves top to bottom to take in information, this particular structure makes the user scan through a lot of information before finally seeing what they need. Below the giant ad on the top is a navigation: Forecasts, Maps, Video, Photos, TV, News, and Tornado Central. Without the specific metrics behind this, it’s tough to know for sure how many site visitors click around on this menu structure and browse content — my hunch is not many do. Below this is a location-specific sub-navigation which is the most important navigation a user would need — Today, Hourly, 5 Day, 10 Day, Weekend and Maps with a carat on the far right that hosts even more advanced features such as allergy trackers and flu reports.

Because the human eye moves top to bottom when processing things, this double navigation system overloads the user with unnecessary items to read before finally presenting the most crucial information. A consolidation and restructuring of the navigation elements would be very helpful to quickly find what you need and would partially solve the information density problem.

Exterior linking

The site’s design adds even more additional steps to getting information. For instance, the sub-nav’s contents (Today/Hourly/5 Day/10 Day/Weekend/Maps) are typically the primary things a user would want to see if they were looking for not just the current temperature but the forecasts. As it is now, the current temperature is displayed up-front, but you must click exterior links to separate pages to get an hourly or 5-day prediction. This driving off to separate pages creates friction for the user who wants to get to the information they need quickly and easily. This page would be significantly more effective if the user could toggle between these options without leaving the page.

In addition, it doesn’t seem completely clear why the immediate weather forecasts (“Tonight/Tomorrow/Tomorrow night”) are shown as a teaser on the right. Content-wise, it’s very close to the 5-Day forecast and also the Hourly forecast.

Smart location saving

One thing that weather.com does do quite well is that it remembers previous searches and suggests them in the top bar for quick navigation. I can imagine that in use cases where people travel or live/work in multiple locations, it would be incredibly handy to have this information easily accessible.

Solution

A cleaner, more streamlined solution that makes the most important information easily accessible while minimizing the importance of secondary and tertiary information.

Navigation

In this solution, the nav containing Forecasts/Maps/Video/Photos/News/TV/Tornado Central (original top nav) is collapsed into a hamburger menu up in the top right to allow Today/Hourly/5 Day etc. (new primary nav) to become more prominent. Typically, hamburger menus are reserved in designs for non-primary navigation because it can be hard to find nav items in a menu like this. However, in this case, the original top nav is significantly less important which justifies its placement in a non-primary nav device like the hamburger. To not lose easy access to these parts of the site, content modules added lower on the homepage surface items from each of these nav buckets that drive off to these sections.

A cleaner nav solution

No more exterior linking

The new primary nav, now with a toggle functionality, no longer demands that the user click away from the main page to browse extended forecasts. And by cleaning up and streamlining the overall information presented at first glance, we’re also able to remove the hour-by-hour forecast from the nav and include it as a scrollable area in the current weather card so that this information is instantly accessible. This eliminates the need for the quick glimpse of today/tonight/tomorrow that was previously featured on the right. The “Weekend forecast” section is also removed in this design as this is very duplicative of the extended 5 Day/10 Day forecasts.

Tab toggling for now-primary navigation. More button expands the list item to show more secondary details.

Cleaner content and ad modules

The content area and ads themselves could also become slightly more stylized and less overwhelming by bumping up the overall size and weight of certain items in relation to other smaller items. By displaying the content more prominently with larger styling, more white space, and room for the individual modules to breathe, a higher stylistic contrast is created between them which makes it easier for the user’s eyes to scan the page top to bottom.

Along with creating more visual contrast on the page for the ads and content, there are designated places for ad space that feel prominent enough to appease ad buyers and support business needs. A premium ad space was created in the top right, where a brand can be featured prominently and very high up on the page without sacrificing usability. In contrast to the ad on their current site that loads in the top above the entire page, this would not push around any content as it loads in because it’s in a separate column detached from the main area on the left.

Hierarchy and information density

After the rearranging of the navigation items, there is now significantly less to take in visually as you glance top to bottom. To further help, there is an emphasis on the most important pieces of sub-information — things like humidity (a piece of info perhaps more important during the summer months) and chance of precipitation — by arranging them to the left under the main info. The less important information like dew point and pressure is split up from the more important sub-information and added to the right in a bullet-point style for better scannability. In addition, some of the allergy elements found on deeper level pages were added to this bullet list, as these can be helpful pieces of information to some in high-allergy months. Other information like the almanac or advanced allergy forecasts can be found within the hamburger menu navigation in their respective sections.

Keeping the saved locations

The saved locations, because of their usefulness, are still present at a high level view in the search area.

Location suggestions

These would also appear as search suggestions in a dropdown menu after clicking into the search box. On mobile, these suggestions would only appear in the search suggestions list upon tap into the search field.

End Result

The end result is an overall cleaner, more structured solution that makes it easy for the user to move through the site and take in information while still surfacing deeper level content and ads in a way that’s prominent and enticing.

Thanks for reading

I hope found this exercise on UX thinking and organization helpful. If you did, please hit the ♥ button below, and share it!

3

3 claps
Caley Adams

Written by

Caley Adams is a NYC-based product designer, artist and illustrator. Work at: www.caleyadams.com