I worked with Stamen Design to help MPG Ranch make their data more accessible and educational by creating an interface system for research & learning.
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 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.
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.
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
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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