Mississippi River Project



What would an interactive web app look like for “remapping” the Mississippi River with users’ personal stories?



Keywords
UX, UI, Interaction Design

Tools
HTML/CSS, Javascript/JQuery, Node.js, MongoDB, GoogleMaps API, MapBuildr, MapStylr





Web App Overview

I wanted to create an interactive web system that would show a different side to the Mississippi River than most geographic renderings do. This prototype was a way for me to exercise my love for visual design with an interactable user interface, as well as to combine the user research I conducted for a more compelling, empathetic UX design. 
Web 


User Research + User Interview

By conducting an interview with Mr. Mike Clark, a contemporary navigator and explorer of the Mississippi and founder of Big Muddy Adventures, I learned that the Mississippi River can be understood as a system through the many perspectives of people navigating it over time. His insights on the river, coupled with my literary research on Mark Twain, helped me refine the concept and let the personal stories drive the UX of the web app.
 

I pinned visual design sketches (vintage logos, aerial views of the river, geographic renderings) as well as secondary research (Mark Twain literature, articles about the river, etc.) onto an inspiration board that I often referred to during the design process.

User Input

The project comes to life with user interaction. If a user has a story to tell, he/she is able to enter their name, pick from one of the river's three main divisions (Upper, Middle, or Lower), and their story. Clicking "Submit" automatically refreshes the page and the GoogleMap allows you to zoom in and scroll up or down in order to locate your pin.




_PROCESS_



MongoDB

The prototype for the web app is designed so that users can continually record their stories. Using MongoDB was a helpful tool for prototyping this technical constraint and for me as a designer to create a database to see what a collection of stories could look like over time.




Low-Fidelity Wireframe

The project had already taken shape as a small poster sketch, so a lot of the visual elements (such as the logo and color scheme) were re-appropriated for the web context. This low-fidelity wireframe roughly begins to outline all of the information I needed present for the page. 



High-Fidelity Wireframe


The hi-fidelity wireframe begins to design for scale, propose a web-friendly font selection, and integrate finished copy rather than use dummy text. The primary colors are also integrated in these high fidelity wireframes to start seeing how the visual design sets a tone for the overall web app. It is always easier to iterate on the visual and UI design once it is seen interacting with all of the other elements on the page.

 


^ When the cursor hovers over the start screen logo,
the logo fades into full opacity.




^The user input is shown above, animated as it appeared in the prototype.