WU Forecast Page 

Roles: UI/UX Designer
Project Type: Collaborative
Live: SF Forecast Page featuring Weather Underground's PWS

Overview
With Weather Underground's overall rebrand, the city forecast page was where the most energy was spent. This product has the most page views than any part of our website and is a treasure trove of information. With our rebrand, our team had to re envision the page, creating a responsive web experience and new ways to visualize the data.

Problem
The old site was outdated and not able to load on mobile. Much of the data links were broken and the backend needed re-writing. We took this opportunity to refresh the UI and give more options on displaying data.

Research
The first step we took was looking at all the data we were currently showing and looking at the engagement, and also seeing what new data and visualizations we could create to make a better experience for the user. We looked closely at the page load speed on both mobile and larger web and learned what data was culprits to slowing the site down. We also worked on finding what elements were the most engaging and looked to how we could make these better.

User Interviews and Stories
The main thing we heard when interviewing users was to not "dumb down the data". Our users wanted all the data we could give them and see it displayed how they wanted it to be. The three main data points that users wanted to see at a quick glance were: current conditions, radar, and forecast.

We then created user stories with 5 personas on how different individuals would use the page based on existing and new user interviews.

Analysis
One of our main objectives was making sure that the important information, the three main data points, was “above the fold” or quickly visible on large screens and easily accessible on smaller screens. This meant making sure current conditions, radar maps, and forecast were given similar importance.

First is that we moved the radar imagery up and by the current conditions, since it gave users a clear idea of what was happening and coming. Radar is current and past so making that align with the current conditions data worked well.

Then we allowed a large horizontal space for our new forecast graphs. Change to graphs over the traditional tabular view allowed people to be able to see information quicker and with less scrolling, which benefited those view on smaller devices. We also made sure that these data graphs would be able to be viewed if the user had any form of color blindness, this was important in making sure all our data vis was accessible.

We also created a modular system for all our additional information that may be pertinent to the user, our astronomical data, photos, news, state highs and lows, etc. This allowed for better grouping of data. Below the main three elements we implemented a lazy load to help with page speed, the bottom only loading once the user scrolls down. With this redesign of the layout we drastically cut the length of the page, made it faster and more accessible on mobile devices.

Personal Weather Stations
Another important element to our company and the forecast page was the ability to switch between our Personal Weather Stations (PWS), this is a feature unique to WU and creates the company having the largest network of stations, more than governments combined. We created an experience where the page opened up to reveal more information, including a map of the stations and list, this allowed the user to search for the name of a particular station or use the map to orient themselves to the nearest station to what they need. This allowed for more control on the user’s part to decide what information they need, and to get more localized information instead of most weather websites directing the user to the closest airport weather station, or choosing for the user.

A/B Testing
With optimizely we were able to launch a beta for users to test and also launch an A?B versioning of the beta. This helped inform us what was working and users enjoyed and what we could move on from.
 

Outcome
In the end we worked to make sure all the data was still there but better organized. One concern that users had was to not “dumb down the data”, and we worked hard to organize it and not change it. We kept the same data and added more to it, while optimizing visualization, creating a responsive site, and cutting page speed.