National Weather Service Re-Design

The Problem Space

Pictured above is the current home page of the National Weather Service website. The site is prone to user error,  failing to meet every design heuristic. It is unclear how to go about getting the information you need, and every action you take functions in a completely unexpected way.  Our goal was to recreate the home page in a way that was functional and provided all of the necessary information, no matter the skill level of the user. 

Usability Testing

We wanted to know the exact pain points associated with the site, in order to determine how to go about fixing it. To get this information, we conducted our first round of user testing with 5 participants. This is the standard amount of test subjects needed to find the majority of the usability errors in a website. We created a set of tasks for our users to complete on the site that would require a them to navigate to at least the third layer of pages. The tasks were chosen based on preliminary interviews that discerned the most common usages for similar weather sites by our target users. By screen capturing and interviewing our users before and after the test, we determined that our focus for the redesign should be on the map and search bar functions. They were most often attempted by participants to complete the typical task of finding weather conditions in particular areas. 

Ideation & Prototyping

With the information we gathered about user needs and the usability errors of the site, we were ready to ideate on improvements to the site. We wrote down all of the information we had creating a chart with user needs as categories, and rapidly ideated solutions to meet these needs. We then weighed the pros and cons of each design, and chose two to use to create for higher fidelity prototypes with photoshop and sketch. 

User Testing

We used our two high fidelity prototypes to test our new design ideas on our users by attempting to discern their thought processes initiated by our designs. Based on the feedback they gave us, we combined elements of the two prototypes and enhanced them to create our final deliverable shown below. We provided the necessary information while maintaining the usability of the website.

Final Design