Enhancing Accessibility and Improving Consistency of the National Palace Museum E-Commerce Site

Overview
Problem

The National Palace Museum is one of the world’s most significant museums in Taiwan. However, there is a notable inconsistency between the museum's main website and e-commerce site. Moreover, the older version of the e-commerce site is overwhelmed with scattered information and lacks accessibility.

Goal

Redesign the e-commerce website to improve accessibility, ensure consistency with the main museum website, and enhance the overall browsing experience.

What I did

I revamped the National Palace Museum e-commerce website by defining personas, creating user journey maps, and developing high-fidelity mockups and prototypes to ensure the entire website is accessible to a diverse shopper.

Team

1 UX designer
1 project managers
4 developers

Role

UX Researcher
UI designer

duration

2 months

outcome

Final solution overview

View prototype

01. Consistency with the Main Museum Website

Added a link back to the main museum website and ensured consistent design branding.

02. Improved accessibility

Established a clear hierarchy and provided adjustable text sizes to accommodate diverse users.

03. Optimized user journeys

Implemented breadcrumbs and filters to refine search results efficiently, and enhanced the product page with comprehensive details to minimize hesitation before placing an order.

problem statement

How might we create an inclusive and streamlined shopping experience for a diverse group?

Design process

1
Content Enquiry
Understand what executives and customers needs.
2
Research
Finding problems and communicating with developers.
3
Design
Ideating concepts and hi-fi prototyping.
4
Next Step
User testing and iterating.
content enquiry

Understand the needs

To start off, I talked with 5 senior executives to gain a comprehensive understanding of their needs and requirements. This helped me determine the appropriate research methods to use to address the stakeholders’ needs effectively.

Executives' needs:

  • Meet the government regulations of AA compliant accessibility standards requirement.
  • Reducing the time spent hesitating before placing an order and increasing the conversion rate.

Researched best practices for making the website accessible.

There are four principles for making web content more accessible to people with disabilities.

01. Perceivable

Ensure all users can see, hear, or sense every element of a design, such as alt text for images and links, and high-contrast color.

02. Operable

Users must be able to successfully use controls, buttons, navigation, and other interactive elements without using mouse.

03. Understandable

Make the content easy to navigate and read. Create a clear visual hierarchy that emphasizes headings and content structure with clear instructions and consistent navigation.

04. Robust

Ensure the content remains accessible across various devices and browsers, such as screen readers.

To make the site accessible, predictability is key.

research

Competitive Analysis

I reviewed other famous museum websites, such as MoMA, Tate, and The British Museum, as well as renowned accessible websites like Nespresso. This helped me identify common best practices and gain insights for creating the most accessible and intuitive design.

01. Visual support

Always include images alongside text for better comprehension.

02. Well structure

Ensure a clear and well-defined structure with clear indicators.

03. Readable text size

Use large text to enhance readability.

04. Consistent brand identity

Consistently provide a link back to the main museum website for easy navigation and brand identity.

Problem findings

I browsed through the entire website and used both manual and automated testing to identify accessibility issues. During this process, I also identified opportunities for future design improvements.

01. Not compliant with accessibility design standards.

The current website is designed for general users, neglecting the needs of disabilities.

  • Missing or Inadequate Alt Text: Images lack descriptive alt text, leaving visually impaired users without crucial information about the content or purpose of the image.
  • Element Focus and Interaction Issues: Interactive elements, such as buttons, forms, and links, are not properly accessible via keyboard navigation (Tab).
  • Improper Heading Structure: An illogical or inconsistent heading structure, with skipped heading levels or incorrect order, making it difficult for screen readers to interpret the content’s organization and for users to navigate the page effectively.

💡 Opportunities:

  • Clear Navigation: Use clear and consistent navigation menus, breadcrumbs, and site maps to improve the understanding of the website's structure and facilitate easy navigation between sections and pages.
  • Adjustable Text Sizes: Provide options for users to adjust text sizes to accommodate their preferences and needs.
  • Alt tags: Helps people and assistive technologies understand the meaning and purpose of visual content.
  • Communicating Accessibility Elements: Ensure all accessibility elements are indicated to facilitate effective communication with engineers.
02. Overwhelmed information makes it hard to navigate, especially for those with disabilities.
  • Too much repeated information.
  • Hard to locate specific content within a cluttered sitemap, leading to frustration and inefficiency.

💡 Opportunities:

  • Streamlined Navigation: Categorize products into clear and concise sections to streamline the navigation menu.
  • Clear Hierarchy: Implement a clear hierarchy for product listings, displaying categories and subcategories in a structured manner.
  • Filtering Options: Provide filtering options to narrow down search results, allowing users to refine their product search based on specific criteria for a more personalized and efficient shopping experience.
03. Long time hesitation before placing order.
  • Insufficient Product Information makes it difficult for customers to confidently make a purchase decision.
  • Complex checkout process can cause frustration, leading to delays or abandonment of the purchase as customers struggle to complete their orders.

💡 Opportunities:

  • Customer review: Seeing feedback from other buyers, especially regarding product quality and satisfaction, can build trust and encourage quicker decision-making.
  • Streamline checkout process: Simplifying the checkout process by reducing the number of steps and clearly displaying progress indicators can minimize confusion and hesitation, making it easier for customers to complete their purchase quickly.
Additional findings
04. The current website is inconsistent with the museum's main web page.
  • The inconsistency can lead to a lack of brand cohesion. Visitors may not recognize the shop as an extension of the museum, which can weaken the overall brand identity.
  • Visitors may experience confusion when transitioning between the museum's website and its shop website. This can hinder their browsing experience and make it harder for them to find what they are looking for.

Museum

E-commerce

💡 Opportunities:

  • Consistent logo and design elements: Display the logo consistent with the museum's logo to reinforce brand identity. Incorporate design elements such as fonts, icons, and graphics that align with the museum's branding.
  • Include relevant links: Include links to relevant museum content, events, or exhibitions on the e-commerce site.
design

Final design highlight

01. Consistency and accessible homepage

Incorporate design elements that align with the museum's branding and include links to museum content. Include lots of pictures to make users easy understand

02. Optimized information

Implement breadcrumbs and filters to refine search results efficiently. Enhance the product page with comprehensive details to minimize hesitation before placing order.

03. Streamline checkout process

Simplifying the checkout process by adding express checkout access and clearly displaying progress, making it easier for customers to complete their purchase quickly.

Reflection

Impact

New design was launched in late 2023!

Regrettably, I couldn't finish everything as planned. Upon completing my internship, some designs changed, and there are still several areas that require further refinement. Nevertheless, achieving the milestone of launching indicates that we've met the standards for accessible design, which brings me a great sense of satisfaction and accomplishment.

What I’ve learned

Adaptability and flexibility

In contrast to the structured research and design processes often found in school projects, the company approach can be quite dynamic, adapting to time constraints and business methods. It demands adaptability and flexibility to navigate changes and deliver successful outcomes effectively.

Storytelling is important

Storytelling plays a pivotal role when presenting proposals to clients or supervisors. It helps create a compelling narrative that captures their attention and conveys the value proposition effectively.