1 Apr 2022

Believing is seeing: Why a world-class museum of visual culture chose headless Wagtail

Meet Nicolas Leung from M+ in Hong Kong and discover how they used headless Wagtail to build the perfect digital foundation for their brand new museum.

Nicolas Leung

Developer, Digital Programme, M+
M+Museum

Back to early 2020, we had just completed the user experience and visual design phase for our new museum website and were ready to look for a content management system (CMS). As a museum of visual culture, it is essential for us to have a world-class museum website that reflects its status as a leading institution, both inside and out.

Although we approached design in a modular fashion, we did need to acknowledge the size of our site. The initial design had over 25 different templates and more than 20 different content blocks or components to construct pages. With a goal to manage this huge number of templates and components effectively, we started thinking about having a CMS that would allow us to create page content by selecting different components or content blocks and organizing in whatever ways. Flexibility for the editors on our internal museum team to easily manage content was incredibly important.

While in search of this flexible CMS, we looked far and wide at options such as Django, Drupal and Wagtail. We knew that we were ideally looking for an open-source, well-supported platform with scalability for future growth. After conducting quite a bit of research and demo-ing different systems, we ultimately decided that Wagtail was the best fit for our team. We were convinced that the StreamField function from Wagtail would provide the required flexibility when creating content pages, allowing us to add different components and arrange them freely. Unlike other CMS platforms, Wagtail gave us an immediate first impression that it was a CMS designed with editors in mind—the UI was clean, intuitive and we were not overwhelmed by all the system configurations. In the end, our CMS would be used by editors daily and it was very important to have an easy-to-use platform to keep them happy.

Our Project - M+ Website

This is a screenshot of the M-plus museum website homepage.

Diving into the technical side, we proposed keeping the “headless” architecture, which separates the frontend and backend systems, we had previously used in our earlier platforms such as M+ Stories and the interim M+ Landing Page. This separation helped us centralise our web content and the content can be served to different front ends. This also separated the development and we could bring the best out from the backend team and frontend team. Fortunately, by default, Wagtail came with a REST API for us to get the CMS content that fit our “headless” architecture perfectly.

While Wagtail fit our main requirement of allowing us to create page content effectively and flexibly, we also had other requirements such as:

  • Multilingual support for English, Traditional Chinese and Simplified Chinese languages
  • Auto-translation functions using Google Translate
  • Multiple system integrations with systems used across the museum and wider West Kowloon district such as CRM, ticketing system, single sign-on, museum collections database system, video management system, and many more!
  • Ability for CMS content to be consumed by other system for display or use
This screenshot shows how Wagtail seamlessly supports traditional and simplified Chinese in both the editing view and the final page.

Many of these did not come included in the “standard” Wagtail package or existing Wagtail plugins. However, the team from Torchbox made all this possible with additional development. Wagtail is so highly customisable that with a few “tweaks” here and there, we now have these functionalities in our M+ Wagtail setup.

One particular challenge we had was to migrate all the content from our pre-existing M+ Stories platform to M+ Magazine, a core section in the new website. Thankfully, this new, robust, easy-to-work-with CMS made this migration seamless and smooth. The internal editorial team was able to quickly immerse themselves in the intuitive CMS, with minimal training required.

Reflections & the future

Now, we will be working with Torchbox to upgrade the M+ Wagtail system to provide new functions, content blocks, and most importantly, enhance the CMS to provide an even more pleasant editor experience to focus on content. This has been such a great digital foundation for the museum to open with, and we’re excited to plan for more to come!

Help improve wagtail.org clipboard icon Help improve wagtail.org