In late 2016, Mobomo partnered with NOAA Fisheries to assist in restructuring and redesigning their digital presence. Merging all their core web properties into one Drupal site. Allowing users to go to one destination to find and discover information they need. Focusing on improving content efficiency, design consistency, and unifying NOAA Fisheries voice. Within one year we launched the framework for their next generation site.
About NOAA Fisheries
NOAA Fisheries is a federal agency that conserves and manages U.S. waters to promote prevention of overfishing, declining species and degraded habitats. NOAA Fisheries manages five coastal regions broken down by department, fisheries management, science centers, and labs. Each office ran their own independent site creating inconsistency and overlap in content and design as each digital property sat isolated.
How We Unified their Content
NOAA Fisheries as a whole covers many areas of information dealing with marine life. Each of the 10 core properties containing up to 10,000 pages and 5,000 pdf files. Together, we worked with 50+ stakeholders to discovery the consistency in their content and workflow. Creating ways to automation their content and move it over to a more tag driven system.
Putting the Site to the Test
NOAA Fisheries were moving to a topic based information architecture and wanted Mobomo to user test and suggest improvements. In our evationtion, we ran two types of user tests targeting four key audiences. This process took over two months to complete running 6 rounds of tests. Each test we Iterating each time based on the user insight we received improving their success rate by 13%.
First Test) How Users Group & Labels Items
We started out our evaluation by testing how users group items compared to the current sitemap. We tested over 100 people across all audiences in one week discovered that majority were not using the technical vocabulary that NOAA was using in their navigation concept. As a result, we select key categories and ran another test to see if users can still group all the items in our new groups, which provided technical terms was the issue.
Second Test) How Users Interacted with the Structure
After our rounds of sitemap revisions using the tool slickplan, we wanted to validate our sitemap again with our audiences. We used Treejack, a digital navigation tool that allow use to not only test the top level nav, but secondary and third levels of navigation. We conduct four rounds of testing focusing on only 10 individuals per audience. Each round we iterated focusing on where users clicked, improving task success as well as user directness. Our final sitemap scored 91% success rate, up from 13% from the first iteration.
Simplifying The Complexity
NOAA Fisheries site is more than a conveyor of marine life information and research, but offers a large variety types of information. From summaries of upcoming rules, archive of past rules, permits, funding opportunities, to various types of helpful resources. Each section had its own challenges for us to learn and develop automated solutions around. The goal was to automatic and simplify the content for users to locate as well as editors to post and manage.
Pushing For Dynamic Content
An unique aspect about NOAA Fisheries content is that their subject matter could cross over various topics and subtopics. Prior, content editors would duplicate information or manually link out overlapping information. This was one element NOAA Fisheries wanted to remove and streamline. As a result, we build topic templates that had auto populate feeds based on each custom tab in the template. Providing editor’s the ability tag their content to have it display in specific tabs across the site. Now, Users can go into a topic and easily skim the lasted background information based sub-area of interest. Moreover, search and filter it down even more.
Simplifying Fishing Rules & Regulations
When it comes with the rules and regulation, there are a lot of nuances when trying to catch a fish. NOAA Fisheries does a great job interpreting the technical information posted on the Federal Registry for fisherman. We wanted to continue that message throughout all aspects of rules that NOAA Fisheries covers. As a result, we created key directory that allow fishermen to toggle between what matter most to them. Enabling them to view weekly fishing update, upcoming rule changes, or just view all the rules for the type of spices.
Expanding Species Profiles
The biggest draw to NOAA Fisheries site was their protected species profiles pages. Moreover, in our user testing we found that majority of users look for key information under species profile. This lead the push for expansion of species profiles. Currently, NOAA Fisheries only had profiles for protected species only and one of the five regions had for fish. We work together to create a new framework of common key information for these new revamp profiles. The goal is provided simple overview information for the general public, scientific area for the scientists, rules & regulation information for the fisherman and government employees. Furthermore, we provided them of simple species directory and category view, which never existed prior.
Designing For Success
Rapid Prototyping & Iteration
Communication and expectations are key to the success of any project. In order to maintain this throughout our project, we used Invision to create our flat designs into clickable prototypes. This allow the client to better visualize what their site will look and act like. Each week, we focused on key sections and deliver interactive designs, which would review and quickly iterate. However, as the project grew, we switch to Webflow, interactive web builder, to better showcase responsive design and better interaction. As a result, we had build an interactive reference for both the development team and stakeholders to use throughout the entire project.
Building a Design System
Consistency is the most important aspect of a site, especially larger projects like NOAA Fisheries. Inconsistencies in designs and layouts can create more complex, more code, longer load times, and increase maintenance and expansion. However, the solution is more than just online brand guidelines, but a documentation and implementation of all reusable components, templates, and styles. The style guide was first created in Sketch of all the modules/symbols, colors, and styles. We moved it to Webflow with more of site structure, which we are in the process of converting our templates to be component driven as well building a live style guide.
Road Mapping to Success
Prioritization is key in building and launching a successful project. Together we work with NOAA Fisheries to help narrow down their needs and wants to help stay pace with their timeline. Websites should never be considered done, but a work in progress that is always improving and innovating. In the upcoming years, we will be working with NOAA Fisheries in migrating their content. During that time, we will be working on new features and improvements making it more automatic and efficient for users and editors. Ensuring we are creating a creating user experience for both their visitors and the content editors.
