The brief was ambitious: conceptualise and design the digital home for a twenty-first-century museum of visual culture. The trilingual site would have to appeal to local audiences in Hong Kong and project the museum’s mission and values around the world. And most of the work would have to be done in the middle of a pandemic that halted travel and also made a strong virtual presence more important than ever for cultural institutions.

Irene Pereyra and Anton Repponen, who run the Brooklyn studio Anton & Irene, rose to the challenge of designing the M+ website. Their approach reflects months of conversations with M+ about our identity, programmes, and future needs, as well as the designers’ own first-hand experiences of Hong Kong visual culture. They had designed other museum sites previously, notably for the Metropolitan Museum of Art in New York, but they had never built such a distinctive digital home with as much creative flexibility.

The design extends the brand system developed by the Amsterdam-based agency Thonik. On the printed page, the digital screen, posters, city buses, and much more, M+ will be defined by a spectrum of distinctive colour bands. Anton & Irene set out to make that brand experience interactive by building a smooth, fluid site with modular elements that allow it to grow over time as museum programming develops. The process was a global collaboration: Anton & Irene worked with M+ between New York and Hong Kong as well as with Thonik in Amsterdam and website backend specialist Torchbox in the UK. Appropriately enough, they sat down over video conference to discuss the nuances of their design and how M+’s unique digital presence fits with an ever-evolving digital ecosystem.

What do you want the visitor’s first impression of the site to be?

Irene: I would like their impression to be: ‘Wow, this doesn’t look like a museum website at all’. One of the main goals with this design was to create a site that would stand completely apart from all other museum websites in the world. If you put them all side-by-side, they look similar. M+ allowed us, as the designers of this website, to actually design something and not just copy what every other museum and institution is doing.

Anton: I want that first impression to be: ‘This is so Hong Kong’. The design is not Swiss; it’s not a white background with black text. I hope that people will feel the colourful, vibrant character of the city. The clash of colours is almost like the clash of the natural landscape with the city itself.

How did you transform the brand concept Thonik developed, often called a brand book, into a dynamic experience online?

Irene: We knew the colours couldn’t be static. We didn’t want it to feel like the same three colours over and over again on every single page. On the homepage, we tried to make it feel like the colours are coming alive.

How does your design reflect your experience of Hong Kong?

Irene: The brand was very extensive, but it did not account for a lot of interactive elements. We needed to develop buttons and links and create a system to distinguish between clickable and non-clickable elements. For the clickable elements, we wanted to have simple, circular sticker-like buttons. We imagined making a wireframe of Hong Kong with all the neon signs and all the symbols stripped down to their essence. We were inspired by Hong Kong in an abstract way, to make the site feel fun, busy, and cluttered, but at the same time structured and organised.

Anton: Designers love organising things and putting things into boxes. Once we are given colours to work with, the first thing we want to do is organise. But we were careful to stay away from colour coding anything.

If I take a picture from Kowloon of Hong Kong Island, there is a lot of colour, but it’s not like one area is in green, one is in orange. Sometimes the signs and advertisements clash and it almost feels uncomfortable. At the same time, the overall effect is supported by beautiful typography and it starts to make sense. The homepage for the M+ site is the most colourful thing we have on the website. It’s like the cover of a book, offering this flashing Hong Kong experience. There are also places where we tone it down; when filling out a form for a school visit request, you want to be able to focus, for example. The colourways on the site can feel almost chaotic, but there is always an underlying logic.

M+ is a new institution. The content on its website will grow rapidly when the museum opens to the public in late 2021. How have you accounted for that growth?

Irene: We wanted to create a site that M+ could maintain easily and that wouldn’t be a nightmare for future updates. We also wanted to make sure we could hit the deadline as efficiently as possible. We have a certain number of modular features on the site that we can assemble in a lot of different ways. We call them Lego blocks. These are the buttons, layouts, and interactions that can repeat. Some pages might only need one Lego block. Some might need three or five.

Accessibility is a core value at M+ that drives every aspect of content production. How were you thinking about accessibility in the design process, especially as part of User Experience (UX) development?

Irene: If you think about who could potentially visit the M+ website, the age range spans from like twelve to ninety. The audience includes people who speak Mandarin, people who speak Cantonese, people who speak English as a first, second, third, or fifth language. It’s people from Hong Kong; it’s people from all over the world. We knew that we had to account for an extremely wide audience of people from different backgrounds, of different ages, and with different abilities and degrees of digital literacy.

We were very careful about ensuring our design could meet or exceed Hong Kong accessibility guidelines. For example, white text on a colourful background was integral to the brand identity. But white text can be more challenging to read than black text on white. To ensure legibility, we decided to make the text quite large. We also thought about the mobile site. My mother is seventy-four years old, and she has a very hard time with a lot of mobile websites because everything is tiny. We deliberately created a jumbo site—everything is large on the desktop as well as on the mobile browser. We had quite a few discussions with M+ about how to condense content and make it as efficient as possible for this accessible design framework. Do we really need eight paragraphs to describe this thing? Because, if so, you’re going to be swiping for the next hour given the size of the text.

Accessibility is, of course, a major goal of UX design, but how the site is developed is also crucial. Ultimately, the way the code is written and structured will allow a screen reader to read the site out loud so that anyone with visual impairment—or anyone who prefers audio—can engage with the site. The developers were instrumental in achieving this.

The physical museum was built to meet accessibility guidelines. We spoke with the M+ visitor services team to understand how seriously they took their responsibility to welcome everyone of all abilities. It was very clear that our work on the website had to match their effort to make the physical space accessible. M+ simply would not have launched the site if they didn’t feel confident in its accessibility.

How does a website fit within a cultural institution’s overall digital presence?

Irene: In the past, a website would have been the only—or at least primary—place to get information online. That is obviously no longer the case. We were thinking not only about how the site fits within the museum’s social media and other digital platforms, but also about how it fits within the user’s digital ecosystem. The homepage is not necessarily going to be the starting point for most people when they come to the website. They’re searching for an artist, finding related M+ exhibition pages through Google, and going directly there. It is important that these side doors still convey a coherent feeling of M+.

Anton: On the social platforms we all use, we all have the same basic home. My Instagram interface looks exactly the same as Irene’s, which looks exactly like M+’s. Sure, the content is different, but the way people interact with it is the same. A website is different. It is the institution’s unique home. You set up the guidelines and you let users know how they can interact with you. This is the place where you want to stand out. M+ didn’t build a generic box for its physical home. They hired Herzog & de Meuron to build the museum because it had to be distinctive. The website is an extension of the institution’s character in the same way.

Many people might never visit M+ in person. They’re going to be browsing from Mumbai, Amsterdam, New York. We want to give them a home where they can explore the collection online and discover more about the museum’s activities. We want them to go to M+ Magazine and read all about the visual culture of Hong Kong. On the website, that information is all in one place and not scattered on Facebook and Medium, and here and there, and on some random blog with twenty-three different ads popping up. The website is curated by M+ and is an expression of its identity.

What are your favourite features of the site?

Anton: Usually when you go to a website, they try to impress you on the homepage, then the deeper you go it becomes boring. We wanted to make it so that as you go deeper, as you travel, you have an experience like the homepage.

Irene: For us—and hopefully for visitors—the first scroll on the homepage is delightful. The giant M+ logo minimises and subtly goes to the top left. The colours ambiently update as you swipe through. Even though we knew it was coming, it was very exciting when we first saw that initial scroll fully developed. It puts you in the right mood to experience this museum.