MASS

HEIDE Museum of Modern Art

Museum website Art Architecture Landscape

Architecture, Art & Design / Nominee

MASS

Architecture, Art & Design

Nominee

We had to create a sophisticated and easy-to-use website that appealed to a large demographic. Tim Kotsiakos, Creative Director

Watch

Q: Can you briefly describe your project and the concept behind it?

A: Heide is a public art museum and sculpture park located 9km from Melbourne CBD. Set on 6.5 hectares of parkland with five gallery spaces, award-winning architecture, and a distinctive collection of more than 3,600 works of art. We were asked to create a new website that better reflected the museum experience and brand and chose Bone.Digital to partner with us on the build.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: We needed a CMS that was intuitive for all users, while delivering a simple and robust way to create custom forms that integrate seamlessly into the site. We also identified a need for complex integration with existing and new systems, and numerous micro interactions and animations. These requirements across a large and complex site push the bounds of headless WordPress and React, with Next.js being the most effective framework for the brief.

Q: What were some of your biggest learning and takeaways from this project?

A: We wanted each exhibition page to feel more like a landing page. Creating the flexibility to add unique colours was the easy bit, but creating a header that filled the entire viewport regardless of image dimensions and exhibition title length proved to be a challenge. We ended up prototyping several layouts in code before finally settling on a robust solution that embraces possibilities and invites variety between each exhibition page.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: Heide was built with WordPress as the backend and utilises Next.js for the frontend. It was built in WordPress REST API and we extended it to allow for things such as complex searching and filtering. On the front end, we utilised Styled Components and Static Site Generation for maximising performance.

Q: How did the final product meet or exceed your expectations? What results did you see?

A: We’re wrapped with the final outcome, specifically the overall finish. The client is ecstatic with the final result and has seen a huge increase in ticket sales (although it’s hard to measure given the Museum's closure during Melbourne Isolation restrictions).

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: As a design team, we are excited about the possibilities. Browsers can render more, allowing us to create more intuitive interactions at a higher resolution. New tools, technology and working methods make it easier for us to prototype and collaborate with developers to find better solutions faster. And we’re excited about how technology can be used to create new visual languages and branded interactions.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We worked with the brand team and agreed unanimously on how we might strike a balance between seriousness and playfulness. Our approach from the beginning was to design an interface that felt familiar but was also subtly unexpected. Some subtle design choices combined with an emphasis on interactivity have helped us achieve an overall experience (and brand) that feels considered and sophisticated.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: We did some research upfront, and developed a series of lo-fi wireframe prototypes that explored different information architecture structures, menu’s interactions and layout concepts. We tested these prototypes with stakeholders, members and non members and subtly refined our ideas over time. The main changes involved the overall structure of the site.