Skip to main content

Indigenous Cultural Museums

WCAG AA Compliant Website for 30 Museums
WebsitePublic SectorAccessibility
Team (4)
Product Designer & Front-End Developer (me), Product Manager, Software Engineers
Timeline Oct 2022|Feb 2023
Tools
HTML/CSSHTML/CSSHTML/CSSHTML/CSSIllustratorIllustratorjQueryjQueryBootstrapBootstrap
    Indigenous Cultural Museums main hero image
    Overview

    Designed and built, front to back. A WCAG 2.1 AA–compliant government website where I owned both the UX design and the semantic HTML/CSS/ARIA implementation: one accessible, story-driven platform for 30 museums.

    01 · Problem Statement

    Two failures excluded key users

    The legacy site failed accessibility standards and buried 30 museums in admin-style navigation, and both had to be fixed before redesign.

    Technical exclusion

    No baseline accessibility, so low-vision and screen-reader users were locked out. WCAG 2.1 AA was legally required.

    Fragmented IA

    Admin-style categories hid regional, festival, and tribal links, so users couldn't connect stories across 30 museums.

    02 · Project Goals

    Three goals for the rebuild

    Respect cultural protocols while making archives easier to find and use, for local communities and a global audience.

    Goal 01

    WCAG 2.1 AA

    Legal accessibility: contrast, keyboard navigation, semantic HTML, ARIA, and screen-reader support.

    Goal 02

    Cultural IA

    Story-driven paths by region, tribe, and festival, not admin-style category lists.

    Goal 03

    Mobile-first RWD

    Lightweight responsive layout for rural users on slower networks and smaller screens.

    03 · Design Process

    Five intentional stages from audit to front-end delivery

    Five stages: Investigate → Ideate → Design → Test → Implement, each tied to a concrete decision in the final site.

    Phase 01 · Investigate

    Audit & Competitive Benchmarking

    Two official sites showed the same navigation and accessibility gaps.

    I audited the legacy platform and benchmarked the Council of Indigenous Peoples and Cultural Development Center sites to map friction, patterns, and where accessibility fell short.

    Legacy Indigenous Cultural Museums homepage with cluttered navigation, low contrast, and rigid categories
    Legacy platform audit: admin categories, weak contrast, no accessibility controls.
    Competitive analysis comparing the Council of Indigenous Peoples and Indigenous Peoples Cultural Development Center websites
    Competitive benchmark: two official ecosystems, same navigation and accessibility gaps.
    Phase 02 · Ideate

    Storytelling Information Architecture

    IA by region, tribe, and festival, not admin lists.

    Thirty museums are grouped the way communities tell stories: place, lineage, and seasonal events, so links feel discovered, not searched.

    Information architecture diagram showing the new narrative-driven navigation structure for 30 indigenous museums organised by region, tribal affinity, and cultural timelines
    New IA: museums organised by geographic clusters, tribal affinities, and seasonal festival relationships instead of alphabetical lists.
    Phase 03 · Design

    Wireframing, Prototyping & Visual Language

    Heritage and coexistence: a calm palette on every screen.

    Wireframes and prototypes tested layout across devices. Visuals stay restrained, with warm cultural tones and humanist type for a calm, community-led browse.

    High-fidelity interactive prototype showing homepage design with cultural imagery, accessibility toolbar, and responsive navigation
    High-fidelity prototype: flows validated before front-end delivery.

    Responsive layout: verified across devices

    Live production site: desktop viewport
    Desktop
    Live site: tablet layout
    Tablet
    Live site: mobile layout
    Mobile
    Phase 04 · Test

    Accessibility & WCAG Verification

    Built-in type size and high contrast, no plugins.

    Accessibility was tested in design, not after launch. A global toolbar offers S/M/L text and high-contrast mode across the site.

    Colour palette for the Indigenous Cultural Museums platform: warm rice, traditional red, and woven brown
    Colour palette: culturally informed tones used across the site.
    Colour contrast testing results for WCAG AA pass and fail on typography and UI elements
    Contrast audit: type and UI checked against WCAG AA.
    Typography readability study across screen sizes and high-contrast mode
    Readability: layout holds at 200% zoom.
    Phase 05 · Implement

    Front-End Delivery

    Skip-links and ARIA landmarks for keyboard and screen readers.

    I built the front end in semantic HTML/CSS: skip links, ARIA regions, and responsive layout so the design kept its accessibility in production.

    Museum profile page mockup showing cultural collection highlights, heritage information, and responsive navigation for an individual indigenous museum
    Museum profile page: individual museum view with cultural collection highlights and heritage context.
    04 · Summary / Impact

    30 museums. One accessible gateway.

    One WCAG 2.1 AA platform, built for communities and a global audience.

    WCAG 2.1 AA

    Zero audit failures across all museum profiles.

    Responsive launch

    Works on mobile, even on slower rural networks.

    Cultural access

    Archives opened with dignity and accurate representation.

    05 · Reflection

    Inclusive by design

    Accessibility removed visual noise and sharpened the experience, for everyone, not just edge cases. Designing for WCAG 2.1 AA forced clearer hierarchy, stronger contrast, and semantic structure that also improved navigation for sighted users.

    The same mindset shaped our slow-technology approach: respect users' attention, reduce clutter, and let cultural content lead, not the interface chrome.

    Next Projects

    UAV Control System
    UAV Control System
    Agricultural UAV Interface Design
    EnterpriseTablet AppAgtechB2B

    UAV Control System

    Agricultural UAV Interface Design
    EnterpriseTablet AppAgtechB2B
    Pic2Split
    Pic2Split
    End-to-End Design of a Social Bill-Splitting Web App
    ConsumerWeb AppAIB2C

    Pic2Split

    End-to-End Design of a Social Bill-Splitting Web App
    ConsumerWeb AppAIB2C