Auckland War Memorial Museum
Auckland War Memorial Museum
Website Refresh
Website Refresh
Website Refresh
Overview
The Auckland War Memorial Museum Tāmaki Paenga Hira (or simply the Auckland Museum) is New Zealand's first museum and tells the story of New Zealand, its place in the Pacific and its people. The Auckland Museum website was redesigned in 2012, and since then the Museum refreshed their brand and found that the old website struggled to provide the best experience for users.
The Museum approached my team to refresh their responsive website by redesigning the homepage, designing and building a component library for new page templates and simplifying the navigation to align with the new brand. We enabled the website to deliver an engaging experience that is user-centred, rather than organisation-centred (e.g. aligned with differing departmental remit).
My Role
UX design, Information Architecture, Visual Design, Prototyping, Guerrilla Usability Testing
Year
August - November 2017 (including build)
My Role
UX design, Information Architecture, Visual Design, Prototyping, Guerrilla Usability Testing
Duration
August - November 2017 (including build)
My Role
UX design, Information Architecture, Visual Design, Prototyping, Guerrilla Usability Testing
Duration
August - November 2017 (including build)
The Challenge
Refresh the Auckland Museum website design to provide an experience aligned with the needs of users as well as the Museum’s new vision and brand.
There are a number of needs that the website needs to serve:
- Drive visitation to the museum
- Increase recognition of the Auckland Museum’s new brand
- Showcase digital content in more engaging ways
- Promote the Museum’s commitment to bicultural representation
I was part of the design team for the project and collaborated with my Design Director and another UX Designer. In addition, I also worked with a Project Manager, Strategist and Developers.
Old museum website homepage
Discover
To make sure we were aligned as a team from the start of the discovery phase, we set up a war room to explore the problem space, identify the website needs of our target users (pre-defined by the client) and assess whether the website serves their needs. We reviewed the existing website content and IA, did competitive benchmarking against other local and international museum websites and reviewed the museum’s website traffic analytics and research.
Target user groups
The old site IA
What we found
The existing content on the website serves user needs - We found that the site contains rich content that serves the needs of our target users and has the potential to drive visitation. However, some of the key content could be surfaced more through a new design.
The homepage is cluttered and doesn’t effectively guide users to the deeper site - The click-through rate from the homepage content is low and the stacked mosaic layout is overwhelming for users. The content is useful but gets lost among the clutter of tiles as there's no clear structure. Users have to stop and think about how to proceed.
Images are important communication tools and are key in driving visitation - Users respond positively to images on the website as they indicate what they can expect to see at the museum and what their experience may be like. Building or on-site images tease users with a sense of space that’s waiting to be explored. Exhibition, gallery and collection images answer the user's question of “What can I see and do?”. Photos of visitors allow users to project themselves into the museum space.
Our Proposed Approach
- Replace the homepage with a new design and dynamic, curated content.
- Use the Bite, Snack and Meal approach to create paths from the homepage to deeper sections of the site.
- Allow users to self-select paths tailored to their needs.
- Simplify the primary navigation and site structure.
Our Proposed Approach
- Replace the homepage with a new design and dynamic, curated content.
- Use the Bite, Snack and Meal approach to create paths from the curated content into deeper sections of the site.
- Allow users to self-select paths tailored to their needs.
- Simplify the primary navigation and site structure to create paths for users and inspire curiosity.
The proposed IA
Content relationships - Bite, Snack and Meal
The “Bite, Snack, Meal” content approach advocates for presenting content in manageable portions to allow for content grazing (bite), short content summaries (snack), and if the user is interested, rich detailed content (meal). This approach aims to draw users who were initially just looking for quick/task-based content, into the deeper site. The trick is to ensure the content at the bite level (homepage) gives them a reason to journey deeper, either by serving a need or inspiring curiosity.
Alignment workshop
After we came up with the proposed approach, the Auckland Museum team and our team participated in a 2-hour workshop to:
- Review the current content state of the website vs the proposed approach
- Revisit and the business goals and user needs
Everyone participated in an exercise in which we sketched out blocks of content for different pages and sections of the site e.g. the homepage, visit and discover as a kick-off into the design phase. We also came up with experience principles that tied in nicely with the new brand principles as we took the needs of the user and goals of the business into consideration.
Design
After the workshop, the design director and I reviewed the content ideas the team and client came up with before sketching out ideas for bite, meal and snack content we referred to as “components”.
The new Auckland Museum brand design system
The new Auckland Museum brand design system
During the sketching session, we thought about the purpose of each component, different compositions, how to incorporate imagery and text and ways to align the designs with the new brand and principles.
Throughout the design phase, we communicated with the developers and made sure the ideas we had for a component library were technically feasible and could be built as editable ‘hand-over’ components for the client to have control over.
Some of my earlier sketches of component ideas are shown below.
Low-fi bite, snack and meal components
Once we had clear concepts formed, I refined the components on Sketch and worked out how they would look on different devices. Each component was then developed through design feedback and quick tests to make sure all the details were considered. When certain components reached hi-fidelity, they were put in front of people for quick-fire testing to see what people noticed first, whether they could comprehend what they were looking at and what actions they could take.
Belle, the other designer of the team and I used the components to create wireframes of the homepage, the "what’s on" page and an event page before I moved on to the visual design, in preparation for user testing.
The development of the hero major component (snack), used to promote an event, display or exhibition
The development of the hero major component (snack), used to promote an event, display or exhibition
This version doesn’t include an explanation or description of the event or exhibition which will aid the user in their decision on whether they click into it.
The full image is shown here and an explanation is included, but due to the limited space for text, it doesn’t cater for longer headings or subheadings.
A different composition, allowing more room for text and making it easier for users to read. The CTA button is also more prominent.
The first round of page designs created with the components
The thinking behind the component designs
Bite (homepage) - Bite-sized components feature a prominent background image and a bold heading/title on top to draw immediate attention. Overall, the designs work to funnel people into key section pages or priority pages e.g. What’s on.
Snack (subsection pages and priority pages) - Snack-sized components promote discoverability and curiosity by presenting content and experiences in an engaging way. The different compositions, images sizes and negative space of the components create rhythm on a page.
Meal (Deeper level - Information and story pages) - Meal-sized components inform, entertain and engage people around a single topic. Since meal pages tend to contain more detail and information, meal components are designed to hold more content whether it’s solely text, solely images or a combination of both.
Guerrilla Usability Testing
In this project, there was no budget for formal usability testing, so we came up with a plan for guerilla testing instead. We wanted to put our designs in front of users to test the navigation menu, whether in-page interactivity was clear and to see whether people could find the information they needed through the prototype based on different user scenarios and tasks.
After the team and stakeholders agreed on the test plan, Belle and I came up with the guerilla usability test script for a testing session onsite at the Auckland museum. Due to the limited time, we aimed for 12 participants and to spend up to 10 mins with each participant. As part of the plan, if we approached someone that didn’t fit in a particular user group, we would give them a scenario that aligned best with their needs. We also used product reaction cards to check the emotional response of users and whether the design aligned with the brand and our principles.
Having rich visual content and imagery was an important part of our approach and principles, therefore we decided it was more valuable to test with a high-fidelity prototype (visually treated mockup) rather than a black and white prototype. Using Axure, we created a mobile prototype (shown in the video) for testing as it fit with our quick intercept approach and prioritised content.
In the end, we were lucky to have tested with 12 people at the museum who fit in with the different user groups such as families, students, teachers and foreign visitors.
Key insights found from testing
The navigation is clear - People didn’t have trouble finding what they needed and completed the tasks, hence "easy to use" and "intuitive" were commonly picked out of the reaction cards to describe the navigation.
People were delighted by the images and the snack components - As observed, participants were drawn to scroll and go deeper into the site due to the visual appeal of the images and the snack components as they presented just enough content to catch people's interest.
Most users were looking for the term “exhibitions” - Users had the expectation of finding a set of “exhibitions” on the homepage. It wasn’t obvious that the “What’s on now” (bite component) would take users to the exhibition content, despite it being part of the description as users didn’t seem to notice or read the description.
Māori content should be presented more upfront - People expected to see Māori content on the homepage. Quite a few users used the search bar to search for “Māori” when they couldn’t find anything at a glance.
The homepage bite hero component was not successful in funnelling people to the deeper site - Only one person went to “What’s on now” from the homepage/menu and no one tapped into the ‘Discover’ bite component. Since the background image of the bite hero component features only one particular part of the promoted section e.g. a specific exhibition or collection, if the image doesn't interest the user, they are unlikely to click into it, especially if they are unaware that there's more to see if they click through. However, once users were on the snack pages e.g. What’s on, most found the range of content very engaging.
Key insights found from testing
The navigation is clear - People didn’t have trouble finding what they needed and completed the tasks, hence "easy to use" and "intuitive" were commonly picked out of the reaction cards to describe the navigation.
People were delighted by the images and the snack components - As observed, participants were drawn to scroll and go deeper into the site due to the visual appeal of the images and the snack components as they presented just enough content to catch people's interest.
Most users were looking for the term “exhibitions” - Users had the expectation of finding a set of “exhibitions” on the homepage. It wasn’t obvious that the “What’s on now” (bite component) would take users to the exhibition content, despite it being part of the description as users didn’t seem to notice or read the description.
Māori content should be presented more upfront - People expected to see Māori content on the homepage. Quite a few users used the search bar to search for “Māori” when they couldn’t find anything at a glance.
The homepage bite hero component was not successful in funnelling people to the deeper site - Only one person went to “What’s on now” from the homepage/menu and no one tapped into the ‘Discover’ bite component. Since the background image of the bite hero component features only one particular part of the promoted section e.g. a specific exhibition or collection, if the image doesn't interest the user, they are unlikely to click into it, especially if they are unaware that there's more to see if they click through. However, once users were on the snack pages e.g. What’s on, most found the range of content very engaging.
Key insights found from testing
The navigation is clear - People didn’t have trouble finding what they needed and completed the tasks, hence "easy to use" and "intuitive" were commonly picked out of the reaction cards to describe the navigation.
People were delighted by the images and the snack components - As observed, participants were drawn to scroll and go deeper into the site due to the visual appeal of the images and the snack components as they presented just enough content to catch people's interest.
Most users were looking for the term “exhibitions” - Users had the expectation of finding a set of “exhibitions” on the homepage. It wasn’t obvious that the “What’s on now” (bite component) would take users to the exhibition content, despite it being part of the description as users didn’t seem to notice or read the description.
Māori content should be presented more upfront - People expected to see Māori content on the homepage. Quite a few users used the search bar to search for “Māori” when they couldn’t find anything at a glance.
The homepage bite hero component was not successful in funnelling people to the deeper site - Only one person went to “What’s on now” from the homepage/menu and no one tapped into the ‘Discover’ bite component. Since the background image of the bite hero component features only one particular part of the promoted section e.g. a specific exhibition or collection, if the image doesn't interest the user, they are unlikely to click into it, especially if they are unaware that there's more to see if they click through. However, once users were on the snack pages e.g. What’s on, most found the range of content very engaging.
Key insights found from testing
The navigation is clear - People didn’t have trouble finding what they needed and completed the tasks, hence "easy to use" and "intuitive" were commonly picked out of the reaction cards to describe the navigation.
People were delighted by the images and the snack components - As observed, participants were drawn to scroll and go deeper into the site due to the visual appeal of the images and the snack components as they presented just enough content to catch people's interest.
Most users were looking for the term “exhibitions” - Users had the expectation of finding a set of “exhibitions” on the homepage. It wasn’t obvious that the “What’s on now” (bite component) would take users to the exhibition content, despite it being part of the description as users didn’t seem to notice or read the description.
Māori content should be presented more upfront - People expected to see Māori content on the homepage. Quite a few users used the search bar to search for “Māori” when they couldn’t find anything at a glance.
The homepage bite hero component was not successful in funneling people to the deeper site - Only one person went to “What’s on now” from the homepage/menu and no one tapped into the ‘Discover’ bite component. Since the background images feature only one particular part of the promoted section to e.g. a specific exhibition or collection, What’s on now looked like “just a volcano exhibition” and Discover looked like something to do with birds only. However, once users were on the What’s on now page, most found the range of content very engaging.
Bite hero component
User reaction: "I'm not interested in just seeing birds..."
User reaction: "Is there anything else on or just a volcano exhibition?"
New Approach and Design
As we reflected on the insights from testing, it was evident that we needed a new approach and design for the homepage. As the bite hero component wasn’t effective in funnelling people to the deeper site, we replaced it with snack content. The homepage example shown below displays snack content from "What's on" and "Discover", but this new approach also allows other snack content to be lifted from the subsections of the site e.g. "War Memorial" and "Your Museum". This addresses the key user pain points as it allows exhibition related content and Māori content to be present on the page. Overall, the new homepage ensures visibility of content that users want to see; we don’t have to worry that key content is ‘hiding’ behind a component that may or may not be clicked on.
Redesigning the headers and adding the AM frame
Another change that came about after client feedback was the header space of the homepage. Previously, it was designed as a promotional space for a new event or exhibition at the museum, but as different departments had their own exhibitions and events on often during the same period, it wasn’t suitable to highlight just one. With this in mind, I redesigned the header as a space to hold an image of the museum building instead to highlight the museum’s identity and the iconic building. The image can be changed as long as the building is always present.
As the AM frame was added to the homepage header, the header template of snack and meal pages were also redesigned to include and frame.
Redesigning the headers and adding the AM frame
Another change that came about after client feedback was the header space of the homepage. Previously, it was designed as a promotional space for a new event or exhibition at the museum, but as different departments had their own exhibitions and events on often during the same period, it wasn’t suitable to highlight just one. With this in mind, I redesigned the header as a space to hold an image of the museum building instead to highlight the museum’s identity. The image can be changed as long as the building is always present.
As the AM frame was added to the homepage header, the headers templates of snack and meal pages were also redesigned to include and frame.
Other Design Challenges
Other Design Challenges
Drive engagement and curiosity through the navigation
Solution: We designed a mega menu with image tiles to promote the key pages of the section, new content or popular content along with standard text links. The insights from testing reassured us that images inspired users to explore the site.
Drive engagement and curiosity through the navigation
Solution: We designed a mega menu with image tiles to promote either the key pages of the section, new content or popular content along with standard text links. The insights from testing reassured that images inspired users to explore the site. The menu appears when the user clicks or taps into a section of the navigation bar.
Promote the Auckland Museum’s commitment to bicultural representation
Solution: We used this opportunity to surface the Te Reo Māori language. The navigation menu includes English and Māori and we also set guidelines which allow Māori titles to appear above English titles in header areas and the introduction to sections of a page.
Align design with the Museum’s new brand
Solution: The design director and I explored ways to use motion as a way to align the design with the new brand and increase user engagement. We used the frame, the museum’s new unifying visual devise as a source of inspiration.
As the user scrolls down, the images of selected components shrink down to a frame, creating intentional moments of focus and delight. I explored how movements will translate from large interfaces to small interfaces (tablet and mobile) and communicated with the developers early on to create coded demos of certain moving components for the client to review. They were happy to have it implemented.
Implementation
With some final tweaks made to components, I documented the specifications for the development team and worked closely with them as the pages were built. As one developer was working remotely, we kept in close contact, communicated frequently through slack and calls and provided feedback for each other. I also added the final designs for the homepage and a story page for the client to reference on invision and provided them with a documentation of rules and recommendations for the components.
Reflection
The guerilla testing session I conducted along with Belle proved to be both an enjoyable and valuable part of the process that allowed us to better align the design with the needs of users. For me, this project helped reinforce the idea that you should always push for user testing, whether it's formal or informal and that having no budget is no excuse to ignore it as ways to get around constraints can be explored. The insights we gathered were used to demonstrate the value of user testing for our client.