John Kim in partnership with Macalester and Luther Colleges
2019 - 2020
John Kim - Product Manager
Zachary Bucek - Product Designer and Developer
Ellen Graham - Data Visualizations
As Product Designer, I led the team through the design thinking process steps of empathizing, defining, ideating, prototyping and testing.
The key components I created:
- Web framework with a CMS
- Complete visual identity and design system
- Customized Google Maps embed with custom location icons
- SVG animation for landing page
The Mississippi River Research Barge is an ongoing research venture about the Mississippi River system within the context of the present Anthropocene Era. This collaborative project combines academic research with fieldwork both on the river and at numerous sites throughout the basin region.
MRRB explores both historical and contemporary themes with an emphasis on interdisciplinary research, trans-local collaboration, cross-sectional work, and critical regionalism.
With an emphasis on mapping and data-visualization, each of the project contributors upload data dynamically onto the website and into the evolving narrative of the river and its many confluences.
DEFINING THE PROBLEM
There are many research partners involved in this project throughout a vast river and basin region.
With such a multitude of contributors, along with the quantity and variety of information being gathered, the challenge was to create a platform to sustain heterogenous data and areas of inquiry while also presenting a cohesive identity and resource for non-experts.
IDEATING THE SOLUTION
A flexible content-management-system make contributions by project partners smooth and efficient.
An interactive map that clearly organizes research projects by type is a resource for both contributors and students to discover and share new information quickly.
Partners and content creators were able to update information and data from ongoing research efforts.
The website was used as a promotional tool for grant applications and important funding initiatives.
LOGO + IDENTITY
The BARGE logo took shape over many discussions with my collaborator John. They started with rough sketches transposed onto grids, morphing into various iterations in Adobe Illustrator. For John, the barge was more of a signifier of the research project than a description of its methods.
The logo embodies both a barge-like vessel and the shipping containers they carry. The BARGE logo represents the project as a nexus of ideas from a multitude of peoples and geographies living in the Mississippi River basin region.
Completed SVG Animation rendering on homepage loading:
We created simplified UI patterns and workflows that could provide fluid experiences to both public and administrative users of the application.
I leveraged the Model-View-Controller software design pattern from the Node/Express framework to allow an easy switch of editable UI elements dependent on authentication.
LOW-FIDELITY WIREFRAMES & RAPID PROTOTYPES
I begin every project with pencil on paper, often returning to drawing through the planning and strategy phases as new ideas emerge and priorities shift.
Below are wireframes worked up in Balsamiq, creating an easy transition into hi-fi and interactive prototyping:
This early mockup of a map-based visualization draws correlations among areas of inquiry that share particular category/theme tags:
Custom icons were developed to replace the standard Google pin for "People", "Research", and "Institutions":
Early responsive mockups to test look and feel of identity on the homepage:
INTERACTIVE HIGH-FIDELITY PROTOTYPES
Completed homepage with map application: