lab map — a tool to visualize teams and projects in a multi-disciplinary research lab

labmap1

At MIT Senseable City Lab, 40 researchers from various backgrounds are working on more than 20 differents projects. 

We thought a tool to map out who is working on what could be useful. So we built it!

01

connecting people and projects

The first step was to decide what we were mapping. Projects and people were obvious. We first considered mapping skills but we quickly realized that skills change a lot from one lab project to the other, adding inessential complexity to the map.

We selected the main lab projects and started testing different visual methods to connect the lab members and their projects. We started by drafting with pen and papers and from there moved on to Adobe XD using the Senseable City Lab visual identity.

labmap3
labmap4

Our first intuition came with the observation that there are more researchers than projects. We arranged the names around a circle facing the projects placed in an inner circle. Once prototyped we realized that it created lines hovering project names, even when looking at one project at the time. This was far from ideal.

After the circle exploration we moved to the half circle, easier to read — no more weird vertical text spacing — and without lines hovering text.

After a couple of tests, we imagined the vertical extension above the project’s names as a way to increase readability. That visual solution became an important part of the visualization identity.

labmap5
labmap6
labmap7

02

delivering
the right information

As we were making progress on the visualization we started working on the tool’s architecture. We designed the visualization as the main way to find a precise information about a researcher or a project in the lab.

To get all the information about projects and researchers we started building the visualization using D3.js connected to the SCL database.

labmap9

We designed a left menu to include the Management team, who could have been connected to every projects. We implemanted a larger right panel displaying stacked information about the projects and the researchers.

To increase readability we designed a focus state in the visualization allowing to see only one researcher or project at the time by reducing opacity for everything else.

labmap10

03

refining
the UI

Until that last step we worked on an ideal scenario: with a small number of projects, and a complete data base. We began refining the interface by asking ourself what could happen in reality over time, outside of the ideal scenario.

We started by designing several placeholder icons in case we missed a researcher’s profile picture or if a project was too early on to have any visual component.

labmap11
labmap12

Assigning one color to each project could have worked for a small number of projects, but it was not the case anymore. So we decided to only use SCL visual identity’s green as the main accent color with a dark grey. The opacity helps differenciating one project to the other in focus mode.

The refinement was also about finding the right title for the tool, a title that could explain what to find there, today, as the lab map is evolving almost everyday.

labmap13
labmap14

WHAT WE LEARNED

We presented the map to the lab members and got valuable feedback (a why am I not there? effect created a major and welcome update in the database). We presented two options: a light and a dark mode. The second one, with a grey background, white text and the strong SCL green was prefered.

Since the deployement in March 2018 we saw lab members looking at projects and teams and even lab’s applicants photoshoping their name on it! The project allowed us to developp our data visualization, prototyping and coding skills. From building this map we learned a lot about the lab and its members!

© MIT Senseable City Lab 2018

Design: Louis Charron
Design & Development: Lylla Younes

© louis charron 2018 — built with Semplice