Pittsburgh Children's Museum Website Redesign

Role

UX Designer

Client

Pittsburgh Children's
Museum

Time

Fall 2023

The Problem Space

When a person clicks on the Pittsburgh Children Museum’s website, they are met with a sea of unused whitespace and a surplus of clickable navigation options. The landing page does not capture the user’s attention or reflect the exciting atmosphere of a children’s museum. The navigation bar has two layers and many different options to click on. Each navigation button leads to an unnecessarily long dropdown, which overwhelms the user. In short, the website needs improvements in both visual design and information architecture. How might we capture the essence of a children’s museum while making the information laid out in a more user-friendly way?

The Solution

I redesigned the website to be playful and eye-catching, while also being easy to navigate for every user. The most prominent interactive element is the tickets button, encouraging the user to click on it. Events are the next section on the page, since they are time-sensitive and change often. I placed exhibits underneath because they are the main feature of the museum and hold great value. Finally, reviews were added to the bottom, since they are less important, but still might nudge users into attending.

Color

The chosen colors are highly saturated, reminiscent of a playground or ball pit. Softer, high-tint colors are used in the background to break up the whitespace and frame different sections. Gradients were used on thumbnails to provide a backdrop to the text without taking away from the images themselves.

Shapes

Asymmetrical, gently sloped shapes were used since they are fun and exciting while still feeling kid-friendly. Rounded corners make the page look safe and inviting.

Design Process

I began by analyzing user archetypes and creating jobs to be done. The main users for a children’s museum would be parents, educators, museum members, people new to the area who want to explore local hotspots, and finally, kids. Thinking from their POV when using the website, I created jobs to be done for each archetype:

Make the site easy to navigate for a planning parent, to make their lives easier and make them excited to take their kids to the museum

When: I want to go to the museum with my child
I want: to find all of the relevant information quickly and easily
So I can: efficiently plan my trip

Make the site teacher-friendly, to make their job easier and so they will take their students to the museum

When: I want to plan a field trip for my students
I want: to easily find relevant information for teachers
So I can: plan an educational, fun field trip

Make the website kid-friendly and fun, so the kids will want to go there

When: I look at the website with my parent
I want to: feel excited and connected to the museum website
So I can: explore more and be excited to go in real life

Show members the museum values them through easy renewal, member info, and news

When: I visit the website
I want to: feel valued as a member
So I can: renew my membership, find member-exclusive content, and feel connected to the museum through my membership

Show what makes the museum special, include fun facts and historical tidbits that engage new residents

When: I visit the museum as a new resident
I want to: feel connected to the museum
So I can: feel connected to the larger community

Keeping these key elements in mind, I looked at the current information architecture and created a new site map. Everything is meant to be accessible in 3 clicks or less. This was the foundation for my navigation bar.

I went through many iterations and page layouts before arriving at my final design. My intention was to use shapes reminiscent of bubbles and waves to make the website light and fun. However, I went too far, which made everything blend together and muddled the visual hierarchy. The colors were chosen to mesh well with the hero image, but they compete with each other. Finally, I did not think the hero image was compelling enough, and changed it.