National Children's Museum
Design System
Web
The National Children’s Museum website was redesigned to create a modern, accessible, and engaging digital experience that better reflected the museum’s playful mission. The project focused on rebuilding the site using a modular, component-based design system that would allow the platform to scale while remaining easy for internal teams to manage.
Services
Product Design, Strategy, Branding, No-Code Development
Stack
Framer, Figma, Adobe CC
Timeline
4 weeks
Overview
The National Children’s Museum website was redesigned to create a modern, accessible, and engaging digital experience that better reflected the museum’s playful mission. The project focused on rebuilding the site using a modular, component-based design system that would allow the platform to scale while remaining easy for internal teams to manage.
Working within a cross-functional team of strategists, developers, and product stakeholders, I led the UX design process from wireframes to high-fidelity designs. The goal was to improve usability across devices, strengthen accessibility, and create a design system that could support future content and features.
The problem
The existing website presented several usability and technical challenges. Over 90% of users accessed the site on mobile, yet the mobile experience performed poorly and made it difficult for visitors to navigate content or complete key tasks such as purchasing tickets. In addition, inconsistent design patterns and outdated functionality created accessibility barriers that limited usability for a diverse audience.
The site was also difficult for the internal team to maintain. Multiple plugins and custom CSS had accumulated over time, making updates complex and inefficient. At the same time, the website failed to capture the joyful and playful identity of the museum experience, creating a disconnect between the physical visit and the digital presence.
My role
As the UX Designer on the project, I was responsible for designing the structure and interface of the new website experience. My work began with creating low-fidelity wireframes that defined page layouts, user flows, and navigation patterns across the site.
Once the structure was validated, I developed high-fidelity designs using Figma and built a modular design system composed of reusable components. I also collaborated closely with developers during implementation, using Figma’s Dev Mode and design tokens to ensure a smooth handoff and consistent execution across the site.
Approach
The redesign followed a mobile-first approach due to the high percentage of mobile users. Early wireframes focused on improving navigation and content hierarchy so visitors could quickly find essential information such as exhibits, events, and ticket purchases. Clear wayfinding elements and breadcrumb navigation were introduced to help users move more easily through the site.
The visual design phase focused on translating the museum’s playful brand into a scalable digital experience. Vibrant colors, engaging visuals, and expressive typography helped capture the spirit of the museum while maintaining strong accessibility standards. At the same time, a component-based design system was created to ensure consistent UI patterns and allow new pages and features to be built efficiently.
Outcome
The redesigned website significantly improved usability and performance, particularly on mobile devices where most visitors accessed the site. Clearer navigation and streamlined user flows made it easier for visitors to explore exhibits, learn about programs, and purchase tickets.
The modular design system also made the platform easier for the internal team to maintain and expand. By establishing reusable components and consistent design patterns, the website now provides a scalable foundation that supports future content updates while delivering a more engaging and accessible digital experience.
