<- HomeOverviewOutcomeProblemRequirementsInsightsInformation ArchitectureExplorationsFinal ExperienceReflection
Improving Data Discoverability for Arctic Researchers
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.
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.
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.
Client
International Arctic Buoy Programme
Role
Product Designer
UX Research:
Information Architecture,
User Flows, Visual Design,
Prototyping, Hi-Fidelity Designs
UX Research:
Information Architecture,
User Flows, Visual Design,
Prototyping, Hi-Fidelity Designs
Team
1 Project Manager,
1 UX Researcher,
2 UX Designers (including myself)
1 UX Researcher,
2 UX Designers (including myself)
Timeline & Status
10 weeks (Sep - Dec 2022)
In Development
In Development
outcome
An improved data searching experience
Jump to Solution
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.
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.
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 and had a complex global navigation with 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
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.
Project Requirements
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.
Key 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 user workflow
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.
Mid-Fidelity Design Explorations
Explorations
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 were 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 experience
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 the new visual identity.
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.
.gif)
