Web Development: MIT Lincoln Labs

MIT Lincoln Laboratory was one of our most recent design and web development projects - launching in July of 2018. And since the website has gone live, it has garnered a bit of attention for the quality of the design, as well as the detailed custom development that went into the site, especially the interactive Research and Development tool.
mit lincoln lab website in devices

MIT Lincoln Laboratory was one of our most recent design and web development projects – launching in July of 2018. And since the website has gone live, it has garnered a bit of attention for the quality of the design, as well as the detailed custom development that went into the site, especially the interactive research and development tool.

On the MIT Lincoln Laboratory project I, as the head of development, was the lead front-end developer responsible for the theme of the new Drupal 8 site. I am an open source developer who focuses on PHP/CSS/JavaScript and have over 12 years of experience in web development.

IA/UX Planning

When MIT Lincoln Laboratory came to iFactory, one of the biggest priorities that they had for us was to restructure their existing content. And we had to find a way to showcase how different departments, projects, and staff relate to one another. Our IA team was able to collaborate with the team at MIT, as well as work closely with our designers and developers to find potential solutions for the problem the lab was facing.

We went through a few stages of iteration in the beginning – we knew we wanted to make a custom web development tool – but it was just a manner of determining the best interface for users to interact with.

Custom Web Development Stages

We juggled various solutions, from a scrolling bar that users could search through, to a natural language filter.MIT Lincoln Labs comprehensive content map. MIT Lincoln Labs planning. MIT Lincoln Labs sensors program information. Image of MIT Lincoln Labs program selection tool.

Photo of sphere of influence in the MIT Lincoln Labs project.
Photo of sphere of influence in the MIT Lincoln Labs project.

The different designs were all interesting, unique concepts, and helped tell the story of the Laboratory while explaining the relationships between the different groups. We researched and sketched out each concept and pitched them to the client, until we were able to settle on a design that pleased everyone.

[IMAGES OF ALL THE POTENTIAL DESIGNS W/ CAPTIONS DESCRIBING EACH ONE]

Final Design

In the end, we decided that the most effective solution we were able to come up was actually one of our simplest designs. We loved the engaging user interface that demonstrated complex relationships between departments, projects, and scientists at the laboratory. The adapted wheel and spoke method drew lines between departments, projects, and team members.

My team went to work pulling data types surrounding each ‘point,’ and rendering the information to show relationships between them. We discovered, that with the real estate available, that we would run into the problem of having too many points to fit neatly on the circle. We settled on a maximum 20 points. With an approximate maximum division of points at 10 Research and Development groups, five team members, and five projects for each department. If a particular department had more or less than the expected number, the tool would pull in enough to create as full of a full circle as possible. The communications interest is a great example of an incredibly full sphere, while bioengineering has relatively few points on the circle.

Mobile Consideration

Another consideration that we had while working on this project included making sure the design would be mobile accessible, and visually appealing on a smaller screen. We needed to prioritize the same relationship feel that we created on the desktop version. And we met this goal by slightly editing the tool to still result in the same sharing of information.

Drupal

The MIT Lincoln Laboratory website was built in Drupal 8, which is one of the main systems we work with, due to the customizable features and sleek interface. For the R&D tool, we leveraged Drupal to create an API to make an endless display that updated automatically as new data was added to the Laboratory Website. We also used Vue.js, a progressive framework for building user interfaces. This allowed us to build the MIT Connector from the ground up, and fit the criteria that MIT Lincoln Laboratory needed from us.