How can a website provide a curatorial platform for a museum in progress? Working with the curatorial team of M+, the museum of visual culture in Hong Kong, we developed a digital platform that prefigures the museum. Opening in 2019, M+ will be one of the largest museums of modern and contemporary visual culture in the world. M+ Stories presents a wide range of commissioned content, each with unique presentation challenges. Blog, journal, video and online exhibition sections are each underpinned by an associative tag driven logic that opens the museum’s content and collection to the world.

Brief

We were commissioned to design M+ Stories four years in advance of the opening of the museum. Our brief was to create a platform for a museum in progress and to envision, experiment with, and implement a host of new digital strategies for the future institution. These strategies would later lead to institution-wide digital and content strategies encompassing branding, UX and content development. Through a sustained collaboration with the curatorial, digital, marketing and IT teams we worked to give shape to the museum digitally before its physical construction.

Mobile First

A study published by Google found Hong Kong to have the highest mobile internet usage rate in the Asia Pacific region. Referencing this report, our project initiation document called for equivalent user experiences across mobile, tablet and desktop devices. All functionality and content available to desktop users is accessible when viewing the website on mobile devices. As mobile connections are data sensitive, the site avoids downloading extraneous content. Images are loaded only as the user scrolls towards them. Similarly code required for each section of the website is delivered just-in-time.

Explore

The explore section allows users to browse content, such as articles, videos and microsites, from across the site by topics and themes. The user can interact with tags by selecting or entering a search query or responding to predictive suggestions. All content that exists on the platform is associated with one or many tags, allowing the website to intelligently suggested related content as the user navigates through the website. The M+ digital team can also feature collections of tags, such as Emojis, People, and Mediums.

Podium

Podium is a new online magazine of visual culture edited by the M+ curatorial team. Unlike the traditional editorial cycle of publishing sequential issues, Podium articles are posted over time to thematic issues. As a result multiple issues can be open at once. The authoring experience has been built around the needs of the editorial team, providing the tools to create dynamic layouts with embedded images, videos and social media content. Given the long form nature of the content, a visual indicator highlights the users’ progress, loading articles dynamically as they advance through each issue.

Channel

Channel is the moving image archive of M+. This space brings together newly commissioned video series and stand-alone episodes. The Channel section draws in content from the museum’s third-party digital video content platform, utilising a customised video player which automatically detects the user's language preference to provide closed captions.

Language

The cultural specificity of Hong Kong has informed our approach to language and typography. Throughout the website headlines are displayed in the the region’s two official languages, English and Traditional Chinese. As the website is built as a single page application, all text can be translated between English and Chinese extemporaneously, without the need to reload.

Technology Stack

Our approach to M+ Stories combines our deep cultural knowledge with an exceptional understanding of modern technology. The front-end of M+ Stories is built as a single page application using Vue, a progressive user interface framework which allows the website to function more like an app than a traditional website. We used a comprehensive build process to deploy the website ensuring backwards compatibility across browsers. The application is progressively loaded as users navigate through the website.

Unlike most web apps, where the page content can only be viewed after multiple requests to the server, M+ Stories employs server-side rendering ensuring that all content is loaded on the first request. This results in faster time-to-content and reduced drop-off rates, especially on slower internet connections. An additional benefit is that search engines can more efficiently index the website content.

The content management system was built using a highly flexible, open-source framework, allowing us to tailor the content authoring process to the specific needs of the project. By optimising the CMS for performance, static content is regularly cached, reducing load times and minimising server load. As the result of these technological considerations, visitors can navigate more quickly and intuitively across the website.