Work  >  UX / UI  >  NOAA Responsive Website Redesign

Responsive Web Design of Government Agency Website: National Oceanic
& Atmospheric Association

ROLE:
DURATION:
TOOLS:

UX Researcher, UX/UI Designer

4 weeks (June 2020)

Figma, InVision, Miro, Whimsical, Flowmap, G Suite, Zoom, Photoshop, Trello, Otter.Ai

TEAM:

Team of 3 UX/UI Designers

computer_new_site_new.png
NOAA_mobile.png
PROBLEM:
SOLUTION:
IMPACT:

NOAA is a parent organization for several federal programs, and as such, their website is a landing page for many other organizations. However, despite large visuals and a pleasing color palette, the site proved difficult to navigate and frustrating to use. Our User Persona, Lily, is a teacher who is struggling to gather info from this website for use in her classroom.

Our solution was to reduce user confusion, focus on clean, clear and uniform design and to condense the information into one main site rather than multiple sites with varying design.

We redesigned the NOAA website to be easy to use and a delightful experience without sacrificing the beauty of the visuals, making it much easier for users like Lily to search for and save information for her lesson plans. It's imperative that the wealth of knowledge that NOAA provides can be used by anyone looking to find it.

computer_new_site_new.png
computer_new_site_new.png

Challenge

PROBLEM STATEMENT:

NOAA is a parent organization for many other federal programs, and as such, their website is a landing page for several other organizations. However, despite large visuals and a pleasing color palette, the site proved difficult to navigate and frustrating to use. Our User Persona, Lily, is a teacher who is struggling to gather info from this website for use in her classroom. Our goal was to redesign the NOAA website to be easy to use and a delightful experience without sacrificing the beauty of the visuals. Furthermore, we needed to make sure the wealth of knowledge that NOAA provides can be used by anyone looking to find it, especially our nation's educators.

Approach

NOAA_homepage.png
Education Page.png

Heuristic Evaluation

USER RESEARCH:

Initially, we interviewed 6 users and asked them to complete simple tasks using the current website. We found that many of the users struggled to find what they were looking for and were confused by the lack of consistency from page to page. Our users wanted a quick and easy way to navigate the site, however, they were required to click too many times to get anywhere. Out of 5 tasks, only one was completed by all participants.

usabilitytest.PNG

Usability Testing Results

DEFINITION & SYNTHESIS:
Screen Shot 2020-08-27 at 6_22_24 PM.web

Feature Prioritization Matrix

With the user insights we gained, we were able to synthesize the information into main features needed for the site. We then prioritized those features to help guide our process. Since the most significant issue was the navigation, our team focused on determining the best direction to go based on the user feedback received. We needed to take the following things into consideration: an easy way to navigate home, clear labels to identify iconography, consistency in breadcrumbs, and hierarchical organization of content.

USER PERSONA: Lily Thomas

Due to our limited time and resources for initial user interviews, we created a proto-persona based on both our user interviews and our own observations of the site. Though we recognized this proto-persona was limited, we were able to use her to get in the mindset of one of many different potential users of the site. Lily Thomas is a 40 year old High School Science Teacher from Longbeach, CA with passions for shaping young minds and protecting the environment.

Goals:

  • Wants useful data to help her teach science

  • Wants students to take on interest in saving marine life

  • Needs more resources and tools to help her present information to her students

  • Wants to help educate and shape the next generation to be better than those before them, especially in terms of taking care of the environment.

Frustrations:

  • Too many websites to choose from for gathering data

  • Science data is difficult to navigate, especially on government websites

  • Frustrated that her students and colleagues aren't as educated about climate issues

  • Concerned about saving the planet and wildlife, wants resources she can use to spread the word

IDEATION:

Our first step in ideating on our solution was to take a look at the current navigation and, using the card sorting method, reorganize it into a new site map. We experimented with different ways to implement this new navigation before deciding on slide out tabs that are clearly labeled. 

Site Map

PROTOTYPING:

We started with paper prototyping and moved into low-fidelity in InVision before moving to mid-fidelity in Figma. After settling on our layout, we began applying style based on our mood board and the current NOAA branding.

paper.PNG
prototype1.PNG

Low-Fidelity Sketches

Mid-Fidelity Prototypes

NAVIGATION UI:

Since navigation was one of the largest factors contributing to user confusion and frustration during initial testing, we made a concentrated effort to improve the UI. Our primary considerations were less clicks per action, more clarity in labels, and a secondary navigation bar to help with the depth of each department page. Additionally, we found the original sidebar navigation with icons was pleasing to the eye and unique for our users. With this in mind, we set out to increase usability while incorporating the aesthetic into our new design.

Screen Shot 2020-08-27 at 7_38_39 PM.web
VISUAL DESIGN:

We created a mood board to determine the general aesthetic, typography, and iconography that we wanted to use in our redesign and from there created our style guide. We decided not to deviate too dramatically from the current NOAA UI style, color and iconography, however we added a couple of bright accent colors and "softened" the design of buttons and other elements to keep the site light and fun to use while also maintaining accessibility in the color scheme and design. On the mobile site, navigation is condensed down into a slide-down menu and other elements like photos and text are grouped and prioritized down the page as to not overwhelm the user. The goal is for the mobile site to be as simple and easy to use as the desktop site.

style_4.png
style_3.png
style_1.png
style_6.png
style_5.png
style_2.png
style_7.png

Mid-Fidelity UI Prototype

Style Guide

Results

9a109c_7cfb2fbf622d4f498db224be391cf6b8~
9a109c_3ea9b396ea94498ab9c68d7cec32786b~

High-Fidelity Prototype

USER TESTING:

Our team conducted multiple usability tests including a 5 second usability test of the navigation, A/B testing on the layout of the cards, and structured task usability tests. We found that our success rate ranged from 90-100% for each task, and many users commented on how easy and fun the navigation was to use. The only major issues from user testing arose from strange wording of tasks that we adjusted, as well as some confusion due to the layout of our cards under an informational paragraph on our internal pages. Due to this, some of our users initially missed the cards and had to return to find them after looking elsewhere.

User Testing Results

A/B TESTING:

We also A/B tested the size and layout of our cards on our mobile prototype. We found that majority of users preferred the larger cards stacked in one column rather than the smaller cards in two columns.

ITERATIONS:

With our user feedback in mind, we iterated further on our prototype, including changing the position of the cards from below the page summary to the top of the page, just below secondary navigation.

Education Mobile.webp
Education Mobile2.webp

A/B Testing

FINAL THOUGHTS:

The major struggles my team faced were rooted in the confusing information architecture of the original site and the fact that most pages opened to new sites that fell under the umbrella of NOAA. We had to go through multiple sites and pages to determine our new site map in order to condense and clarify the navigation of the site.  As a team, we really succeeded in making this project a collaborative effort. We impressed ourselves with how well we were able to mesh our ideas seamlessly into a final product. Ultimately, this is a project that we would love to continue to iterate and improve upon in the future.

Screen Shot 2020-08-31 at 11_54_40 AM_pn
FUTURE OPPORTUNITIES:
  • Would like to add interactive aspects to the educational pages to entice young learners and expand the site to encompass all of NOAA rather than acting as a landing page for other organizations under NOAA

  • Would have liked to go deeper and build out more pages for the prototype in order to really showcase the cohesiveness of branding and style

  • Include interactive aspects on educational pages to entice young learners