VACS Explorer
OVERVIEW
Problem: Earth Genome needed a clear and engaging way to communicate how climate change will affect crop yields in the future. Specifically, they needed an engaging and trustworthy interactive dashboard visualizing dense and complex model data.
Solution: We built an interactive website called VACS Explorer, that allows users to compare crop yields across different climate change scenarios. Users can explore across different visualization types like comparison maps and crop scorecards through toggling variables like emissions scenarios, crop categories, and soil/arability context. The tool is built for anyone to understand, whether it's a lawmaker at a policymaker conference or someone just curious about how climate impacts food.
As a product designer on this project, my team and I:
Defined the overall user experience and visual design for the VACS Explorer dashboard
Iterated on user flows to optimize the user experience
Translated complex models into visual data forms that balance scientific credibility with approachability
Designed map and chart components to help users compare crops, regions, and climate scenarios
Collaborated closely with data scientists and developers to refine interaction patterns
Built responsive designs that were optimized for both desktop and mobile versions
PROBLEM
Building a tool for anyone to understand how climate change will impact food sources
To kick off the project, we had the client define what success looked like in their eyes. This is always a helpful way of aligning our expectations at the start of the project as well as getting a better sense of what we are solving. It also serves as a benchmark to measure ourselves by as we progress through the project.
Failure
Success looks like avoiding 100% of these
Data isn’t legible or clear
User experience is confusing or frustrating
Homepage is visually unappealing and deters users
Data loads slowly or not at all
Minimum Success
Success means achieving 100% of these
Data helps guide decisions and understanding around more resilient food system
Data shows phase one selection of crops
Story is clear by the State Department to understand VACS work
Crop profiles are accessible
Homepage dazzles!
Target Success
Success means achieving 40–60% of these
Tool is used to inform decisions that fundamentally boost agricultural productivity and nutrition
Users come away understanding how crops may fare given different climate scenarios
Users have an idea of crops that may fare better given different climate scenarios
Tool appeals to users/readers from many backgrounds
We also created a few user questions that we wanted to design the experience around. When engaging with the data, we wanted to guide our users towards investigating the following:
How will climate impact food security?
How does soil impact food security?
What crops are worth investing in?
How nutritious are the crops that are performing best?
Why should I care about this problem?
DISCOVERY
Diving into the data to uncover meaningful patterns and shape the narrative
We started by looking at the data to determine which variables were most important to the story and our users. While the data was based on African crops, the story is more about how climate change will impact crops generally. Therefore, we wanted to make sure the story wasn't too specific to Africa and instead focused on the overarching variables, like climate, crop, and region. We used the following questions to guide how we presented data around those variables:
Climate: How will climate impact the environment in terms of temperature, water, moisture, etc.?
Crop: What crops grow here, what is their nutrition content, and how will climate change alter their yield ratio?
Region: How do crops and climate change vary across a wide landmass?
With these questions in mind, we spent some time internally brainstorming different visual forms in Figjam:
USER EXPERIENCE
Designing a user experience to simplify exploring complicated data
Once we had explored the data ourselves, we collaborated on a user flow that could help define the narrative in the interactive data experience. We outlined where to surface and data forms and story points via user entry points, questions and decisions. This allowed us to imagine how we could intertwine visual storytelling and data exploration in the product experience.
We went through several iterations of wireframes to arrive at our final design. While our first wireframes were promising, when we took a step back, we felt like the experience fell too flat, as it kept the user in the same map view the entire time. Reusing the same map form to show different types of datasets was also asking a lot of our non-technical users as it wasn't necessarily the best form for each point.
See our initial mocks made in Figma below:
We decided to add a page meant mostly for searching and exploration in which users can view all the crops side by side in small multiples. Users can sort crops by variables like nutrition content or climate change scenario. They can also hover over a crop and read a small description before clicking on one crop and diving into the main map devoted to that crop.
The single crop page focuses on the data of that one crop in the context of other similar crops. Users can see how yield rates will increase or decrease across a region in a climate change scenario or even choose to compare the selected crop to other crops in its group. From here, users can explore new crops within the same window or go back to the crop search page.
See our final mocks below!
MOBILE DESIGN
Optimizing a complicated data-driven product for a mobile experience
Earth Genome specifically wanted to display QR codes in presentations and informational materials around the subject matter. This meant that a large entry point for new users would be mobile. In our very condensed timeline, we made sure to spend a week or so designing an elegant mobile design that was still functional in viewing the data.
VISUAL POLISH
Adding a few finishing touches to the product
Given the complicated and heavy subject matter for this project, we intentionally allotted a section of the timeline to visual polish, as we wanted the product to be both user-friendly and beautiful. To achieve this, we spent time working on the following features and details:
Adding a sand and soil mode, to provide detail as to why data is not collected for places too dry for farming, like the Sahara Desert
Creating a colorblind-friendly mode to change the data color schema for accessibility
Providing information modals that define and add context to complicated terms, such as yield ratio
Flagging benchmark crops to help users compare unfamiliar crops with those that are more common
Creating a visual design that was striking, clean, and data-forward
