Mississippi River Research Barge

Research website and map application for the Mississippi River

Synopsis:
CLIENT
John Kim in partnership with Macalester and Luther Colleges
DATE 
2019 - 2020
TEAM
John Kim - Product Manager
Zachary Bucek - Product Designer and Developer
Ellen Graham - Data Visualizations
MY ROLE
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 
PROJECT OVERVIEW 
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 load data dynamically into the evolving narrative of the river and its many confluences. 
WEBSITE FRAMEWORK
Node/Express/MondoDB
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. 
NOTABLE OUTCOMES
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.
Process:​​​​​​​
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:
INFORMATION ARCHITECTURE
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.

The core dual design between the admin and public interface remained a constant, while the tab interactivity shifted to the new Projects page as some of the IA for the app evolved. 

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:
HIGH-FIDELITY MOCKUPS
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:
Homepage - Desktop
Homepage - Desktop
Homepage - Tablet Landscape
Homepage - Tablet Landscape
Homepage - Tablet Portrait
Homepage - Tablet Portrait
Homepage - Mobile
Homepage - Mobile
INTERACTIVE HIGH-FIDELITY PROTOTYPES
Finished Product:
PUBLIC VIEW
Homepage
Homepage
Ongoing Projects Tab
Ongoing Projects Tab
Data Sensing Project Expanded View
Data Sensing Project Expanded View
Research: People - Single Page
Research: People - Single Page
Research Page
Research Page
ADMIN VIEW
Homepage
Homepage
Sites Page
Sites Page
Edit Site Page
Edit Site Page
Past Projects Tab
Past Projects Tab
Completed homepage with map application:

MORE PROJECTS:

Back to Top