London Museum

As the museum prepared to transition from the Museum of London brand to the new London Museum identity, the digital team needed a modern, reliable front-end foundation for the redesigned website. My role was to translate the new visual identity and UX direction into a maintainable, production-ready front-end architecture.

Working closely with the Torchbox’s developers, and London Museum's brand team, we implemented key UI components, established a structured design system, and ensured that patterns were accessible, consistent, and easy for the internal team to extend. This included building page templates, navigation patterns, and reusable modules that could adapt to the site’s varied content — exhibitions, events, learning resources, stories, and institutional information.

The work also involved refining interaction details, supporting content modelling discussions, and collaborating with back-end engineers to ensure seamless integration with the CMS and the museum’s existing systems.

Design System Setup

A major part of the project was laying the groundwork for an evolving design system. This included:

• Implementing design tokens for colour, spacing, type, and motion
• Building a flexible component library used across templates
• Documenting interaction states, accessibility requirements, and responsive behaviour
• Ensuring patterns were WCAG-compliant and worked well across devices
• Providing guidance and code structure that allowed the internal team to iterate confidently as the site grows

Outcome

The London Museum now has a stable, coherent front-end and a design system that supports both the initial launch and future phases of the site. The approach improved consistency, reduced duplication, and gave the digital team a solid platform to build upon as new content, features, and exhibitions are introduced.