MIT Museum
An online destination that reflects the museum's incredible new home
Cambridge, Massachusetts, USA
- Flexible, modern website that facilitates conversation on technology’s impact on our world
- Introduces an exciting, accessible rebrand online
- Publishes rich data for thousands of objects, people, and vessels from the eclectic MIT Museum collection for the first time
Established in 1861, the Massachusetts Institute of Technology (MIT) is at the forefront of education and research. Its mission is “to advance knowledge and educate students in science, technology, and other areas of scholarship that will best serve the nation and the world in the 21st century”. Among its graduates are the inventors of some of the most important technologies used in the modern world including digital circuits, radar, and the World Wide Web.
The MIT Museum was founded in 1971 to facilitate the collection and preservation of historically important objects from MIT. Through these objects, the museum has been able to share the history of the university and its huge impact on the development of modern science and technology both within the MIT community and with the wider public.
To coincide with the museum’s move to a new building in Kendall Square and a rebrand by designer Michael Bierut of Pentagram, Cogapp has built a new website ready to support the museum through the next chapter in its history.
In close collaboration with the MIT Museum team, Cogapp has delivered an online expression of the museum through an on-brand, accessible and performant website. It is powered by a content management system built for the exciting future of MIT Museum. It’s now a simple task to craft interesting and engaging content for MIT Museum’s diverse audiences. Whether you are an in-person visitor or an expert researcher, the website is both simple-to-use and truly captures the experimental ethos of MIT.
Building a better online world for audiences
MIT Museum strives to be a place where science, technology, the humanities, and the arts combine to frame and reframe problems, addressing the compelling questions of our time in new ways.
It is a cultural attraction, a teaching and learning resource, and a convener of critical conversations about science, technology and society.
It serves both physical and digital audiences with the mission of “Making research and innovation accessible to all.”
A landmark project like this needs guiding principles that the entire team can look to when making decisions. Cogapp spoke with key stakeholders and conducted user research to help draft a project vision that captures the overall character and aims of the project. Our work ensured that the website redevelopment works in tandem with the organisational strategy and supports the wider aims of the museum as it embeds itself in its new home.
During our discovery process it became clear that the MIT Museum is an institution with a strongly felt, shared purpose. This purpose was distilled into a clear vision statement that helped guide us throughout the project and was considered when making every decision:
“The MIT Museum website will open the door to the exploration and exchange of ideas at the intersection of science and art, innovation and research.
It will be thoughtful, experimental, approachable and inclusive to all, encouraging active deliberation online and on site.”
Online collection
The MIT Museum collection contains a huge variety of objects covering topics such as artificial intelligence, maritime history, as well as the world’s largest collection of holography. Our solution exposes this amazing wealth of material through a powerful and accurate search interface. This interface offers extensive metadata for researchers alongside high-quality images with deep-zoom capability.
Exploring connections through rich metadata
More of the MIT Museum collection is online than ever before. Previously users could only browse objects. Now people, organisations, and vessels are all treated as first-class citizens in the collection, with their own dedicated pages.
The rich connections between objects, their creators, and manufacturers are made visible through a relations section on every page, encouraging exploration.
Collection search
Building an intuitive interface for searching such a diverse collection was one of the key challenges of this project. Iteration was key, starting with simple wireframes, progressing to prototyping in code, before ending up with the final result.
It was important to support a wide range of use cases: those with highly specified interests should be able to find what they’re looking for quickly; those first-timers from a more general audience should enjoy browsing. We worked with the museum’s collections team and real users to come up with a solution which delighted both groups.
The Exchange
Building upon the desire to encourage active deliberation and the exchange of ideas, we proposed The Exchange; a section of the website dedicated to long-form stories. This was inspired by, and shares a name with, an area in the new museum building dedicated to discussing the impact that science and technology have on the wider world.
Stories use items from the museum’s collection, or a moment in MIT’s history, to start a broader conversation. Because of our work integrating the museum’s collections into the site, objects, organisations, people, and vessels can be woven directly into these stories to support the narrative and encourage further exploration.
To facilitate a conversation, each story concludes with a question and an eye-catching record button, encouraging readers to add their voice to the debate by recording and uploading a video.
The first batch of stories includes an exploration of the history of graphic design at MIT and its influence on the rebrand by designer, Michael Bierut.
Why not go to The Exchange and have your say on the topics being discussed?
Building a better online world for MIT Museum
Design
We worked with the branding agency, Pentagram to implement the museum’s new brand. At the heart of the updated brand is the new logo, which evokes the spirit of MIT through its modular form. We use the full logo on the homepage as a framing device for an animation highlighting some of the museum collection's many unique items. The smaller monogram variant is used throughout the site in various orientations.
With such a bold brand, it was important to maintain consistency. Based on a detailed spec from Pentagram, we developed a strict style guide for adapting the brand for the web. This included rules for logo usage, typographic scale, and colour palettes.
We used this style guide as the basis for a library of reusable components. Taking a component-based approach allowed us to test each component for accessibility issues in isolation before use on the site. We also integrated automated visual regression testing into our development workflow to pick up any unexpected changes.
The brand includes a variety of secondary colours which are used sparingly throughout the site to support the core black and white palette. We have combined this with the motif of geometric shapes as a way of drawing the eye to photographs of objects in the museum’s collection.
Technical approach
A key aim of this project was to modernise the infrastructure that supports MIT Museum’s digital estate. This project will serve the museum as it transitions to its new home and, going further, will support future plans with the flexibility required for an agile, experimental organisation like MIT Museum.
Our decoupled approach means that future integrations of new systems, as well as any potential redesigns, will be architecturally straight-forward and build on the foundations delivered by this project.
The main components of the system are:
- Headless Craft CMS install
- Collections API
- Frontend website built in Next.js
We chose Next.js as the framework for the front end of the website because it lets us easily pull in data from multiple sources. The CMS and the Collections API both use GraphQL, providing a fast, flexible method to combine data from both sources on demand. Next.js also includes features like Static-Site Generation (SSG) and link pre-fetching to make page loads feel instant.
Using Craft CMS in ‘headless mode’ allowed us to separate the front-end technology from content management without sacrificing any aspect of the authoring experience, including live previewing of draft pages.
Our work is also adding value inside the museum: the CMS powers the screens above the admission desk. These are fully editable via the CMS and are synchronised with the calendar shown on the ‘Week at a glance’ page to ensure a single source of truth for events. Editors can also curate a slideshow for display on the screens by selecting from the asset library.
This decoupled approach makes it easy to add other components into the mix. It also offers the ability for external systems to read information from the collection or website content to encourage consistency, reuse, and remixing of existing content.
Collections system
Collection objects are harvested directly from MIT Museum’s collection management system, Mimsy, and made available via a custom GraphQL collection API. They are also loaded into an Elasticsearch datastore to power the collections search and enable real-time filtering of search facets.
Integrating the collection and the content
Combining the museum site content with collections on one website for the first time delivers a more cohesive journey for visitors. It encourages staff at the museum to think holistically, beyond internal departments.
The MIT Museum collection brings together a hugely varied selection of objects, across many major and named collections. Content editors at the museum can build landing pages for each of the collections to explain their history and highlight some of the most interesting objects.
By integrating collections more closely with other website content, our work empowers editors to integrate one or more chosen collection objects directly into content pages across the site. Selecting multiple objects renders a slideshow component which visitors can navigate through without leaving the original page.
Creating an environment where everyone can do their best work
The project took place during a time when Cogapp began to transition from fully remote working to a hybrid working model. While the team at Cogapp are well-versed in remote working, we still value the opportunity for our project teams to get in a room together. It was particularly useful for exploratory ideas sessions and the more visual aspects of the project.
Our Agile methodology split the project into focused two-week sprints. Internally, we had daily stand-up meetings to ensure that each member of the Cogapp team was fully supported to achieve their goals.
To keep everyone at the museum up-to-date with the process, we held demos via Zoom at the end of each sprint.
During these demos, each individual member of the Cogapp team would demonstrate the work they had completed during the previous two weeks and the team at MIT Museum were encouraged to give feedback and ask questions. We recorded all of these demos so those not able to attend could catch up in their own time. We also gathered asynchronous feedback via email and Pivotal Tracker, our shared project management tool.
In addition to sprint demos, we had weekly Zoom calls with the client. These provided opportunities to discuss any issues or ideas in a timely fashion, face-to-face.
This spirit of collaboration was further explored during a joint Cogapp / MIT Museum Hack Day where we worked together to come up with creative ways of interpreting the museum’s history, brand, and collection.
We look forward to supporting the MIT Museum team as they countdown to the reopening of the museum in its new home and beyond.
MIT Museum website
Find out more
We’d love to speak with you about our work, please get in touch.