Intuitive ecological sampling maps
The Challenge
The National Ecological Observatory Network (NEON) quantifies ecological processes over time and space using a complex spatiotemporal sampling design at 81 field sites across the United States. The sampling design includes data collection related to plants, animals, soil, nutrients, freshwater and the atmosphere using sensor measurements and field observations.
Researchers using NEON data requested an easier way to quickly discern what measurements are take at a field site as well as the location of those measurements relative to other measurements at the same field site.
My Role
In-house UX Communications Designer at the National Ecological Observatory Network
Our Team
Developer (external agency)
Data Product Manager
Instrument Engineer
Field Site Technican
Communications Director
UX Communications Designer (me)
My Work
User Research: Conducting user interviews and user testing, including collaborative writing of the interview and testing scripts
Design: Wireframes, mock-ups, map interface design
Collaboration and Project Management: Coordinating the design & development process between internal staff and external design agency, facilitating design reviews
Software
Adobe Photoshop
Leaflet
Drupal
CrazyEgg
KEY OUTCOMES
Maps that take into account researcher needs and offer simple, intuitive data filtering.
UNIQUE SITE PAGES
Rather than individually creating unique maps for each of the 81 field sites, dynamically generated maps with interactive layers of collection data are displayed on the individual field site pages. Each field site map had its own associated data that is a mix of point locations and boundaries on the map with the ability to click on a point and see pop-up information unique to that field site.
ACCESSIBLE & CUSTOMIZABLE
With multiple boundaries (lines on the map) and 9 different types of plots (points on the map), it was important that our map was accessible using a variety of shapes and a color-blind friendly palette. In order not to overwhelm the user and to let researchers focus just on data that was relevant to them, we added a filterable map key.
SUPPORTS SCIENCE CONTENT
A key pain point with researchers prior to the new maps was needing to sort through dense documentation on NEON's Data Portal to find basic metadata information for site measurements. To make this content easy to find, I pulled the metadata out of the documentation and added it to the interactive map plot pop-ups.
FLEXIBLE LAYERS
As NEON shifted from construction to operations, field site sampling locations and measurements could change. In order to make the map layers flexible, I created standardized .csv files with all the point metadata that could be updated and uploaded to overwrite the nodes for that particular site.
Process + Solutions
To address users' requests for visualizing site measurements, my manager (Communications Director) and I started with the assumption that the spatial distribution of sampling boundaries and plots would be best visually represented by a map. With only two months left on our contract with Taoti, an external contractor we worked with to redesign neonscience.org, we didn't want to waste any time and resources on maps that we weren't sure users would use or that we could distill down into a digestible visual. We also had some initial concerns that the needs from the smaller subset of researchers who reach out might not be aligned with the habits and needs of a broader science audience.
We decided to adapt the traditional Lean UX method (think, make, check) and focus on using Lean UX principles as a guide - not getting too hung up on perfect Lean UX techniques and framework - in favor of quickly building a prototype, iterative validation, and leveraging user feedback.
Lean UX advises involving as many contributors as possible to get a diversity of perspectives and ideas for the product solution. While this project was short notice and we weren't able to get any non-communications staff to dedicate their time fully to the project, we were able to recruit a couple of folks from a variety of departments to give a few hours each week for six weeks to help inform ideation and iteration.
Ideation
To kick off the project, I held a hands-on workshop with our cross-disciplinary team made up of our front-end developer from Taoti, a data product manager from the Science Team, an Engineer from Engineering, a technician from a local field site, and a developer from the Data Products team. To ensure that everyone was on the same page, we spent the first half-hour discussing the problem we were trying to solve, the users were serving (including assumptions we were making about researchers as a user group), and the constraints we were working within. I put together a brief presentation with slides to help facilitate and encourage group discussion.
Next we focused on individual six-up exercises to start visualizing potential solutions and cultivate team-wide buy-in and faith in each others’ ideas. I gave each team member a six-up template, a.k.a. an 11" x 17" sheet of paper with six empty boxes on it. Then, it was time to start brainstorming! I gave everyone, including myself, five minutes to storyboard a user flow on their six-up template. After the five minutes, we taped them to a wall and went around the room spending three minutes reviewing every single person’s six-ups. Presenters shared the issue addressed their hypothesis and an explanation of their sketch then everyone listening provided feedback focused on clarifying the presenter’s intentions (opposed to stating what they liked or didn't like).
With feedback already on everyone’s brains, it was time to iterate again. Each person made a second-draft of their six-up solution, integrating the feedback they received. Once the five minutes for six-up drawing was over, everyone presented again. As a team, we then used a dot-voting exercise to vote on the top two six-up ideas. With our top two ideas identified, we then set out to start building and testing.
#1 Idea
Separate maps by plot type with content descriptions
This approach would walk users through the different types of plots in detail. The original thought was that map images would be zoomed-in to the area of focus within the field site and thus could be static (and therefore easier to create/maintain/write alt-text). Our main concerns were if users would read the descriptions to figure out what each map meant in the context of the field site and how much space this would take up on the page.
#2 Idea
All-in-one GIS type map where users could explore
This approach would provide a mini-map "tool" that users could select different layers and plots to create their own maps. Our main concerns were if users would be overwhelmed with the number of options (or a map with many overlapping plots of varying sizes that could be hard to differentiate), if users would be able to find the plots they were interested in, and to make this functional and usable for users, is this approach too complicated for the scope of the project.
Make + Check
The next day, I made two medium-fidelity mockups using Sketch/InVision to test which of the two ideas we would keep moving forward with. On the third day, I gathered the team together to review the two initial prototypes, make adjustments to them, and create our first user research plan. Defining our objectives, questions, user tasks, and methods as a group gave us all clarity and focus to move forward quickly.
After testing each prototype with 5 different users (we used Science staff who weren't involved in the project for testers), Idea # 2 - The GIS-like Map Tool allowed users to more easily and quickly complete the tasks at hand.
Iterate again and again!
After selecting Idea #2 to continue, we structured the next couple of weeks around Think-Make-Check sprints. Below is a visual breakdown of the sprint structure and our results/solutions from user testing during the process.
Final Thoughts + Map Designs
While our team didn't follow the Lean UX techniques perfectly, our adapted version proved to be a valuable framework for keeping development user-centric. Just talking to and validating ideas with users and stakeholders more often went a long way. For future projects, even if we didn't implement any of the other Lean UX principles, I've made it a goal to speak with users and test regularly (at least every-other-week).
Ultimately the interactive field site maps help users locate diverse measurements within NEON field sites, visually understand the unique spatiotemporal sampling design for each site, and get basic metadata information for measurements of interest.
