Louisiana Children’s Museum

In 2019, the Louisiana Children’s Museum opened up a gorgeous new facility. Part of this new opening included a rebranding, and a new website. I built this website in partnership with Peter Mayer Advertising. It’s a highly customized WordPress website, designed to support the various teams and information requirements for the museum. The website is full of custom animations, thoughtful structure, and accessible content and functionality.


  • Travel & Tourism




  • Accessibility (WCAG)
  • Animation
  • UX Design
  • Web Development
  • WordPress


I served as the UX lead for this project, and spent a lot of time planning out the navigation. The process started with a full sitemap. From there, I analyzed which information was crucial to feature at the top of the page – things like the current hours for that day, and a link to purchase tickets. We knew that a majority of the traffic was mobile, so I also had to figure out how to keep all of this information easily accessible at all screen sizes.

Desktop navigation
Screenshot of tablet navigation layout
Mobile Navigation

This site is for a children’s museum, so keeping it fun was a recurring theme. The navigation animations reflect this effort.

Important Content

The site is full of lots of information to share with different audiences. Each page had to be carefully considered for each audience – parents, caretakers, educators, and more.


Experiences Homepage

A museum is nothing without exhibits, so featuring the LCM experiences prominently was crucial. The homepage targets different audiences by showing the experience types, and a more traditional gallery list.

Screenshot of experiences homepage

Experience – Make Your Mark

Individual experiences got a custom template, showcasing up to 3 featured exhibits and unlimited additional exhibits. There are options to add exhibit sponsors, CTA blocks, and links out to review other experiences.

Screenshot of make your mark experience page

Plan Your Visit

Visitors have the option to dive into individual pages for more information about topics like tickets, dining, and accessibility, but I thought it was crucial to have a comprehensive ‘Plan Your Visit’ page which showcased all of these different topics.

Screenshot of plan your visit web page

Visitor Traffic Widget

The museum team wanted a way to display relative traffic each day, so I created a custom traffic widget using a CPT in the backend. Each day has a typical ‘average’ traffic level set, and the museum staff has the option to override the default on any given day by adding a new post.

Screenshot of visitor traffic graph widget
Screenshot of admin area to add new visitor traffic value


There are many dedicated, local museum-goers that are interested in membership plans. LCM offers 3 different plans for different size groups, and with different benefits. It can be a bit confusing to understand which plan is the right one, so the page features an interactive membership calculator to see how much could be saved with the right membership.

Screenshot of memberships web page

Bringing Life to the Site

Making the website fun to use was key – we wanted to make sure we had some interaction that is fun to use, and keeps you around to . For this site, that was the buttons and page transitions. The buttons morph between different SVG shapes on hover, and fill the page on click to transition to the next page.

It was important to keep the site usable and accessible, so we didn’t want to overwhelm with animations. The other way we brought fun and life to the site was with unique shapes. I used SVGs and CSS clipping masks to create different shapes with background patterns, that respond to different amounts of content or screen sizes.

Screenshot of curves and organic shapes on LCM homepage
Screenshot of curves and organic shapes on LCM experiences page

Block Builder

The primary pages of the website utilize custom templates, but the site also needed to have flexibility for the museum team to create new pages for initiatives we didn’t anticipate. I utilized the most common blocks from the other page templates, along with a variety of different header options and color schemes, to create a custom block builder template. This simplified block builder helps maintain accessibility and branding guidelines, while still allowing the LCM team a good deal of control.

Screenshot of wordpress area to create a custom block page
Screenshot of webpage built with custom blocks


The website needed to meet WCAG AA guidelines, and I took charge of this initiative. I worked with the designer and content team to meet the applicable requirements on their end, like appropriate color contrast and providing image alt text. Beyond that, I worked to meet accessibility requirements throughout the development process, like ensuring keyboard accessibility. Finally, the templates and blocks offer guidance (and appropriate restrictions) to maintain accessibility throughout the editing and content creation process.

Screenshot of LCM accessibility web page