Chatham Dockyard: Sonic Palimpsest

Chatham Dockyard: Sonic Palimpsest

Interactive Soundscape Map - Accessible Audio-First Map for Heritage Museum
Interactive Soundscape Map - Accessible Audio-First Map for Heritage Museum

Role:

Role:

Lead UI/UX Designer

Timeline:

Timeline:

2022–2023

Tools:

Tools:

Figma, WordPress, Javascript, CSS3, HTML5

Overview

The Sonic Palimpsest is a live, publicly accessible interactive soundscape map commissioned by the University of Kent and University of Greenwich. The project allows users to explore the history of Chatham Historic Dockyard — from its founding as a working naval yard in 1547 to its closure in 1984 — through location-based audio stories drawn from diaries, oral history archives, and written accounts.

As Lead UI Designer and Web Developer, I was responsible for designing the complete user interface, interaction model, and user flow — translating complex academic research and archival sound compositions into an intuitive, immersive digital experience accessible to a wide public audience.

The live product is publicly accessible at sonic-palimpsest.org.uk and credited: “Web design and development by Sade Adesida and Allen Tullett.”

The Problem

User Pain Points

  • Academic research and archival audio had no public-facing interface — the content existed only in academic outputs

  • Complex historical data spanning centuries, themes, and geographic locations needed intuitive and accessible organisation

  • Users unfamiliar with the dockyard needed clear onboarding before exploring the map

  • Audio content needed to be surfaced naturally within a spatial, map-based context

  • Clear navigation between individual stories was needed without breaking map context

  • Mobile users had no guidance for landscape-only map interaction

Business Goals

  1. Make 400+ years of Sonic Palimpsest research publicly accessible and engaging

  2. Present dockyard history through an immersive and accessibility friendly, audio-first digital interface

  3. Allow exploration by both century (1547–1984) and thematic category

  4. Ensure the interface felt visually authentic to the heritage context

  5. Build a live, maintained product for long-term public access from two universities

User Personas

David
53

History enthusiast & museum visitor

Moderate Tech Savviness

"I want to feel transported back to what this place actually sounded and felt like — not just read dates on a plaque."

GOALS

  • Explore the dockyard's history in an emotionally engaging, immersive way

  • Discover audio stories linked to specific physical locations on the map

  • Navigate freely by era or theme without needing a guide

PAIN POINTS

  • Dry, text-heavy historical content doesn't hold his attention

  • Unsure where to start when first opening an interactive map

  • Struggles to maintain context when jumping between stories

Priya
28

Postgraduate researcher / student

High Tech Savviness

"I need to navigate the archival content efficiently, filter by period, and find specific stories for my research."

GOALS

  • Filter audio stories by century and theme to support targeted research

  • Access sources and archival references linked to each story

  • Navigate between stories efficiently without losing map position

PAIN POINTS

  • Needs fast, structured access — not a leisurely explore experience

  • Frustrated by interfaces that don't surface source citations clearly

  • Needs the map and story panel to co-exist, not replace each other

Design Process

PHASE 6

Implement

Built the live WordPress site with custom theme and JavaScript-powered interactive map.

  • Built custom WordPress theme with heritage visual system (parchment, torn-paper SVG motifs)

  • Implemented interactive map with JavaScript — pin filtering by century and theme

  • Integrated waveform audio player with prev/next story navigation

  • Delivered live site at sonic-palimpsest.org.uk — publicly accessible since 2023

PHASE 5

Test

Conducted usability testing to validate onboarding, filter discoverability, and audio player comprehension.

  • Usability testing to validate landscape-rotation onboarding for mobile users

  • Tested filter discoverability — Centuries vs. Themes toggle placement and labelling

  • Validated audio player waveform comprehension: users understood progress and scrubbing

  • Iterated story panel layout based on navigation and source citation feedback

PHASE 4

Prototype

Built wireframes and Figma prototypes for the complete map + story panel user flow.

  • Low-fi wireframes for map layout, side-panel, and filter UI

  • Figma prototypes for the full flow: homepage → map → filter → pin → story panel → audio → next story

  • Prototyped mobile landscape-rotation onboarding screen

  • Iterated audio player waveform placement and story panel layout with team review

PHASE 3

Ideate

Explored map interaction paradigms and developed the heritage visual motif system.

  • Explored multiple map filter UI patterns — settled on Centuries/Themes toggle approach

  • Sketched side-panel audio player concepts keeping map visible during playback

  • Developed the torn-paper/parchment visual motif and custom diamond-shaped map markers

  • Designed hand-drawn onboarding arrow callouts for first-time user guidance

PHASE 2

Define

Defined two primary navigation models and established the visual language brief aligned with heritage context.

  • Defined two navigation modes: filter by Century (1547–1984) vs. filter by Theme

  • Mapped complete information architecture for 30+ audio stories across dockyard locations

  • Established visual language brief: parchment palette, serif type, torn-paper edge motifs

  • Defined technical constraints: WordPress CMS, landscape-only map on mobile

PHASE 1

Empathise

Collaborated with the academic team to understand the archival content structure and identify public audience needs.

  • Workshops with Dr Pasoulas and University of Kent research team to map content structure

  • Reviewed existing digital projects (British Library, Museum of London) for UI benchmarks

  • User interviews with history enthusiasts and academic researchers to identify navigation needs

  • Analysed competitor soundmap interfaces to identify patterns and gaps

PHASE 6

Implement

Built the live WordPress site with custom theme and JavaScript-powered interactive map.

  • Built custom WordPress theme with heritage visual system (parchment, torn-paper SVG motifs)

  • Implemented interactive map with JavaScript — pin filtering by century and theme

  • Integrated waveform audio player with prev/next story navigation

  • Delivered live site at sonic-palimpsest.org.uk — publicly accessible since 2023

PHASE 5

Test

Conducted usability testing to validate onboarding, filter discoverability, and audio player comprehension.

  • Usability testing to validate landscape-rotation onboarding for mobile users

  • Tested filter discoverability — Centuries vs. Themes toggle placement and labelling

  • Validated audio player waveform comprehension: users understood progress and scrubbing

  • Iterated story panel layout based on navigation and source citation feedback

PHASE 4

Prototype

Built wireframes and Figma prototypes for the complete map + story panel user flow.

  • Low-fi wireframes for map layout, side-panel, and filter UI

  • Figma prototypes for the full flow: homepage → map → filter → pin → story panel → audio → next story

  • Prototyped mobile landscape-rotation onboarding screen

  • Iterated audio player waveform placement and story panel layout with team review

PHASE 3

Ideate

Explored map interaction paradigms and developed the heritage visual motif system.

  • Explored multiple map filter UI patterns — settled on Centuries/Themes toggle approach

  • Sketched side-panel audio player concepts keeping map visible during playback

  • Developed the torn-paper/parchment visual motif and custom diamond-shaped map markers

  • Designed hand-drawn onboarding arrow callouts for first-time user guidance

PHASE 2

Define

Defined two primary navigation models and established the visual language brief aligned with heritage context.

  • Defined two navigation modes: filter by Century (1547–1984) vs. filter by Theme

  • Mapped complete information architecture for 30+ audio stories across dockyard locations

  • Established visual language brief: parchment palette, serif type, torn-paper edge motifs

  • Defined technical constraints: WordPress CMS, landscape-only map on mobile

PHASE 1

Empathise

Collaborated with the academic team to understand the archival content structure and identify public audience needs.

  • Workshops with Dr Pasoulas and University of Kent research team to map content structure

  • Reviewed existing digital projects (British Library, Museum of London) for UI benchmarks

  • User interviews with history enthusiasts and academic researchers to identify navigation needs

  • Analysed competitor soundmap interfaces to identify patterns and gaps

Built the live WordPress site with custom theme and JavaScript-powered interactive map.

  • Built custom WordPress theme with heritage visual system (parchment, torn-paper SVG motifs)

  • Implemented interactive map with JavaScript — pin filtering by century and theme

  • Integrated waveform audio player with prev/next story navigation

  • Delivered live site at sonic-palimpsest.org.uk — publicly accessible since 2023

PHASE 6

Implement

PHASE 5

Test

Conducted usability testing to validate onboarding, filter discoverability, and audio player comprehension.

  • Usability testing to validate landscape-rotation onboarding for mobile users

  • Tested filter discoverability — Centuries vs. Themes toggle placement and labelling

  • Validated audio player waveform comprehension: users understood progress and scrubbing

  • Iterated story panel layout based on navigation and source citation feedback

PHASE 4

Prototype

Built wireframes and Figma prototypes for the complete map + story panel user flow.

  • Low-fi wireframes for map layout, side-panel, and filter UI

  • Figma prototypes for the full flow: homepage → map → filter → pin → story panel → audio → next story

  • Prototyped mobile landscape-rotation onboarding screen

  • Iterated audio player waveform placement and story panel layout with team review

PHASE 3

Ideate

Explored map interaction paradigms and developed the heritage visual motif system.

  • Explored multiple map filter UI patterns — settled on Centuries/Themes toggle approach

  • Sketched side-panel audio player concepts keeping map visible during playback

  • Developed the torn-paper/parchment visual motif and custom diamond-shaped map markers

  • Designed hand-drawn onboarding arrow callouts for first-time user guidance

PHASE 2

Define

Defined two primary navigation models and established the visual language brief aligned with heritage context.

  • Defined two navigation modes: filter by Century (1547–1984) vs. filter by Theme

  • Mapped complete information architecture for 30+ audio stories across dockyard locations

  • Established visual language brief: parchment palette, serif type, torn-paper edge motifs

  • Defined technical constraints: WordPress CMS, landscape-only map on mobile

PHASE 1

Empathise

Collaborated with the academic team to understand the archival content structure and identify public audience needs.

  • Workshops with Dr Pasoulas and University of Kent research team to map content structure

  • Reviewed existing digital projects (British Library, Museum of London) for UI benchmarks

  • User interviews with history enthusiasts and academic researchers to identify navigation needs

  • Analysed competitor soundmap interfaces to identify patterns and gaps

Research & Discovery

Methods Used
Icon

Stakeholder interviews with university and project staff

Icon

Academic team workshops (University of Kent & University of Greenwich)

Icon

Iterative Figma prototype reviews with academic stakeholders

Icon

Competitive analysis of heritage soundmap and digital archive interfaces

Icon

Usability testing sessions — filter navigation, audio player, mobile onboarding

5

Mobile users needed explicit orientation guidance; landscape-only maps were unfamiliar outside gaming contexts and caused initial frustration without onboarding

4

Heritage users expected visual authenticity — parchment tones and serif typography increased perceived credibility and immersion for museum-adjacent audiences

3

Audio waveform visualisation gave users confidence that content was playing — a plain play button alone led to uncertainty about whether audio had started

2

Filtering by theme proved as important as filtering by century — especially for academic users approaching content by subject rather than time period

1

Users needed a clear mental model of the map before interacting — instructional prompts ('Select Centuries or Themes first') dramatically reduced confusion

Key Insights
Key Insights
Key Insights

5

Mobile users needed explicit orientation guidance; landscape-only maps were unfamiliar outside gaming contexts and caused initial frustration without onboarding

4

Heritage users expected visual authenticity — parchment tones and serif typography increased perceived credibility and immersion for museum-adjacent audiences

3

Audio waveform visualisation gave users confidence that content was playing — a plain play button alone led to uncertainty about whether audio had started

2

Filtering by theme proved as important as filtering by century — especially for academic users approaching content by subject rather than time period

1

Users needed a clear mental model of the map before interacting — instructional prompts ('Select Centuries or Themes first') dramatically reduced confusion

Prototyping Journey

Stage 1
Low-Fidelity

Paper sketches and rough digital wireframes establishing the map-plus-panel layout, filter toggle placement, and side-panel story structure. Focus on spatial logic before visual design.

Paper sketches and rough digital wireframes establishing the map-plus-panel layout, filter toggle placement, and side-panel story structure. Focus on spatial logic before visual design.

Stage 2
Stage 2
Mid-Fidelity
Mid-Fidelity

Responsive digital wireframes for the complete user flow: homepage → map filter → location pin → story side-panel → waveform audio player → prev/next navigation. Landscape mobile constraints mapped here.

Responsive digital wireframes for the complete user flow: homepage → map filter → location pin → story side-panel → waveform audio player → prev/next navigation. Landscape mobile constraints mapped here.

Stage 3
High-Fidelity

Full Figma prototype with heritage visual system applied — parchment palette, serif type, torn-paper SVG edges, diamond map markers, and hand-drawn onboarding callouts. Tested with academic team and target users.

Full Figma prototype with heritage visual system applied — parchment palette, serif type, torn-paper SVG edges, diamond map markers, and hand-drawn onboarding callouts. Tested with academic team and target users.

Dual filter model: Century vs. Theme toggle

Rationale: Research revealed two distinct mental models — history enthusiasts approached content temporally (by era), while academic users approached it thematically. A toggle between both modes ensured neither audience was disadvantaged.

High-contrast colour palette adhering to WCAG 2.1 AA compliance

Rationale: Stakeholder interviews highlighted importance of creating a immmersive soundmap that was accessibility friendly. Usability testing showed users struggled with smaller targets due to colour similarities.

Side-panel story player (not a modal or full-page takeover)

Rationale: Keeping the map visible while engaging with a story maintains spatial context — users know where the story is located while they listen. A modal would break the geographic narrative.

Hand-drawn onboarding arrow callouts on first map load

Rationale: Usability testing showed first-time users didn't know where to start — they would scroll aimlessly without a prompt. Hand-drawn callouts guided first interactions without feeling clinical or intrusive.

Landscape-only map with explicit rotate prompt on mobile

Rationale: Complex interactive map panning and pin selection is not feasible in portrait orientation. Rather than degrading the experience, a clear illustrated prompt ensures users get the full intended experience.

Design Decisions

Design Decisions

Dual filter model: Century vs. Theme toggle

Rationale: Research revealed two distinct mental models — history enthusiasts approached content temporally (by era), while academic users approached it thematically. A toggle between both modes ensured neither audience was disadvantaged.

High-contrast colour palette adhering to WCAG 2.1 AA compliance

Rationale: Stakeholder interviews highlighted importance of creating a immmersive soundmap that was accessibility friendly. Usability testing showed users struggled with smaller targets due to colour similarities.

Side-panel story player (not a modal or full-page takeover)

Rationale: Keeping the map visible while engaging with a story maintains spatial context — users know where the story is located while they listen. A modal would break the geographic narrative.

Hand-drawn onboarding arrow callouts on first map load

Rationale: Usability testing showed first-time users didn't know where to start — they would scroll aimlessly without a prompt. Hand-drawn callouts guided first interactions without feeling clinical or intrusive.

Landscape-only map with explicit rotate prompt on mobile

Rationale: Complex interactive map panning and pin selection is not feasible in portrait orientation. Rather than degrading the experience, a clear illustrated prompt ensures users get the full intended experience.

Final Designs

Explore the final interface designs and key screens

Explore the final interface designs and key screens

Explore the final interface designs and key screens

Design 1
Story Panel with Audio Player

A side-panel overlaying the map showing: archival photograph, year badge, story text, sources and citations, waveform audio player with play/pause/scrub controls, and prev/next story navigation. The map remains visible and interactive.

Design 2
Theme Filter UI

Centuries/Themes toggle with four visual category icons: Community, Craftsmanship, Growth & Experience, and International Relationships. Each theme maps to a distinct earthy accent colour used on the map markers.

Design 3
Mobile Landscape Onboarding

A full-screen rotate prompt shown on portrait mobile — an elegant, clearly illustrated handling of the technical landscape-only constraint. Dismissed automatically on rotation.

For the best viewing experience, please open this page on a desktop or tablet. The final layout is optimised for larger screens.


Note

Accessibility & Inclusion

44px minimum touch targets on all map pins and navigation controls

44px minimum touch targets on all map pins and navigation controls

High-contrast text on parchment background — minimum 4.5:1 ratio throughout

High-contrast text on parchment background — minimum 4.5:1 ratio throughout

Focus indicators visible following WCAG 2.1 AA compliance, on all interactive map elements

Focus indicators visible following WCAG 2.1 AA compliance, on all interactive map elements

WCAAG Compliant UI elements

WCAAG Compliant UI elements

Alt text on all archival photographs in story panels

Alt text on all archival photographs in story panels

Landscape onboarding prompt prevents accidental use in inaccessible portrait mode

Landscape onboarding prompt prevents accidental use in inaccessible portrait mode

Outcomes & Impact

Live

Publicly accessible at sonic-palimpsest.org.uk since 2023 — a maintained, real-world product

Live

Publicly accessible at sonic-palimpsest.org.uk since 2023 — a maintained, real-world product

30+

Individual audio stories mapped across dockyard locations, spanning 437 years of naval history

30+

Individual audio stories mapped across dockyard locations, spanning 437 years of naval history

100%

WCAG 2.1 AA compliance achieved

100%

WCAG 2.1 AA compliance achieved

2 Unis

Joint commission between University of Kent and University of Greenwich — academic research made public

2 Unis

Joint commission between University of Kent and University of Greenwich — academic research made public

Live

Publicly accessible at sonic-palimpsest.org.uk since 2023 — a maintained, real-world product

100%

WCAG 2.1 AA compliance achieved

30+

Individual audio stories mapped across dockyard locations, spanning 437 years of naval history

2 Unis

Joint commission between University of Kent and University of Greenwich — academic research made public

Reflection

What I Have Learned

  • Designing for academic/archival content requires deep domain collaboration — the UI must earn trust with heritage audiences, and that trust is built through visual authenticity as much as usability

  • Spatial interfaces (maps) require careful onboarding — users need a clear 'first move' before they can explore freely; without it, even motivated users stall

  • Audio-first UX is a distinct discipline — visual feedback for sound (the waveform) is as important as the player controls themselves

  • Heritage aesthetic choices are functional, not decorative — parchment tones and serif type signal authenticity to the audience and directly affect their perceived credibility of the content

What I Would Improve

  • Would conduct more usability testing with older, less digitally-fluent heritage visitors — the audience who visit Chatham Dockyard in person skew older than those reached in initial testing

  • Would explore a guided tour mode — a sequential audio journey for first-time visitors that leads them through stories chronologically or thematically

  • Would add a search function for story panel content to support researcher use cases — currently there is no way to search by keyword across the 30+ stories

‹ Amelio Nutrition

‹ Amelio Nutrition

Moodfit Mental Health App ›

Moodfit Mental Health App ›

Interested in working together?

I'd love to discuss how I can bring this same rigorous, human-centred approach to your team.

Get in Touch

Get in Touch