Responses by Irene Pereyra, cofounder and UX director, Anton & Irene.
Background: The purpose of this site was to design and build the digital home for the new M+ museum of visual culture in Hong Kong, making it accessible to the widest of audiences in age, ability and digital literacy. And since it is not only a museum for locals but also a big tourist draw, the site’s target audience includes people who speak Mandarin, Cantonese and English—as a first, second, third or even fifth language. This led to us creating a framework and design that would support all these different people who speak different languages.
The site enables people to plan their visit to the museum, purchase tickets for the museum or specific events, use the museum’s material for academic research, donate to the museum, become a member, and much, much more. It’s a huge museum with many moving pieces that all had to be accounted for in its new digital home. This made the project challenging as multiple stakeholders across multiple teams had to convey their needs and desires for the new digital home.
Plus, since the architects Herzog & de Meuron created quite an emblematic building for M+, we wanted to ensure that the museum’s digital home would feel like it lives in the same world as the building. We wanted to ensure continuity in people’s experience with M+ so that if they see posters on a bus or the metro, purchase a ticket online, or actually walk into the physical space, it all feels part of the same world.
Design core: If you put all museum websites side by side, they look similar: Swiss design with a white background and black text, predictable and unexciting. We wanted to create something that would not only stand apart from all of those museum websites but also represent Hong Kong’s visual culture.
Hong Kong is colorful, busy and chaotic, but at the same time structured and organized. It’s intoxicating. In our downtime, we explored Hong Kong by subway; had claypot rice off the neon-lit Temple Street Night Market; hot pot on tiny plastic stools in Tsim Sha Tsui; pushed our way through the crowds on the ferry between Kowloon and Hong Kong island; visited all the main museums; and spent our evenings walking along Causeway Bay, Central and Kowloon just marveling at all the organized chaos, the colors, the vibrancy, the smells, and the general hustle and bustle of this intoxicating city.
We spent time walking through the city, taking photographs and finding inspiration in all the unusual color clashes, neon signs and bilingual wayfinding systems. We wanted the website to somehow reflect that and Hong Kong’s organized chaos, for it to feel like it belonged to this place, that it could only be the design of a website for a museum in Hong Kong and nowhere else.
Favorite details: It’s unusual for a museum not to have any visuals or artwork as soon as you land on the homepage, and I love that we were able to create such a strong impression just with graphic elements. I also love the first scroll on the homepage. The giant M+ logo minimizes, and the colors update as you scroll down. The entire look and feel and homepage experience put you in the right mood to experience the museum.
Since Hong Kong functions as a bilingual city—most people speak both English and Cantonese—and signage all over the city is always in British English and Traditional Chinese, we felt it would be imperative for that to be reflected on the website as well. Rather than making language an afterthought and having visitors switch to their language in some utility menu, we wanted to bring Hong Kong’s bilingual nature front and center.
We also loved that the M+ logo created by North was an abstraction of the museum’s building designed by Herzog & de Meuron. We made the website have a smart hidden little nod to the building, representing it in the website’s layout with a three-column grid that could accommodate both English and Traditional Chinese at the same time. Each type size was calculated carefully to ensure both languages would always be readable and pass accessibility guidelines.
Challenges: Right before the pandemic started, we flew to Hong Kong to discuss what this new website would be. Though we had worked on a museum website before with the Met, we had never worked on a website for a brand new museum being built. Then as soon as we got back to New York, the pandemic hit, and our team had to work across three different timezones in New York, Amsterdam and Hong Kong. Luckily, the M+ team was extremely efficient and organized, so we could adapt to this new style of working with little to no upset.
Getting the balance right so we would score high on accessibility was also crucial to both M+ and us. To ensure legibility, we decided to make the text large and tested all color combos to make sure people with disabilities would be able to interact with the content. The museum itself meets all accessibility guidelines, so we spoke with the M+ visitor services team to understand how we could use the website to help welcome everyone of all abilities. Our work on the website had to match the museum’s effort in making its physical space accessible.
It’s impossible to overstate how important the client’s role is in the success of any project, especially when things get complicated—you’re in the middle of a pandemic, there is a travel ban, the team is dispersed all over the world, and your building’s opening is delayed.
Navigation structure: Since this was a brand new website, we had the luxury to design a healthy modular system from the ground up, unshackled by any previous archaic systems, databases or content. This enabled us to organize all the content in an efficient, streamlined way.
Since people visit M+’s website for many reasons, we had to make sure that we structured the content while taking into account whether someone is looking to visit the museum, for specific research information, or wants to get involved in or support the museum—and any and all other possible reasons and motives. And since we know that the homepage is not everybody’s starting point when interacting with the website, we designed every single page on the site to have a wow factor. That way, if you entered the site on a detailed inner page, you would still feel like your expectations were exceeded.
The museum is a living, breathing organism, and the M+ team needed the freedom to make quick updates on the fly. With the modular system we designed, it’s quite easy for the team to make updates themselves while also making it easier for visitors to learn how the system works in an ambient way.