How can technology help us tell erased histories?
Role: Front-end engineer and UX designer on an interdisciplinary research team (Brown University I-team UTRA) 
Purpose: An online exhibit and memorial -  Mapping Violence is the main project of Brown's inaugural I-team UTRA. It was done through the American Studies department and spearheaded by Professor Monica Martinez. Mapping Violence seeks to memorialize victims of racially motivated violence in South Texas in the early 20th century. Our goal was to create both an online exhibit for education and a digital memorial to the victims.
Tools Used: JavaScript, HTML, CSS, leaflet.js, Adobe XD, Sketch, paper prototyping 

PROCESS 
Personas: We began by identifying possible user profiles. Professor Martinez and I identified three main types of users or "personas": a Local Resident, a Historical Researcher, and a High School Student. 
What do these people need from our exhibit?
We decided that the best way to present this historical information for all of the user groups is in the form of an interactive digital map with curated content. 
Paper Wireframing: Next, we researched different forms this mapping project could take. We looked at other digital historical exhibits and put together a couple wireframes showing different options catered to different needs. 
One of the many frames in the early storyboards
Interactive Prototypes: After narrowing down possible layouts, the next step was to create a clickable prototype. I used Adobe Illustrator to make high fidelity mockups and loaded them into Invision to make them interactive. I performed a series of user tests and internal presentations on these interactive prototypes in order to arrive at the (semi) final design. 
These are two frames of one of the interactive prototypes that experimented with a darker color scheme. After user testing, we ended up dropping this option due to readability problems on older screens and devices. 
Now to actually code the website! I built the mapping visualization using leaflet.js, HTML, CSS, and JavaScript. I loaded in all of the description and location data through API calls. All of the data was gathered by the rest of the research team earlier in the summer. Since the current map is still unavailable to the public, the following screenshots are of the live website I demoed in a design presentation and user-testing session in the end of August, 2016.
From the user testing session, we discovered that the muted background might still have some visibility issues. We also discovered that the icons in the top right are not very useful - especially with older audiences who may be unfamiliar with common iconography. Our next version scraps the icons and replaces them with text labels. 
Later iterations also include guided tours and lessons through the historical events, as well as the ability to filter through the metadata. 
Back to Top