The Cumberland Museum and Archives: Digital Storytelling
December 29, 2025Balancing immersive exploration with navigational clarity.
Project: Digital Museum Web App & In-Gallery Touchscreens
My Role: UX/UI Designer (Subcontractor)
Timeline: April – August 2024 (Launched in May 2025)
Client: Cumberland Museum and Archives
Activities: Information Architecture, System Design, UI/UX Design System, Accessibility Strategy
Tools: WordPress custom theme and custom post types, Figma, Adobe CC
→ Visit the Live Site: https://cumberlandhistory.ca/
Project summary
The Client
The Cumberland Museum and Archives (CMA) tells the stories of the people of Cumberland—the coal miners, activists, immigrants, and radicals who shaped Vancouver Island. The CMA’s exhibits explore social, political, economic, and environmental themes while centring the stories of the people who shaped the community, placing them at the heart of the museum alongside its artifacts and archives.
“Museums are about curiosity, asking questions and finding a connection to people, places and shared experiences.”
Cumberland Museum and Archives
The Project
The Digital Museum was developed to extend the physical museum into a multi-platform environment. I joined the project in its second year to transform a robust backend of researched content into a seamless front-end experience. My objective was to clarify the site’s structure and ensure that the digital interaction mirrored the curiosity and emotional depth of an in-person museum visit.
The Challenge
A Disconnected Archive
Work began with a comprehensive audit of the existing website, prioritizing potential improvements based on effort versus impact. The review revealed that, despite the richness of the content, the beta site lacked a sense of context and a clear structure.
Key Design Goals
- Establish a Visual Anchor:
Redesign the homepage to immediately communicate the museum’s mission through a modern, atmospheric aesthetic. I paired this with intuitive navigation cues to showcase the breadth of content and invite deeper, more meaningful exploration. - Encourage Nonlinear Discovery:
Move away from top-down navigation toward a curiosity-driven journey across related artifacts and themes. By answering where visitors are, what exists, and how different content types connect, navigating the site becomes a cohesive journey rather than a set of disconnected pages. - Differentiate Content Types:
Create unique visual signatures for Stories, Maps, and Collection Items to help users build an accurate “mental map” of the site. - Optimize the Interface:
Implement clearer interactive cues to improve discoverability and reduce cognitive load.
This transition from a static archive to a dynamic discovery tool needed the website’s underlying structure to mirror the way users actually think and explore.
The Strategy
From Hierarchy to Relation
To move beyond a traditional, top-down hierarchy, I developed a Relational Information Architecture. This system treats every piece of content—be it a person, a place, or a photograph—as a node in a larger web, with mulitple connections to other content items.
Designing for different mental models
Three primary user behaviors were identified to guide the navigation design:
(Discovery-Led)
The Explorer: Browsing randomly for interest
Example: A tourist researching their upcoming trip to Cumberland who stumbles across the digital museum and wants to get a “feel” for the place.
Solution: Serendipitous links and “jump-off” points in every article.
(Task-Led)
The Searcher: Looking for specific information
Example: A curious relative researching an ancestor who used to work in the Cumberland mines and wants to find a specific name or date.
Solution: A robust search tool with attribute-based filtering (e.g., story length, community, theme).
(Curated-Led)
The Navigator: Seeking a curated experience
Example: A history enthusiast or educator who wants to be guided through the full narrative arc of the “Labour Movement” without having to piece the timeline together themselves.
Solution: The “Journey” content type.
The Solution
Distinct Content Presentations
My approach was to create a “systems” logic where every content type are differentiated through distinct attributes and interactive identity. This ensured that the UI itself can communicate the nature of the content and provide clear affordances.
Collection Items & People: Specialized card layouts that prioritize metadata for “The Searcher” while offering “lateral” links for “The Explorer.”
Stories: Immersive, scroll-based narratives, where images and text gradually appear as the reader moves down the page. Instead of taking control away from the user, the design responds naturally to scrolling, allowing photographs and text to gently fade in and out (“scroll-fading” instead of “scroll-jacking”). This creates a cinematic, emotional tone without disrupting the reading experience.
Maps: An interactive layout that allows users to zoom into pins while integrating narrative elements directly into the geographical context.
Introducing “Journeys”, A New Narrative Pattern
The concept of a Journeys was introduced to bridge the gap between individual items and broad themes. Unlike the deep-dive nature of Stories, Journeys act as an entry point for exploration through which the user might discover a variety of thematically related content items. For example, a user interested in the “Labour Movement” is guided through a curated path: starting with an overview, moving to a specific story about “Blacklisted Brothers,” and eventually discovering related people (Albert Goodwin), geographic locations (Map of mine camps), or artifacts (photographs of gravestones).
To signal this specific content type, I implemented a horizontal scroll pattern. While the rest of the site is vertical, Journeys move slide-by-slide, visually cueing the user that they are in a curated, linear timeline.
Beyond navigation, Journeys serve as a versatile tool for museum curators. They can highlight evergreen historical themes or act as time-sensitive promotions for new exhibitions and events, allowing the site to remain dynamic and responsive to current museum programming.
→ Explore thedifferent content types at cumberlandhistory.ca
The Search Tool
A simple yet powerful tool for faceted search to allow users to narrow down large sets of results based on content type and curated theme. Each search result’s metadata is readily available so users can make informed decisions about whether to engage with each result. The search tool is persistently available through a shortcut magnifying glass icon in the left-hand menu and transforms a generic search into a targeted, efficient, and user-friendly experience.
The Side Menu
To preserve the cinematic, “story-first” quality of the digital museum, I decided against a traditional horizontal header. A persistent top bar would have created a permanent “ceiling” to the sligin motion and competing for the user’s attention.
Instead, a sliding side menu was introduced that remains tucked away until needed. This approach achieved multiple major goals:
- Ease of Access: It provides a persistent “home base” for navigation that tested well for usability. Readers can quickly jump between the content sections without having to scroll back to the top of a long-form story.
- Visual Immersion: It allows the historical artifacts to fill the screen entirely, maintaining the “moody” atmosphere we established.
- Accessibility Suite: The side menu is also the central hub for the site’s accessilbity options. A digital museum must accommodate diverse needs so the site’s functionality was expanded to ensure technical and cognitive barriers do not prevent exploration. In the side menu users can toggle Dark/Light Mode, increase Text Size, and switch to a Dyslexia-Friendly font.
Accessibility throughout the rest was also considered:
- For users who find animations overwhelming, a “Reader View” option was made available in the stories that strips away transitions and styling, providing a high-contrast, text-only version of every story for distration-free reading and printing.
- By using distinct UI patterns and behaviours for different content types, the design provides predictability and differentiation and reduces cognitive load. Users always know how to interact with a Map vs. a Journey.
- Colours were tested for WCAG contrast and fonts were selected for their strong legibility.
The Visual Language
Designing for the Cumberland Museum & Archives was not just a technical challenge; it was an emotional one. Having lived in the Comox Valley since 2006, I have watched the museum evolve. I am keenly aware of my role as an uninvited settler branding a system for a colonial institution, and this project was an ongoing process of reconciling that history with a modern, respectful future.
Initial Direction: Echoing Historical Grit
My initial approach was to reflect the vivid, turn-of-the-century “placehood” of Cumberland—a town defined by its contradictions: miners vs. bosses, immigrants vs. original keepers of the land, and the gritty history of the mines vs. the lushness of the forest.
- Typography: I chose Bevan for primary headings. A bold slab serif from the 1930s, it evokes the low-cost woodblock printing of early labour posters and union flyers, grounding the site in the physical history of workers’ rights.
- Saturated thematic palette: Colours were inspired both by nature and by labour movement symbolism. The color red symbolizes “the blood of the workers” and historical struggles against the bourgeoisie, a tradition dating back to the French Revolution and adopted by social democratic parties worldwide.
Final Direction: The Modern Gallery Frame
While our initial direction created mood and visually connected to the history of Cumberland, we later decided that the interface needed to be “clean and modern” to act as a neutral gallery frame. We adopted a minimalist aesthetic similar to a modern art gallery, ensuring the historical photography and artifacts provided the primary color and texture.
Typography and Hierarchy:
The typographic system was designed to subtly distinguish between the site’s “operating system” and the “historical content” itself:
- The Framework: I used Epilogue for UI headings and Work Sans for body copy. Work Sans was chosen for its exceptional screen readability and round counters that harmonize with the minimalist UI.
- The Content: To honor the museum’s branding, we repurposed Kalista exclusively for content headings. This creates a “Visual Boundary”—when the font changes, the user knows they have moved from the “Operating System” into the “Content.”
An Atmospheric & Strategic Palette:
The color system is intentionally minimalist, utilizing deep, “moody” darks, stark whites, and neutral grays.
- Physical Grounding: This palette creates a rich background that feels physically grounded—mirroring the hushed, immersive interior of the museum itself.
- Strategic Wayfinding: By keeping the base palette neutral, I used a small number of carefully chosen, highly-saturated accent colors to act as functional cues. These accents guide the user’s eye toward key interactions and navigation points without competing with the historical artifacts.
The Launch and Beyond
The project launched to the public in May 2025 with an opening event, supported by touchscreen stations integrated throughout the physical exhibitions. These installations encouraged visitors to extend their in-person experience through deeper engagement with the digital museum’s multimedia content.
By reframing the site from a static repository into a relational system, the design enabled users to move fluidly from individual artifacts to broader historical narratives, supporting curiosity-driven exploration and contextual understanding. The client and lead contractor were both highly satisfied with the outcome, and the web app continues to evolve as research, curation, and content development progress.
“Claire… you have enabled us to elevate the project through detailed consideration of the digital museum’s user experience and user interface. There are so many wins to celebrate including one of my personal favourites, the side menu bar… and the concept of journeys.”
Rosslyn Shipp, Executive Director, Cumberland Museum and Archives
Claire’s work is founded on a deep knowledge of her craft and the research and
best practices behind it. She applies a logical framework in a creative industry
in a way that few graphic communication professionals do. Her ability to
explain, in lay terms, the rationale behind her choices greatly enhanced our
business and client relationships.Nick Ward, Chief Executive Officer, The Update Company
→ Visit the web app: https://cumberlandhistory.ca/
The museum also acknowledges its position as a colonial-created institution and understands reconciliation as an ongoing, reflective process. In discussion with members of the K’ómoks First Nation, Cumberland Museum and Archives are exploring what reconciliation could mean for their organization and how to create actionable steps. This work may impact the future evolutions of the digital museum.