Research Interface

MPG Ecosystem Interface

I worked with Stamen Design to help MPG Ranch make their data more accessible and educational by creating an interface system for research & learning.

why I show this project

Not all digital design projects can be so closely tied to something as stunningly beautiful as the MPG Ranch. It was a joy to work on something with such a tangible connection to the natural world.

The People

This tool helps visualize the complexity and interconnected nature of ecosystems. It also helps present concrete explanations for how seemingly small changes to these systems can have dramatic results.

The Team

The design system work for this project helped collect interface concepts from months of Stamen's work into a reusable library of elements that laid a foundation for future collaboration.

The Business

This ecosystem modeling tool helps researchers mechanism for researchers at MPG explore the impacts of ecosystem change, as well as communicate the value of their work to external audiences.

About MPG Ranch

MPG Ranch stewards large, undeveloped landscapes for wildlife habitat and the enjoyment of future generations. They conduct research and collaborate with other local organizations and researchers that design and implement outreach and public education events.

Visit Website
my design role

Visual Design Lead

I was responsible for executing all visual designs shown in this case study. I helped develop design strategy and originated the UI styling for the interface. For feedback, I presented to the team at various levels, including design, engineering, and directly to the client.

  • Lead Developer
  • Developer
  • Program Lead
  • Ecologist

Project Planning

  • Assessed existing prototype
  • Proposed design opportunities

UX & Information Architecture

  • Sitemaps & Wireframes
  • IA Diagrams
  • Client presentation

Design Systems

  • Component review
  • Visual brand synthesis
  • Documentation & production

Visual Design

  • Low & high fidelity mockups
  • Interactive prototyping
  • Client presentation

UI Inventory

I explored existing UI patterns, looking for themes in how the prototypes represented MPG data.

I saw an opportunity to create a design system to connect past and future MPG interfaces. I collected and refined a library of interaction patterns to make solved problems immediately accessible for use in composing and testing new ideas.

Pattern Library

I consolidated these themes into a single library for easy implementation and development.

Stamen's prototype system was robust, but this didn't necessarily mean that the system of components needed to represent it was also complex. Once I understood the nature of the patterns and their variations, I found that most of the system could be represented with a straightforward set of components.

User Insight

Once I had a baseline of interface components, I began to analyze the existing prototype for Matrix.

Stamen's Matrix prototype was a vital tool for defining the purpose and parameters that supported my interface design work. Using the knowledge and insight that Stamen had collected from MPG researchers, I defined a problem statement to guide work on the interface design for Matrix.

Interaction Concept

Once I understood the purpose of Matrix, I explored new ways of interacting with the tool.

I worked collaboratively with Stamen to study how MPG researchers were using the Matrix prototype. We found that researchers were regularly using Matrix to run multiple experiments and compare the results. I documented and proposed a workflow to allow researchers to run clusters of experiments, compare the results, and organize them by topic.


I chose to work directly with high-fidelity elements of the design system to compose and present interface concepts.

Especially when a prebuilt design system is available, I find that working with high-fidelity components helps ensure that interfaces look and feel real so that feedback can be as productive as possible.

Design Iteration

We learned that many students and educators are more familiar with diagrams that present species in a hierarchical, vertical layout.

In addition to the feedback I received about user comprehension, I also recognized that a vertical layout would be easier to implement and iterate on than a more complex, radial rendering of the same information.

The Slope Graph

The original prototype displayed the output of each Experiement as a series of numbers, but we discovered it was challenging to get a sense of the magnitude of those changes.

I explored and proposted a visualization method sometimes called a "slope graph" to more quickly highlight which changes in the ecosystem were most dramatic. The result is a quick read to understand which ecosystem elements changed most during the experiment.

Userflow Diagrams

After working with MPG researchers to confirm that the new workflow could be useful, I constructed a user flow around each element of the concept.

A user flow was especially important to this process because the process involved putting labels on abstract ideas that hadn't been named before. Terms like "Experiment" and "Variation" helps our teams align and communicate about interface concepts.

High-Fidelity Design

I created interface layouts that clearly reflected the new structure, using the flow and terms that we'd established.

In constructing the layout for this interface, I was conscious of the fact that our user group works with complexity every day. Even so, I didn't want to take for granted their patience or capacity to memorize detailed workflows. I focused specifically on making sure the new interaction concept revealed itself through visual hierarchy and layout.

Test Planning

Formal qualitative testing was outside the scope of my work with Stamen & MPG. But I prepared a draft testing plan to kick off the process.

My work on the Matrix interface was based on interviews and conversations with MPG researchers as well as the Stamen team. Additionally, the work went through rounds of iteration based on feedback from presentations to the same group of researchers who will use the final tool.

Project Outcomes

My contribution to Matrix established foundations for future work in the form of a component system and a high-fidelity interface design.

One of my top priorities for this work was to leave behind a functional system for quickly assembling interfaces within the product family of MPG data visualization tools. By working with a consolidated library of components, the Stamen team and I were able to iterate quickly in high fidelity to produce an interface that is ready for user testing.


If you're looking for an experienced visual designer with a focus on data visualization, let's get in touch!

About & Contact
I custom-built this portfolio with Webflow - a visual site builder that, despite superficial similarities, is decidedly unlike Wix, Squarespace, WordPress, or just about anything else. I love to talk about the ways Webflow breaks down old silos and improves the partnership between design and development.