Marx Memorial Library
MML struggled with low visibility and an outdated digital presence. I created a refreshed brand system and redesigned its website to provide clearer navigation and a more engaging experience.
Context
The Marx Memorial Library is a historic institution in London known for its rich collection of political, social, and cultural archives. The library has been an important reference point for researchers, students, and visitors who are interested in understanding the history of working class movements and related global narratives.
Although the physical archives are well regarded, the digital presence had not kept up with the needs of modern audiences. Most visitors who were discovering the library for the first time did so through the website, yet the online experience did not reflect the depth and value of the collection. The information was difficult to navigate, the design felt dated, and younger users often struggled to understand where to begin.
This project focused on creating a clearer, more approachable digital identity for the library, one that respects its heritage while making the experience welcoming for new and returning visitors.
Context
The Marx Memorial Library is a historic institution in London known for its rich collection of political, social, and cultural archives. The library has been an important reference point for researchers, students, and visitors who are interested in understanding the history of working class movements and related global narratives.
Although the physical archives are well regarded, the digital presence had not kept up with the needs of modern audiences. Most visitors who were discovering the library for the first time did so through the website, yet the online experience did not reflect the depth and value of the collection. The information was difficult to navigate, the design felt dated, and younger users often struggled to understand where to begin.
This project focused on creating a clearer, more approachable digital identity for the library, one that respects its heritage while making the experience welcoming for new and returning visitors.
Context
The Marx Memorial Library is a historic institution in London known for its rich collection of political, social, and cultural archives. The library has been an important reference point for researchers, students, and visitors who are interested in understanding the history of working class movements and related global narratives.
Although the physical archives are well regarded, the digital presence had not kept up with the needs of modern audiences. Most visitors who were discovering the library for the first time did so through the website, yet the online experience did not reflect the depth and value of the collection. The information was difficult to navigate, the design felt dated, and younger users often struggled to understand where to begin.
This project focused on creating a clearer, more approachable digital identity for the library, one that respects its heritage while making the experience welcoming for new and returning visitors.
Project type:
User Experience Design
Timeline:
7 weeks
Tool:
Figma, Figjam, Adobe Illustrator
My Role:
UX designer
Team:
3 UX Designers, 1 Graphic Designer
The Problem
The Marx Memorial Library (MML) houses one of the UK’s most important collections of political and cultural history.
But its digital presence did not reflect its value.
Website was visually outdated
Navigation was dense and unclear
Younger audiences struggled to explore the collection
Branding lacked consistency and recognizability
Information was heavily text-driven with minimal hierarchy
The library needed a modern, engaging digital identity that preserved its heritage while attracting new visitors.
The Problem
The Marx Memorial Library (MML) houses one of the UK’s most important collections of political and cultural history.
But its digital presence did not reflect its value.
Website was visually outdated
Navigation was dense and unclear
Younger audiences struggled to explore the collection
Branding lacked consistency and recognizability
Information was heavily text-driven with minimal hierarchy
The library needed a modern, engaging digital identity that preserved its heritage while attracting new visitors.
The Problem
The Marx Memorial Library (MML) houses one of the UK’s most important collections of political and cultural history.
But its digital presence did not reflect its value.
Website was visually outdated
Navigation was dense and unclear
Younger audiences struggled to explore the collection
Branding lacked consistency and recognizability
Information was heavily text-driven with minimal hierarchy
The library needed a modern, engaging digital identity that preserved its heritage while attracting new visitors.
The current website homepage
The current website homepage
Research & Insights
To understand the library’s needs, I conducted:
Site visit and interviews of users and stakeholders
A UX audit of the existing site
Comparative analysis of cultural institutions (British Library, V&A, Museum of London)
Reviews of user feedback from visitors and students
Analysis of content structure and common navigation patterns
Research & Insights
To understand the library’s needs, I conducted:
Site visit and interviews of users and stakeholders
A UX audit of the existing site
Comparative analysis of cultural institutions (British Library, V&A, Museum of London)
Reviews of user feedback from visitors and students
Analysis of content structure and common navigation patterns
Research & Insights
To understand the library’s needs, I conducted:
Site visit and interviews of users and stakeholders
A UX audit of the existing site
Comparative analysis of cultural institutions (British Library, V&A, Museum of London)
Reviews of user feedback from visitors and students
Analysis of content structure and common navigation patterns
Site Visit & Interviews
Site Visit & Interviews
Site Visit & Interviews
Before we even stepped inside the Marx Memorial Library, we spent time researching its history so we knew exactly what questions to ask. When we visited, we sat down with the people who run it and the people who use it to understand how the library actually works and what was holding it back. We realized a big problem: the library is full of incredible stories, but it "fades into the streets" because there’s no clear signage and it is almost "silent" online. Our mission became clear, we needed to take this "hidden" archive and turn it into a "house of knowledge" that is easy to find, fun to use, and feels like home.
Findings
Key themes emerging from user interviews around archives, visibility, and engagement.
UX Audit
UX Audit
Overcrowded Header
Multiple stacked navigation bars make it hard to know where to start.Weak Visual Hierarchy
No clear headline; users don’t know the main purpose of the page at first glance.Too Much Empty Space
Large white gaps push important content downwardMisaligned Branding
The hero graphic style doesn’t match the logo or overall visual identity, causing inconsistency.No Clear Call-to-Action
The hero section doesn’t guide users toward actions like “Explore Archives” or “Visit Us.”Low Engagement Visuals
The hero image appears without context and doesn’t communicate what the library offers.Navigation Feels Disconnected
Top links (Visit, Donate, Join) feel isolated from the main menu, creating confusion.?
Low Visual Engagement
Event cards look small and visually disconnected from each other; no clear grouping or structure. Posters are too small to readUnclear Navigation Arrows
The left/right arrows appear far from the content and don’t visually signal that this is a carousel.Missing Context
No section description or preview text to explain what types of events MML offers.Overwhelming Text Block
Long paragraphs with no visual breaksLack of Structure
No clear grouping of information (e.g., Tours, Reading Room, Contact, Accessibility) everything blends together.
?
}
Weak Visual Hierarchy
All text looks similar in weight and spacing, so important info (hours, booking, accessibility) doesn’t stand out.Low Readability
Dense text, italics, and mixed formatting reduce clarity, especially for users skimming for practical details.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Inefficient Use of Space
Large empty areas above and below the form make the layout feel unbalanced.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Unclear CAPTCHA Placement
CAPTCHA text appears merged with form fields, causing confusion about the form flow.Low Visibility CTA
The “Sign up” button blends into the background and lacks prominence.No Icons or Visuals
Useful quick-scan elements like map pins, or accessibility icons are missing, making the page less user-friendly.
?
?
Dense, Unscannable Text
Long paragraphs without spacing or visual breaksPoor Layout Balance
Narrow column of text on the left creates a heavy imbalance, leaving empty space.Lack of Clear Grouping
Important topics (Booking, Copying, Enquiries, Workshops, Policies) are not visually separated, making navigation harder.Inconsistent Link Styling
Red text links appear scattered throughout without structureInconsistent Link Styling
Red text links appear scattered throughout without structure
?
?
No Clear Content Structure
Missing Calls to Action
Accessibility Concerns
?
Weak Visual Hierarchy
Overwhelming Text Block
Unbalanced Layout
Inconsistent Alignment
Overcrowded Header
Multiple stacked navigation bars make it hard to know where to start.Weak Visual Hierarchy
No clear headline; users don’t know the main purpose of the page at first glance.Too Much Empty Space
Large white gaps push important content downwardMisaligned Branding
The hero graphic style doesn’t match the logo or overall visual identity, causing inconsistency.No Clear Call-to-Action
The hero section doesn’t guide users toward actions like “Explore Archives” or “Visit Us.”Low Engagement Visuals
The hero image appears without context and doesn’t communicate what the library offers.Navigation Feels Disconnected
Top links (Visit, Donate, Join) feel isolated from the main menu, creating confusion.?
Low Visual Engagement
Event cards look small and visually disconnected from each other; no clear grouping or structure. Posters are too small to readUnclear Navigation Arrows
The left/right arrows appear far from the content and don’t visually signal that this is a carousel.Missing Context
No section description or preview text to explain what types of events MML offers.Overwhelming Text Block
Long paragraphs with no visual breaksLack of Structure
No clear grouping of information (e.g., Tours, Reading Room, Contact, Accessibility) everything blends together.?
}
Weak Visual Hierarchy
All text looks similar in weight and spacing, so important info (hours, booking, accessibility) doesn’t stand out.Low Readability
Dense text, italics, and mixed formatting reduce clarity, especially for users skimming for practical details.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Inefficient Use of Space
Large empty areas above and below the form make the layout feel unbalanced.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Unclear CAPTCHA Placement
CAPTCHA text appears merged with form fields, causing confusion about the form flow.Low Visibility CTA
The “Sign up” button blends into the background and lacks prominence.No Icons or Visuals
Useful quick-scan elements like map pins, or accessibility icons are missing, making the page less user-friendly.?
?
Dense, Unscannable Text
Long paragraphs without spacing or visual breaksPoor Layout Balance
Narrow column of text on the left creates a heavy imbalance, leaving empty space.Lack of Clear Grouping
Important topics (Booking, Copying, Enquiries, Workshops, Policies) are not visually separated, making navigation harder.Inconsistent Link Styling
Red text links appear scattered throughout without structureInconsistent Link Styling
Red text links appear scattered throughout without structure?
?
No Clear Content Structure
Missing Calls to Action
Accessibility Concerns
?
Weak Visual Hierarchy
Overwhelming Text Block
Unbalanced Layout
Inconsistent Alignment
Overcrowded Header
Multiple stacked navigation bars make it hard to know where to start.Weak Visual Hierarchy
No clear headline; users don’t know the main purpose of the page at first glance.Too Much Empty Space
Large white gaps push important content downwardMisaligned Branding
The hero graphic style doesn’t match the logo or overall visual identity, causing inconsistency.No Clear Call-to-Action
The hero section doesn’t guide users toward actions like “Explore Archives” or “Visit Us.”Low Engagement Visuals
The hero image appears without context and doesn’t communicate what the library offers.Navigation Feels Disconnected
Top links (Visit, Donate, Join) feel isolated from the main menu, creating confusion.?
Low Visual Engagement
Event cards look small and visually disconnected from each other; no clear grouping or structure. Posters are too small to readUnclear Navigation Arrows
The left/right arrows appear far from the content and don’t visually signal that this is a carousel.Missing Context
No section description or preview text to explain what types of events MML offers.Overwhelming Text Block
Long paragraphs with no visual breaksLack of Structure
No clear grouping of information (e.g., Tours, Reading Room, Contact, Accessibility) everything blends together.?
}
Weak Visual Hierarchy
All text looks similar in weight and spacing, so important info (hours, booking, accessibility) doesn’t stand out.Low Readability
Dense text, italics, and mixed formatting reduce clarity, especially for users skimming for practical details.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Inefficient Use of Space
Large empty areas above and below the form make the layout feel unbalanced.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Unclear CAPTCHA Placement
CAPTCHA text appears merged with form fields, causing confusion about the form flow.Low Visibility CTA
The “Sign up” button blends into the background and lacks prominence.No Icons or Visuals
Useful quick-scan elements like map pins, or accessibility icons are missing, making the page less user-friendly.?
?
Dense, Unscannable Text
Long paragraphs without spacing or visual breaksPoor Layout Balance
Narrow column of text on the left creates a heavy imbalance, leaving empty space.Lack of Clear Grouping
Important topics (Booking, Copying, Enquiries, Workshops, Policies) are not visually separated, making navigation harder.Inconsistent Link Styling
Red text links appear scattered throughout without structureInconsistent Link Styling
Red text links appear scattered throughout without structure?
?
No Clear Content Structure
Missing Calls to Action
Accessibility Concerns
?
Weak Visual Hierarchy
Overwhelming Text Block
Unbalanced Layout
Inconsistent Alignment
Overcrowded Header
Multiple stacked navigation bars make it hard to know where to start.Weak Visual Hierarchy
No clear headline; users don’t know the main purpose of the page at first glance.Too Much Empty Space
Large white gaps push important content downwardMisaligned Branding
The hero graphic style doesn’t match the logo or overall visual identity, causing inconsistency.No Clear Call-to-Action
The hero section doesn’t guide users toward actions like “Explore Archives” or “Visit Us.”Low Engagement Visuals
The hero image appears without context and doesn’t communicate what the library offers.Navigation Feels Disconnected
Top links (Visit, Donate, Join) feel isolated from the main menu, creating confusion.?
Low Visual Engagement
Event cards look small and visually disconnected from each other; no clear grouping or structure. Posters are too small to readUnclear Navigation Arrows
The left/right arrows appear far from the content and don’t visually signal that this is a carousel.Missing Context
No section description or preview text to explain what types of events MML offers.Overwhelming Text Block
Long paragraphs with no visual breaksLack of Structure
No clear grouping of information (e.g., Tours, Reading Room, Contact, Accessibility) everything blends together.?
}
Weak Visual Hierarchy
All text looks similar in weight and spacing, so important info (hours, booking, accessibility) doesn’t stand out.Low Readability
Dense text, italics, and mixed formatting reduce clarity, especially for users skimming for practical details.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Inefficient Use of Space
Large empty areas above and below the form make the layout feel unbalanced.Overwhelming Red Background
The heavy color block reduces readability and adds visual strain.Unclear CAPTCHA Placement
CAPTCHA text appears merged with form fields, causing confusion about the form flow.Low Visibility CTA
The “Sign up” button blends into the background and lacks prominence.No Icons or Visuals
Useful quick-scan elements like map pins, or accessibility icons are missing, making the page less user-friendly.?
?
Dense, Unscannable Text
Long paragraphs without spacing or visual breaksPoor Layout Balance
Narrow column of text on the left creates a heavy imbalance, leaving empty space.Lack of Clear Grouping
Important topics (Booking, Copying, Enquiries, Workshops, Policies) are not visually separated, making navigation harder.Inconsistent Link Styling
Red text links appear scattered throughout without structureInconsistent Link Styling
Red text links appear scattered throughout without structure?
?
No Clear Content Structure
Missing Calls to Action
Accessibility Concerns
?
Weak Visual Hierarchy
Overwhelming Text Block
Unbalanced Layout
Inconsistent Alignment
UX Audit Key Findings
Here is a short visualization of the key usability issues I identified during my audit of existing websites.
Unheard voices of their counter archives.
Accessibility, online archives and lack of visibility of the building.
Lack of participatory element in how archives are created, shared, and experienced.
Lack a distinct visual identity that reflects the archive's character.
Irregular display of archives in the library and physical space.
The space is cluttered and not utilized properly.
Zero social media engagement around the archive and its activities.
The website is not organized and is displeasing to the eyes.
Comparative Analysis
Comparative Analysis
Comparative Analysis
To identify industry standards for accessibility and engagement, we audited two direct competitors that manage historical data:
The London Archives: A primary competitor in archiving city history.
The British Museum: A global standard for museum accessibility and exhibition display.
Marx Memorial Library (MML): The subject of our audit (Baseline).
Comparative Analysis Research Findings
Here's a short visualisation of what we found out through the intense research
Benchmarking targets: British Museum, London Metropolitan Archives, and Marx Memorial Library (MML) as baseline.
Archive accessibility (competitors): catalogues are properly segmented with fluid filtering and intuitive navigation.
Archive accessibility (MML): catalogue is not well-organized, lacks robust filters, and the information hierarchy feels disorganized.
Physical space (competitors): interiors use clear archival displays with strong narrative cues and wayfinding.
Physical space (MML): walls lack curated archival displays; the room feels cluttered and underutilized.
Engagement (competitors): social channels are active, visually rich, and tailored to younger audiences.
Engagement (MML): currently has zero meaningful social media presence or participatory digital touchpoints.
Visual identity (competitors): flexible color systems and fresh typographic choices support accessible storytelling.
Visual identity (MML): over-reliance on flat red, a pessimistic tone, and no distinct identity system for archives.
Solution
Revisiting our research and goals:
We paused to cross-reference our concepts against our initial data. By revisiting the user needs and business goals, we ensured that every design decision directly addressed a specific pain point. This stage was vital for grounding our strategy, reminding us that effective design isn't just about aesthetics it's about solving the right problems for the right people.
We approached the solution in 4 phases
Logo Concept Research & Generation
The Design System
Lo-Fi (Process & Wireframing)
The Final Designs
Solution
Revisiting our research and goals:
We paused to cross-reference our concepts against our initial data. By revisiting the user needs and business goals, we ensured that every design decision directly addressed a specific pain point. This stage was vital for grounding our strategy, reminding us that effective design isn't just about aesthetics it's about solving the right problems for the right people.
We approached the solution in 4 phases
Logo Concept Research & Generation
The Design System
Lo-Fi (Process & Wireframing)
The Final Designs
Logo Concept Research & Generation
We didn't just pick a font, we researched the history of the movement and the building itself to find a symbol.
The Bookshelf Concept: We explored books as the primary inspiration for the logo. The final design aligns the letters "MML" to resemble books sitting on a shelf, symbolizing the library as a repository of knowledge.
Logo Concept Research & Generation
Logo Concept Research & Generation
We didn't just pick a font, we researched the history of the movement and the building itself to find a symbol.
The Bookshelf Concept: We explored books as the primary inspiration for the logo. The final design aligns the letters "MML" to resemble books sitting on a shelf, symbolizing the library as a repository of knowledge.
Font Selection
Font Selection
Font Selection
Our font selection was built on the strategy of "Binary Opposites" balancing the serious academic nature of the library with a spirited, modern accessibility.
Typography: Guided by a workshop on Piet Zwart (New Typography), we selected a contrasting pair:
Primary (Headings):
Roboto Slab – chosen to look "Academic and Serious".Secondary (Body):
Nunito Sans – chosen to be "Flowy and Free".
Lo-Fi Designs
Lo-Fi Designs
Lo-Fi Designs
Final Designs
Final Designs
Final Designs
A. The "Window" Homepage
Concept: The homepage features three interactive windows. On hover, they animate inward, offering a glimpse into the library's interior.
Why: This connects the digital user to the physical building immediately.
B. The "Folder" Navigation
Concept: The About Us page is designed like a file folder. When a user hovers, the tab slides up, mimicking the action of opening a real archive file.
Why: It captures the "warmth and essence" of the library by referencing tactile objects.
C. The Restructured Catalogue
Problem: The old catalogue had "too many clicks" and "poorly organized content".
Solution: I flattened the hierarchy. Users can now access "Special Collections" (e.g., Spanish Collection) directly from the menu.
Feature: Added a faceted search bar allowing users to filter by Type, Year, Author, and Shelf Reference simultaneously.
D. AR Graffiti (The "Invisibility" Fix)
Problem: We couldn't paint the Grade II listed building to make it visible.
Solution: An Augmented Reality (AR) feature where users scan the building to reveal digital graffiti and "hidden voices" on their screens.
Final Design
Click in the frame once to start interacting, press 'R' to return to the homepage.
Learnings
Audit Before Action: I learned that effective design starts with a deep dive into existing friction points. By auditing MML’s current site and comparing it to other archives, I could clearly see where user engagement was falling off and exactly what needed fixing.
Bridging the Physical-Digital Gap: This project showed me how to make a "static" institution feel dynamic. I learned to use interactive elements like quizzes, chatbots, and polls to turn quiet archival content into an active, social conversation.
Inclusive Visual Storytelling: I realized that visual identity should represent the community. Choosing colors and typography that evoke both "academic nostalgia" and "blue-collar history" helped me create a brand that feels respectful of the past but accessible to the next generation.
Content Hierarchy as Strategy: While prototyping the website, I learned that good UX is often about what you remove. By focusing on content hierarchy, I was able to turn a disorganized, cluttered interface into a clear path for researchers and visitors.
The Power of Participatory Design: My biggest takeaway was that a product is more successful when the audience feels like they own part of it. Using social media templates and volunteer stories helped transform MML from just a building into a living community platform.
Learnings
Audit Before Action: I learned that effective design starts with a deep dive into existing friction points. By auditing MML’s current site and comparing it to other archives, I could clearly see where user engagement was falling off and exactly what needed fixing.
Bridging the Physical-Digital Gap: This project showed me how to make a "static" institution feel dynamic. I learned to use interactive elements like quizzes, chatbots, and polls to turn quiet archival content into an active, social conversation.
Inclusive Visual Storytelling: I realized that visual identity should represent the community. Choosing colors and typography that evoke both "academic nostalgia" and "blue-collar history" helped me create a brand that feels respectful of the past but accessible to the next generation.
Content Hierarchy as Strategy: While prototyping the website, I learned that good UX is often about what you remove. By focusing on content hierarchy, I was able to turn a disorganized, cluttered interface into a clear path for researchers and visitors.
The Power of Participatory Design: My biggest takeaway was that a product is more successful when the audience feels like they own part of it. Using social media templates and volunteer stories helped transform MML from just a building into a living community platform.
You might also like
Little Grips: A Digital Play Experience
A digital reimagining of a classic toy that brings tactile play to the digital world, combined with clear visual solutions that help people understand and reduce their plastic footprint.
sustainability
visual design
system mapping
The Tangled Within
A 15-second motion piece symbolising a child’s journey from confusion to clarity through the metaphor of a tangled thread and needle.
motion design
storytelling
layout design
