We eventually landed on a map-first experience, using visual metaphors from maritime history like a ship’s wheel and vintage cartography stylingto ground the interaction model.
First Design
Chatham Dockyard Soundscapes – A Sonic Palimpsest
The Chatham Dockyard Soundscapes project aimed to create an interactive, time-traveling experience that allows museum visitors to explore history through sound. Users could navigate different centuries, select thematic stories, and hear historical soundscapes — immersing them in the industrial past of the dockyard.
Overview
Role: Lead Web & Graphic Designer
Tools: Figma, WordPress (Custom Theme), GitHub
Team: University of Kent, University of Greenwich, Chatham Historic Dockyards
Project Timeline: Mid-September completion, October conference launch
Despite its rich history, the Chatham Historic Dockyard lacked an engaging way to connect visitors with its past. Traditional museum exhibits were static, offering little in terms of sensory immersion.
Key Challenges:
-
Visitors found it difficult to imagine the dockyard’s past activities from text descriptions alone.
-
The museum needed a way to represent soundscapes interactively, allowing users to hear how the dockyard evolved across centuries.
-
Navigation had to be intuitive for all audiences, from school groups to history enthusiasts.
Problem
Statement
Ideate
Designing an experience that lets users “hear” the past meant starting with a clear UX goal: make the navigation of 500 years of dockyard history feel intuitive, immersive, and engaging across all user groups—including children, casual visitors, and screen reader users.
Design Process & Accessibility
To bring the Chatham Dockyard Soundscapes project to life, I led a human-centered design process rooted in research, collaboration, and accessibility. Starting with stakeholder goals and user personas, I translated functional requirements into a clear information architecture and began developing mid- and high-fidelity wireframes using Figma. These prototypes helped shape the user journey across centuries and themes, balancing immersive storytelling with intuitive navigation. Accessibility guided every design decision—from color contrast and typography to keyboard and screen reader compatibility—ensuring the final experience was inclusive, visually engaging, and ready for real-world museum deployment.
.png)
The Curious School Visitor
Lucy, Age 10
Tertiary Audience | Primary School Student | Trip Attendee
Demographics
-
Age: 10
-
Location: Southeast, Uk
-
Device Experience: Tablet, shared mobile, smartboards
-
Reading Level: Age-appropriate, minimal text comprehension
Goals
-
Explore and understand history in a fun, engaging way
-
Use visuals and sound to form emotional connections with stories
-
Avoid reading-heavy content
Behaviours
-
Taps large buttons without reading full labels
-
Engages with colorful visuals, icons, and animations
-
Learns best through play, visuals, and short soundbites
Design Considerations
-
Prioritise large, high-contrast clickable icons
-
Use audio and animations to reinforce learning
-
Avoid complex navigation or dense text
-
Ensure safe, guided interaction within kiosk environments
The History Enthusiast
David, Age 68
Secondary Audience | Retired Naval Engineer | Solo Visitor
Demographics
-
Age: 68
-
Location: UK (retired coastal town)
-
Device Experience: May use screen readers or larger fonts
-
Reading Level: Age-appropriate, minimal text comprehension
Goals
-
Deepen his understanding of maritime and industrial history
-
Access detailed stories and technical descriptions
-
Navigate comfortably and independently
Behaviours
-
Zooms in on content
-
Seeks structured, linear content paths
-
Favours descriptive text over flashy visuals
-
Patient, but expects clarity and consistency
Design Considerations
-
Provide text scaling and high-contrast mode
-
Include skip-to-content links and screen reader labels
-
Offer deeper content layers with optional “Learn More” expansion
-
Avoid hover-only interactions; support clear keyboard navigation
The Parent & Casual Visitor
Jess, Age 33
Secondary Audience | Young Mother | Weekend Explorer
Demographics
-
Age: 33
-
Location: Greater London
-
Device Experience: Mobile-first, laptop, occasional tablet use
-
Time Online: Short visits, Child-focused
Goals
-
Keep kids engaged while learning something herself
-
Navigate quickly and intuitively
-
Use the experience as both entertainment and education
Behaviours
-
Scrolls quickly, skims content
-
Uses mobile while juggling kids
-
Leaves if content takes too long to load
Design Considerations
-
Provide text scaling and high-contrast mode
-
Include skip-to-content links and screen reader labels
-
Offer deeper content layers with optional “Learn More” expansion
-
Avoid hover-only interactions; support clear keyboard navigation
%20in%20school%20uniform%2C%20exploring%20a%20touchscreen%20in%20a%20museum%20.jpg)
Discovery & Stakeholder Research
01
Make History tangible through Immersive Sound
The primary aim was to allow users to hear how the dockyard sounded across different centuries, offering an emotional, visceral connection to its industrial past.
02
Design for the General Public
The target audience included school groups, families, and casual visitors, requiring a highly intuitive interface with zero learning curve.
03
Use Sound as the Storytelling Medium
Audio would play automatically as users explored each event. There would be no media controls, so the user interface had to intuitively support passive listening while remaining accessible.
04
Enable Navigation by Time and Theme
Users should be able to travel through five centuries of dockyard history and explore stories grouped by thematic categories like Craftsmanship, Technology, and Community.
05
Ensure Long-term Content Flexibility
The design needed to support future content additions (e.g., new time periods or events) via a WordPress CMS powered by custom post types and taxonomies.
06
Integrate a Responsive, Engaging Interactive Map
The map would serve as the primary interface—allowing users to click locations, explore stories, and experience transitions in both visuals and soundscapes.
07
Comply with Accessibility Standards
Although visually and sonically rich, the experience needed to be WCAG 2.1 AA compliant, including keyboard navigation, screen reader compatibility, and color-contrast awareness.
Ideate
Designing an experience that lets users “hear” the past meant starting with a clear UX goal: make the navigation of 500 years of dockyard history feel intuitive, immersive, and engaging across all user groups - including children, casual visitors, and screen reader users.
Brainstorming the Navigation Model
Overview:
During the ideation phase, I explored multiple navigation models with the goal of letting users intuitively explore both chronological history and theme-based discovery (e.g., "Technology", "Community"). We needed a system that would work seamlessly across devices, maintain historical immersion, and support accessible interaction. I sketched and prototyped several interaction concepts before selecting the final approach.
Key Question:
“How do we let users travel through time and across themes, without relying on heavy menus or traditional site architecture?”
Ideas included:
-
Timeline sliders
-
Modal windows
-
Dropdown-based navigation
-
Map overlays with toggles
-
Spatial UI objects (wheels, compasses, icon pins)
Timeline Sliders
We considered using a horizontal slider for century selection -something familiar to users from digital timelines. While this approach offered clear chronological control, it felt too modern and flat for the tone of the project. It also reduced thematic flexibility, as toggling between “Technology” and “Craftsmanship” wasn’t intuitive when time was the only axis in focus. On smaller screens, the interaction also became cramped and hard to control precisely.
Spatial UI Objects
The initial design had a ship-themed direction. Inspired by ship instruments and old navigational tools, I began designing spatial UI elements like a ship’s wheel for switching between time and theme views, a central compass to reorient the user, and icon-based pins to represent events on the map.
This concept aligned with several core goals:
🧭 It fit the maritime aesthetic and historical narrative of the project.
🌍 It reduced interface friction - the map remained the focus while navigation floated within its visual language.
🎯 It invited playful exploration, making the experience more tactile and memorable.
♿ It adapted well to accessibility, with each interactive element having clear states and large touch targets.
High-Fidelity Wireframes
Advanced prototypes refined the interactions—smooth transitions, dynamic filtering by time periods and themes, and interactive hotspots on the map.
Test: Validating the Experience
To ensure the final design met user needs and aligned with business goals, I conducted usability testing on a mid-to-high fidelity prototype of the Amelio Nutrition platform. The primary goal was to evaluate how well users could navigate the site, understand core features, and complete key tasks without friction.
UI Design: Interactive Map Interface
The prototypes allowed us to quickly test how users navigated between time periods and themes, whether iconography and color were intuitive for younger or low-literacy users, and how seamless the audio experience felt across desktop, tablet, and kiosk displays.
Buttons and Hotspots
To ensure WCAG 2.1 AA+ compliance, button components and interactive hotspots follow a two-tone design: a fill color (e.g. #EAE3D9) and a border color (e.g. #B69E8C) for normal states, which invert on hover to provide a minimum 3:1 contrast ratio against both the background and adjacent map details. Each button and icon—sourced from our custom SVG library—is sized for a minimum 44×44px touch target and paired with clear focus outlines, ensuring seamless keyboard and touchscreen operation.
Interactive elements leverage micro-interactions to reinforce engagement:
Buttons gently expand by 5% with a soft shadow on hover, signaling interactivity.
.jpg)