Natural Capital Project Data Hub
UI/UX & Visual Design • Desktop
I designed a data portal for the Natural Capital Project that helps researchers and decision-makers search, access, and share global environmental data with ease.
Overview
That is really, really neat!
– Natural Capital Project
Role
Product designer
Team
4-person team
Timeframe
About 6 months
Client
Natural Capital Project & Stanford University
Company
Stamen Design
Check out the live project 👀
Outcome
1.5x faster exploration for researchers finding the right datasets
Improved researchers’ ability to navigate the platform by iterating on the user experience and visual design of the new data portal
Reduced cognitive load and increased discoverability by structuring a clear information architecture for complex datasets
Expanded how users interact with the data by introducing features for geospatial exploration, subset downloads, and code copying
Ensured long-term scalability by developing a cohesive design system that supports the addition of new datasets and tools
Increased accessibility and interaction quality through close collaboration with developers to refine patterns and behaviors
Accelerated development and ensured design fidelity by producing wireframes, prototypes, and detailed visual specifications
Problem
Creating a geospatial data portal that is intuitive and visual
To start the project, we asked the client to define what success looked like from their perspective. This approach helped align expectations early, clarify the problem we were solving, and provide a benchmark to measure our progress throughout the project.
Failure
Success looks like avoiding 100% of the following
Application doesn’t work
Users cannot find data easily or it is harder to find data than when we started
Application is not maintainable
We don’t have full participation from Nat Cap stakeholders
Minimum Success
Success means achieving 100% of the following
Correct and distinct branding to identify Nat Cap property
Users can find the data, view meta data, and download the data they seek
Users can search by place (i.e. drawing on map, by placename, etc.)
Search is intuitive even for non-technical users
Target Success
Success means achieving 40–60% of the following
Previews spatial data visually
Features a set of predetermined and beautiful looking color ramps
Layers are summarize based on a vector, or restyling based on a single vector.
Scalable (i.e. Nat Cap can continue to iterate and extend)
Users can copy paste citation, code snippet, etc.
User research
Designing for professionals with varied technical backgrounds
Natural Capital Project came to us with an existing data portal, so we first got to work investigating who is currently using the portal and what kind of general users they would like to attract. We bucketed these users into three main groups and outlined their goals and frustrations:
User
Researchers
Goals / motivations:
Understanding what is happening on a landscape for a publication
Pursuit of knowledge
Frustrations / pain points:
Lack of GIS expertise
Lack of time
User
Decision makers
Goals / motivations:
Looking for definitive data to make a decision
Need specifics (data, place, purpose)
Frustrations / pain points:
Need an expert to find data bc lack expertise in the technology and the place
Negotiate and work with local landowners
User
InVEST users
Goals / motivations:
Publishing a paper or supporting some other kind of report
Looking to view data and more technical information
Frustrations / pain points:
Not enough info readily available when searching
Need to download data to see if it's what they are looking for
Original site
A diagnostic look at the original data portal's design
We sat down with the client and learned about their thought process in how they originally designed the data portal. This allowed us to build on the successful features and design choices of the existing site and focus primarily on improvements.
What do users want to get out of the landing page?
Approachable, launches users into searching for datasets
Conveys the link between Nat Cap and the catalogue (InVEST) without text necessarily (i.e. CKAN is a means to an end here)
Intuitive for all users
Users can search for a specific data in mind for invest or another project (i.e. user needs a particular layer like precipitation in a specific place)
Users understand that what they’re looking for exists
New InVEST user who doesn’t know where to start and wants to see what they can easily access here
May be helpful to cater towards less technical users, would be nice to support folks that have light geo-spatial experience
What do users want to get out of the data search page?
Access a specific dataset
Browse datasets
Find datasets by searching for specific data, place, or purpose
Search by location, tag and type of data
Users can start to determine which of these multiple options is the best version for them
Answer questions like: What prior analysis have been done for Columbia? What has been previously run and how can I load that work to make it easier for myself? What can I use in this model?
Sort out what is worth exploring more
What do users want to get out of the dataset page?
Understand more about the dataset they just selected or searched for
Download files related to this dataset
Find similar datasets to this one potentially
Show me the details (resolution, dataset size, description)
Understand how and where to download the data
Access a subset of the data or snippet of code (don’t need to only download)
Wireframes
Designing for queries by name, place, file type, tag, and more
We refined the design and user flow of the data search page through close collaboration with the Natural Capital Project team. Since many users visit the portal with a query in mind, we focused on making that experience as straightforward as possible. Based on feedback, we streamlined place navigation, improved filtering and search behavior, and clarified how key dataset details appear. These iterations helped create a smoother path for users to find and access the data they need.
Snapshots from the wireframing process 📷
Advanced filtering
Supporting technical searches with advanced options
To aid more complex searches, we introduced an advanced filtering toggle that opens a modal with detailed criteria like location, tags, file type, and publication date. This approach keeps the main search experience clean and approachable while giving advanced users the ability to fine-tune their results. The modal design groups the filters logically and uses clear visual hierarchy, making it easy to build precise queries without overwhelming the interface.
Dataset page
Providing users with detail and next steps when digging into a dataset
When wireframing the main dataset page, we focused on balancing clarity with depth. The page needed to surface key information at a glance while offering richer tools for those who wanted to explore further. We introduced an interactive, expandable map to visualize dataset coverage and added practical features like one-click citation copying, dataset previews, and easy access to download and embed options. These elements help users understand, reference, and share data without friction.
Snapshots from the wireframing process 📷
Visual design
Balancing brand and usability in the final designs
We explored several visual design directions to align with the Natural Capital Project’s established brand while keeping the interface clean and functional. We experimented with different color palettes, typography, and map styles to find a balance between the organization’s earthy, research-driven identity and a modern, user-friendly experience. The final design refined these elements into a cohesive system that feels both branded and minimal, ensuring the interface remained easy to navigate.
We also created a landing page that served as a place users could either use to orient themselves when arriving to the data portal or jump right into their search. We specifically highlighted a few features in the landing page:
Main search bar that takes users to the data library with their specified criteria
Popular dataset tags that redirect users to the data library depending on selection
Search by location map that allows users to predefine their geographical data search
Featured InVEST model datasets that cater to users looking for specific datasets to run in Natural Capital's InVEST tool
About the data portal and Natural Capital Project information
