VACS Explorer
UI/UX & Visual Design • Desktop
I designed a web tool for Earth Genome that surfaces complicated data about the agricultural impacts of climate change by modeling crop yields under different warming scenarios.
Overview
GORGEOUS.
– Earth Genome
Role
Product designer
Team
5-person team
Timeframe
About 3 months
Client
Earth Genome
Company
Stamen Design
Check out the live project or read the blog post I wrote for Stamen Design 👀
Outcome
Demoed at the 2024 United Nations Climate Change Conference in partnership with the Vision for Adapted Crops and Soils
Made dense climate-model data intuitive and meaningful by defining a clear UX and visual design
Enabled faster insight through streamlined user flows that minimize friction
Translated complex models into visualizations that feel scientifically credible yet approachable
Helped users compare crops, regions, and climate scenarios via interactive map and chart components
Enhanced usability by collaborating with data scientists and developers to refine interactions
Optimized accessibility across devices with responsive designs for both desktop and mobile
Problem
Designing for all users to explore how climate change will impact food sources
To star 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. We defined key user questions with the client to guide the design such as:
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?
Failure
Success looks like avoiding 100% of the following
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 the following
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 the following
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
Discovery
Uncovering meaningful patterns in the data to shape the narrative
We began by examining the dataset to understand which variables mattered most to both the story and the user. Although the underlying data focused on African crops, the broader narrative centered on how climate change affects crop yields overall. To keep the experience relevant and not overly region-specific, we anchored the design around a set of overarching variables that shaped how the data was presented:
Climate: How will climate impact the environment in terms of temperature, 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?
User flow
Outlining a user experience that invites exploration of complicated data
After exploring the data firsthand, we collaborated on a user flow that shaped the narrative for the interactive experience. We mapped user entry points, questions, and decision moments to determine where key visualizations and story elements should appear. This helped us plan how visual storytelling and data exploration would work together throughout the product.
Wireframes
Iterating through different data viz forms and interaction patterns
We went through several iterations of wireframes to arrive at the final design. While our initial wireframes showed promise, the experience felt flat when viewed as a whole, as users remained in the same map view throughout. Relying on the map to display multiple types of datasets also placed unnecessary cognitive load on non-technical users, since it wasn’t always the best format for every dimension of the data. Below are snapshots from our wireframing and visual design process:
Snapshots from the wireframing process 📷
Visual design
Allowing surface-level and high-level investigation of crop yields
The final product features a page where users can search and explore crops side by side using small multiples. Users can sort crops by variables such as nutritional content or climate scenario, hover to read brief descriptions, and click on a crop to dive into a dedicated map for that selection.
On the single-crop page, users can examine detailed data for the chosen crop, including projected yield changes across regions under different climate scenarios. They can also compare the selected crop to others in its group. From this view, users can continue exploring new crops within the same window or return to the crop search page.
Mobile design
Optimizing a complicated data-driven product for a mobile experience
Earth Genome wanted to include QR codes in presentations and informational materials, making mobile devices a key entry point for new users. Within our tight timeline, we dedicated a week to designing an elegant mobile experience that maintained full functionality for exploring the data.
Extra features
Adding features for additional context to fill in the gaps for users
Given the complexity and weight of the subject matter, we intentionally allocated part of the timeline to visual polish, aiming to make the product both user-friendly and visually engaging. To achieve this, we focused on several key features and details:
Added a “Sand and Soil” toggle to explain why data is unavailable for areas too dry for farming, such as the Sahara Desert
Created a colorblind-friendly mode to ensure accessibility through an adjusted data color scheme
Provided information modals to define and contextualize complex terms, like yield ratio.
Flagged benchmark crops to help users compare unfamiliar crops with more common ones
Developed a clean, data-forward, and striking visual design that highlighted insights while maintaining clarity
