Improving Data Discoverability for Arctic Researchers
Teaming up with the International Arctic Buoy Programme (IABP) as a Product Designer, I led the redesign of their website and the data-searching experience on the arctic data & maps webpages. My role encompassed conducting user research, restructuring information architecture, and implementing visual design upgrades, all geared towards aligning the organization's dedication to data accessibility with core user needs.

The International Arctic Buoy Programme (IABP) delivers real-time data through its website, offering vital meteorological and oceanographic insights from a network of drifting buoys across the Arctic and Antarctic Oceans. At its heart, IABP empowers research efforts aimed at understanding Arctic climate dynamics, tackling climate change, and enhancing weather forecasting accuracy.
Client
International Arctic Buoy Programme
My Role
‍Product Designer
Information Architecture,
User Flows, Visual Design,
Prototyping, Hi-Fidelity Designs
Team
1 Project Manager,
1 UX Researcher,
2 UX Designers (including myself)
Timeline & Status
10 weeks (Sep - Dec 2022)
In Development
Overview

Improving Data Discoverability for Arctic Researchers

The International Arctic Buoy Programme (IABP) provides real-time data via its website for a network of drifting buoys in the Arctic and Antarctic Oceans. Their core mission is to disseminate crucial meteorological & oceanographic information, supporting research endeavors focused on Arctic climate, climate change, and weather forecasting.

I collaborated with IABP as a Product Designer to redesign the web experience.

My role encompassed comprehensive user research, information architecture restructuring, and visual design enhancements, all aimed at harmonizing the organization's commitment to data accessibility to core user requirements.

my role

‍Product Designer - Information Architecture, User Flows, Visual Design, Prototyping, Hi-Fidelity Designs

Team

1 Project Manager, 2 UX Researchers

Timeline

10 weeks (Sep - Dec 2022)

Status

In Development

the challenge

How might we redesign an efficient data searching experience for arctic researchers on the IABP website?

sneak peek

An improved data searching experience

Redesigned and delivered an intuitive, responsive website featuring simplified navigation, a polished UI, and a fresh brand identity. This overhaul optimizes data discoverability through Data Tables and Buoy Maps for core users, while strengthening IABP's research efforts and enhancing visibility among potential funders and collaborators. We underwent two rounds of usability testing to validate our designs, and here are the resulting success metrics from usability testing:

95%

Increase in overall user satisfaction rate with the revamped website.

2x

Improvement in dataset discovery through redesigned web pages

80%

Reduction in complexity and error rates for data discovery tasks.

95%

Increase in overall user satisfaction rate with the revamped website.

2x

Improvement in dataset discovery through redesigned web pages

80%

Reduction in complexity and error rates for data discovery tasks.
problem

The current state of affairs

When I joined the project, the IABP website was visually dated and looked straight out of a 90’s internet archive. To quote one user research participant, “it looks like a scientist made it”. 

A usability analysis conducted in the past revealed 3 key problems with the core experience.

Jump to Solution
Video Demo: IABP's Old Website

problem #1

Navigational chaos and content overload

Users encountered difficulties due to inconsistent page titles, confusing terminology, and broken links, resulting in a fragmented site navigation experience.

The original site lacked branding coherence, featuring a complex global navigation and inconsistent vertical sub-navigations. Text-heavy pages diluted the organization's mission and impact, while numerous dead links hindered user experience and accessibility.

Before: IABP Home

problem #2

Limited search, filter & download capabilities

Navigating through the data felt like being lost in a sea of information. With no search & filter functionality or data descriptions, users spent more than 10 minutes navigating & finding relevant datasets.

The data pages suffered from poor information hierarchy, with hundreds of rows of datasets cluttered the bottom of the page, challenging users and hindering their ability to discover relevant datasets.

Before: Data Tables

problem #3

Buoy maps were powerful but underutilized

IABP maps, a powerful tool for tracking deployed buoys and their movement, remained largely underutilized due to their limited interactivity and poor search options.
Users were unable to fully harness the wealth of data these maps offered and found them redundant to use.

Before: Daily Maps
problem

The current state of affairs

When I joined the project, the IABP website was visually dated and looked straight out of a 90’s internet archive. To quote one user research participant, “it looks like a scientist made it”. A usability analysis conducted in the past revelead 3 key problems with the core experience.

Jump to Solution
Video Demo: IABP's Old Website

problem #1

Navigational chaos and content overload.

Users encountered difficulties due to inconsistent page titles, confusing terminology, and broken links, resulting in a fragmented site navigation experience.

The original site lacked branding coherence, featuring a complex global navigation and inconsistent vertical subnavigations. Text-heavy pages diluted the organization's mission and impact, while numerous dead links hindered user experience and accessibility.

problem #2

Limited search, filter & download capabilities

Navigating through the data felt like being lost in a sea of information. With no search & filter functionality or data descriptions, users spent more than 10 minutes navigating & finding relevant datasets.

The data pages suffered from poor information hierarchy, with hundreds of rows of datasets cluttered the bottom of the page, challenging users and hindering their ability to discover relevant datasets.

problem #2

Buoy maps were powerful but underutilized

IABP maps, a powerful tool for tracking deployed buoys and their movement, remained largely underutilized due to their limited interactivity and poor search options. Users were unable to fully harness the wealth of data these maps offered and found them redundant to use.

Navigational chaos and content overload.

The original website lacked branding consistency and style, featuring a complex global navigation along with inconsitent vertical subnavigations.

‍

Text-heavy pages diluted the organization's mission and impact, while numerous dead links hindered user experience and accessibility.

Current State (IABP Landing Page)

Lost in a sea of information.

Navigating through the data felt like being lost in a sea of information. The data pages suffered from poor information hierarchy, with redundant content dominating valuable screen space. Hundreds of rows of datasets cluttered the bottom of the page, overwhelming users and impeding their ability to discover relevant datasets.

Current State (Arctic Buoy Data Page)

Map Interactivity - An untapped potential.

IABP maps, a powerful tool for tracking buoy clusters and their movement history, remained largely underutilized due to their limited interactivity and inadequate search options. Users were unable to fully harness the wealth of data these maps offered.

Current State (Maps Page)
Project Scoping

Decoding business impact & goals

We dived deeper to understand the essence of IABP's operations, exploring their core mission and values. Through two stakeholder interviews—one with the founder and another with the sole developer—we gained insight into their business goals and operational strategies.

What distinguishes IABP from its competitors is its profound impact on the community, evident in the extensive number of publications stemming from IABP's data. Naturally, their business objectives align with advancing research efforts, focusing on facilitating new and returning users in accessing and locating buoy data effectively.

Business goals defined by the organization

Understanding core business objectives

Collaborating with the founder, we crystallized the core business objectives, which served as the foundation for scoping the project and guiding our research priorities. The aim was for IABP to accomplish the following within 8-12 months of launch:

01

Increasing IABP's exposure in the arctic research community inviting research collaborations and publications published under IABP.

02

Boosting IABP's visibility among potential investors and collaborators, making it easier for the org to sustain and advance their work.

03

Improving data accessibility for new & returning users, making it easy to find & download research data.

And working with technical constraints

Given the organization's small size and an even smaller development team, we acknowledged these technical constraints early on. With a tight timeframe of 10 weeks, I leaned on my dev background to set realistic expectations for project deliverables and define the project scope based on what was achievable within the timeframe.

01

Charting unknown territories - We found ourselves immersed in the world of oceanographic science, an area completely unfamiliar to us.

02

Legacy framework & limited dev resources - The IABP team relied on a lone developer manually updating data daily on a website built on legacy frameworks. This presented us with technical limitations, constraining the scope of improvements we could implement.

03

Something old, something new - The technical nature of geospatial maps imposed limitations on the extent of upgrades we could introduce.

User research - insights

A deep dive into user needs & challenges

During the research phase, we conducted user interviews and cognitive walkthroughs with users to understand their workflows and validate our own assumptions. Additionally, we conducted competitive analysis to align our design goals with the industry standards. Here's what we uncovered:

IABP crew members in the wild
A buoy being deployed by crew members

A twofold approach for different user groups

With 95% of IABP users being experts (polar researchers and scientists), and the remaining 3-5% being collaborators and funders, our approach was twofold.

This meant we had to maintain scientific terminology and accuracy on data and map pages to meet the specific needs of our primary audience. In contrast, we streamlined language on other website pages to better engage collaborators and potential funders.

Uncovering patterns of use

So, how did our primary user group utilize IABP?
Through cognitive walkthroughs with our primary users, we gained insight into their workflow for browsing and accessing relevant buoy datasets. This workflow comprises three key tasks - navigating data pages, utilizing data tables and maps to locate buoys, and retrieving data either through a custom Python script or manual downloads from the website.

A typical user workflow for primary users of IABP website

Challenges in the current workflow

With no search functionality or data descriptions, users often spent more than 15 minutes navigating through extensive data tables, leading to frustration and inefficiency.
While buoy maps existed to aid users in locating deployed buoys, their limited interactivity and confusing annotations rendered them underutilized.
Users encountered difficulties due to inconsistent page titles, confusing terminology, and broken links, resulting in a fragmented site navigation experience.
The lack of bulk download options compounded the issue, requiring users to tediously download files one by one.
Information Architecture

Redefining the site structure

In order to streamline the data discovery process, we had to unpack and reimagine the existing information architecture of the site. Through internal heuristic evaluations and 11 card sorting sessions with our target users, we gained valuable insights into users' mental models and information processing on the website.

Before: IABP Site Navigation

Insights from card sorting exercise

  • 80% of users perceived Data Tables & Maps as sub-categories within Arctic and Antarctic pages, rather than the inverse
  • Page titles such as “Buoy information” & "Hardware" were confusing to users.
  • The most common categories identified were: About IABP, Information related to buoys, Arctic Data, Antarctic Data, and Reports & Citations.

Resulting design decisions & their impact

‍Design Decision 1: Arctic & Antarctic Data were established as primary categories, with Data Tables & Maps pages as sub-categories under each.

Impact: This restructuring led to 75% reduction in error click rates and a 95% improvement in time on task for data discovery tasks compared to previous usability test sessions.

Design Decision 2: Eliminated vertical side nav and streamlined the global navigation, using categories and page titles that aligned better with users' mental models.

‍Impact: The simplification of global navigation led to a 86% decrease in navigation-related errors, as observed during usability testing.

After: Redesigned Site Navigation
design explorations

Visualizing ideas & user flows

I facilitated brainstorming sessions within the team where everyone contributed fresh ideas and visualized user flows for key user tasks - IABP home, data tables, and map pages. These sessions not only helped stimulate our creative thinking but also ensured everyone's alignment on the design goals.

I translated these sketches into mid-fidelity designs to test and validate our designs.

Sketches produced by team during brainstorming sessions
Mid-Fidelity Design Explorations
Iterations

Testing design concepts

We conducted two rounds of usability testing with a total of 12 participants. The first round involved mid-fidelity prototypes, focusing on key user flows of Data Tables & Maps pages.

The second round utilized high-fidelity prototypes to identify and evaluate issues within our designs. Here are some of the iterations we made based on major findings:

finding #1

A clear demand for a more robust search & filter panel.

In our first iteration, the data tables featured a filter button that expanded into a modal overlay upon clicking. 4 out of 6 participants found it challenging to locate the filter panel, expressing a clear demand for additional filter options and a file format selection.

In response, I integrated a search and filter panel displaying all options at once, and a dropdown to select the preferred file format.

Before vs After: Data Tables

finding #2

While table views were effective for bulk downloading data, they proved insufficient for quick analysis.

To accommodate researchers seeking a more comprehensive or rapid scan of buoy data, we introduced a grid view alongside the default table view. This enables users to spend less time sifting through rows of data by quickly scanning key information of a particular buoy presented at once in the form of cards.

Data Tables - Grid View (Post Usability Test 1)

finding #3

Adding map filters to address limited functionality & interactions.

Buoy location emerged as the primary parameter used by Arctic researchers to track buoy movement and data history.

To address the limitations of the geospatial maps' functionality, we introduced filter options enabling users to locate buoys using latitude and longitude coordinates, and by setting a search radius.

Before vs After: Data Maps
final designs

Blending scientific integrity with approachability

A brand new identity for approachable science

At the heart of IABP lies a commitment to delivering high-quality data and supporting climate research. Their aspiration is for their brand to mirror these values —professional, trustworthy, and scientifically rigorous, yet also engaging and appealing to younger audiences for educational outreach initiatives.

Drawing inspiration from the breathtaking glaciers of the Arctic & Antarctic oceans, we reimagined the brand's color palette with shades of blue that embody these new brand principles.

For new learners and collaborators, we maintained a fresh and approachable tone on non-data related pages.

Revamped IABP Home

A spotlight on research & outreach efforts

IABP's business objectives circled around two primary goals: to enhance visibility and to expand their research outreach within the community.

We put a spotlight on their efforts through dedicated sections on the landing page - 'Highlights' and 'IABP in News'. This approach not only highlights IABP's identity and the impact of their work but also sets them apart from their competitors.

Revamped IABP Home - Continued

Introducing an all-in-one arctic data hub

The revamped data pages offer an optimized data searching experience, offering both table and grid views with intuitive search and filter options.

Users can seamlessly download multiple data files in their preferred format. Each data row prioritizes key information, with additional details available upon expansion. To support newcomers exploring IABP, we introduced a hero section providing essential page information and a quick reading guide for an effortless learning experience.

Revamped Arctic Data (Table view)

Track drifting buoys on the map

To tackle the challenges associated with highly specialized geospatial maps, it was imperative to grasp the limitations and capabilities of the organization's current development team.

Working around these constraints, we integrated a search panel for locating buoys using location coordinates and introduced hover interactions to provide metadata for seamless visual scanning.

Revamped Arctic Maps
In ReTrosPect

Project Takeaways

I am immensely proud of all the work that we put into this as a team. Lacking domain knowledge in arctic research and geospatial buoys, it was a gratifying journey for the team to learn new things and apply our skills to bring this to life. Receiving this heartwarming comment during user testing was the perfect culmination of our hard work and dedication.

Learnings

01

Collaborating with cross-functional teams early on

Involving the engineering team early on provided valuable insights into the site's technical architecture and and the tools they were working with. This allowed us to ensure our design decisions were dev-friendly and less resource-intensive.

02

Utilizing existing resources

Working with a tight deadline, we had to be strategic with how we spent our time. Drawing from past usability reports gave us an early head start in the research phase, giving us more room to iterate and validate our design choices.

Up Next
Thumbnail of Samsung Galaxy Flip 4 cover screen displaying various app widget options.
Samsung
Addressing Cover Screen Usability for Galaxy Z Flip 4
Highlights
An intuitive, accessible and modern website for easy data searching, filtering and retrieval process
Search & Filter options for easy data retrieval.
List & Grid views for Data Tables.
Thank you for stopping by!
pixel-heart
Made with love, coffee & existential dread.