National Museum of Taiwan History
Product Designer | Responsive Website
National Museum of Taiwan History is a museum covering the history of the island nation of Taiwan and its associated islands.
In this project, we approached a brief to design an official website including all the services of the museum.
I'm the main designer who collaborated with product managers (Ivy) and 4 engineers (Warrick, Tony, Ian, Lukas) throughout this project.
The Problem
According to the user research from the museum users most likely to use the website are those needing additional information for their on-site visit. These users are young families, individuals with accessibility needs, tour groups, school groups, and members.
The museum requires to centralize important visitor information for these specific groups and to build on the backend management system with the Taiwan ministry of culture.
Goal
Communicate NMTH's value proposition
Based on the backend management system, we have to sparingly design page templates and various elements that can address most information the museum provided.
We want to visitors to quickly access the information they need while optimizing usability.
Research
According to the number of visitors of NMTH, the average of the year is around 500,000 people, including the number of disabilities 25,000 people, the school groups 80,000 people, the tour groups 90,000 people, and the others are families or city dwellers.
Based on the backend management system, we have to sparingly design page templates and various elements that can address most information the museum provided. We want visitors to quickly access the information they need while optimizing usability.
Key information that users need: view ticket prices, view exhibitions, scheduled guided tour, opening hours, view events, and transportation.
Site map
We had discussed sessions with the museum to confirm their goals for the site, determine necessary pages, and discuss the overall user experience.
The insights we gathered guided the initial site map in Mandarin and English, limited by the English information the museum provided, we chose the important pages of each section.
Wireframing
We sketch the wireframe and components to continue refining the UX and information architecture of the site.
Usability Testing
I conducted user tests with 15 people using Maze's Survey tool.
I consolidated the test results and the heatmap is also generated to help us understand how people interact with the home page.
Here are the results!
I also did surveys for users to do time on tasks. The first task is finding the ticket price, and the second test is scheduling a guided tour. Over 60% of users don't use the website before, but they all complete the task in 10s.
Before and after
Before the redesign, there was a lack of information on the opening hour and the ticket prices of the museum.
I optimized the information about the museum and added a calendar for users to check the events and exhibitions quickly and easily.
Except for the exhibitions and the calendar, I also centered the messaging around our target visitors and what they care about — scheduled guided tours, school groups, accessibility information, and the events of the museum.
In addition, the museum wants to display to the visitors about their collections, image licensing, and library resources.
Design system
To ensure a cohesive and consistent design, we followed the CIS of NMTH when designing the colors, typography, and components for our website. By adhering to these guidelines, we were able to create a visually appealing and recognizable website that aligns with NMTH's branding.
Accessibility considerations
According the website is one of the department of the government, there is a standard accessibly testing by Ministry of Digital Affairs. This website is reaching AA level following the WCAG 2.0.
Takeaways and what i’d do in the future
Designing website with existing backend, collaboration & guidelines
This was my first time designing a website using an existing backend system. I closely collaborated with engineers, learned effective collaboration methods, and created guidelines for the project.
To maintain and update the page
The website is expanding to accommodate new languages while maintaining a cohesive design for a seamless user experience. Our goal is to make the website accessible to a wider audience with high-quality user experience.