Interfaces for Decoding Dense Environments

the tangible map is installed at the MIT Atlas Center, where it is used to research information retrieval in dense environments

Large campuses and urban environments can prove challenging to get around. At the Design Lab, we sought to empower citizens to explore their surroundings by designing a large-scale hybrid tangible map. Through user research and testing, we were able to show that new users could find directions and directory information up to 60% faster than with text based search portals.

Navigating large institutions is an edge-case where 2 dimensional touchscreen mapping systems break down. Large campuses consist of multilayered data, such as people, rooms, hallways, events and buildings, which may change often and are not publicly accessible. Users explore a tiny fraction of the environment and rely on memorization to build a model of the locations, people and services they use.

CLIENT
SKILLS
  • Project Lead
  • UI Animation & Design
  • Prototyping and Flows
  • User Research and Testing
RESEARCH
RELATED
After designing and testing functional hardware, our team began work on the software interface by quickly building a minimum viable model using a node server and prototyping the features we thought would be most useful. We designed a framework for structured observation and using the results as a cornerstone for future iteration.
Our system relied on constrained input so providing effective feedback to the user was essential. I worked with our front end team to develop satisfying microinteractions and animations in AfterEffects to let the user know when they had activated a building.
Manipulating a large and dynamically generated dataset from the campus required data cleaning and automated processes for builds. After prototyping our assets using Illustrator, we developed a python script to render each building on the MIT campus.
A rough wireframe serves as an audit of every interaction and a joint source of truth for the features we planned to build. Unlike sketches, it's important that multiple team members can see and contribute to the final product.
The user interface was created in Sketch using an atomic design system. We built our own iconography, identity and a card based organism system to standardize the presentation of data.
Using Sketch to generate our card library, we worked with our developer team to populate data from our Node / MongoDB server, creating a vast discoverable interface from the MIT campus internal API.