Louisiana Children’s Museum

Navigation

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.

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.

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.

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.

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.

Memberships

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.

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.

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.

Accessibility

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.