Back
Out of OfficeInfo
Monterey Bay Aquarium
Connecting people to the ocean’s wonders and inspiring conservation since 1984, the aquarium features over 200 exhibits. This project aimed to create a welcoming user flow, improve ticket purchasing, and enhance website navigation, making the experience more accessible and enjoyable for everyone.

Pain Points
Visitors often found the ticket purchasing process on the aquarium’s website confusing, leading to frustration. Navigation was not intuitive, making it difficult to find essential information. Additionally, customers expressed concerns about safety and comfort when planning a return visit after a long absence.

Opportunities
There was an opportunity to streamline the ticket purchasing process, helping users feel confident in their transactions. Improving website navigation would enable visitors to find key information quickly, while a welcome-back user flow could reassure them of a safe and enjoyable visit.
A group of six individuals, part of a virtual meeting titled “Deep Divers,” are displayed in a Zoom-style grid. The background features an underwater scene, with fish and coral, creating an oceanic theme. Each participant has their name displayed above them, contributing to a professional yet relaxed atmosphere as they engage in conversation or focus on the discussion.
We kicked off the project with a virtual meeting where we got to know the clients through icebreakers, discussions, and activities. This helped us understand their needs and goals for the project. The focus was on addressing any UX or content issues with the mega navigation and providing recommendations for improvement.
‍
Our goal was to improve the overall experience by making the navigation easier to use and more intuitive. We wanted to create a user flow that not only gives visitors the information they need but also fills them with excitement and confidence as they plan their return to the museum, ensuring a seamless and enjoyable visit.
Shortly after launching its new website, Monterey Bay Aquarium had to close due to COVID-19, giving us the chance to adapt the site for post-pandemic needs.
We used several research methods tailored to the project’s needs. We began with a Competitive Analysis to see how other websites were navigating the pandemic. Then, we conducted more in-depth, task-focused research, including first-click tests, card sorting, and usability testing. These methods helped us understand how users interacted with the site and allowed us to refine the user flow and information architecture based on real feedback.
Heatmap of the Monterey Bay Aquarium’s homepage, highlighting user attention hotspots. The visual shows where users are most likely to focus, such as key navigation elements like the “Animals” tab, the welcome banner, and the headline text “Catch up with some old friends,” providing insight into how users interact with the page. The heatmap helps to analyze user engagement and improve the website’s design for better usability.
First Click Test:
We used heat maps to track where participants clicked first on the website, gaining insight into user expectations and behavior.
84% of participants felt confident about their first click.
32% clicked on image cards over text links.
Card Sorting:
‍Participants grouped content to improve the mega navigation’s information architecture.
40% felt the live cam should be under “Visit.”
Usability Testing:
‍Participants performed tasks to evaluate the website’s usability.
62% of participants had a desire for COVID-19 safety info for planning visits.
45% showed Interest in secondary info like dining and parking details.
With all the data and insights in hand, it was important to align the website redesign with both the client’s needs and ADA compliance. We wanted to ensure that the final product not only reflected our research findings but also stayed true to the original design language.The aim was to integrate the findings into the website while maintaining the design’s original aesthetic and ensuring it met accessibility standards.
A visitor wearing a mask looks into an aquarium tank, with a fish swimming in the background. The text over the image reads, “We Are Now Open!” with a button below inviting users to “Plan Your Visit.” The website banner highlights sections like “Visit,” “Animals,” “Join & Give,” and “Act For The Ocean,” offering navigation options. The design emphasizes the aquarium’s reopening and encourages visitors to plan their trip while maintaining safety measures during the pandemic.
We’ve made significant improvements to the mega navigation, reducing its size by 50% compared to the original design. The updated navigation complies with ADA accessibility laws, ensuring it’s user-friendly for all. Content grouping has also been refined, making the information more intuitive and aligned with the user journey. The new design enhances both usability and accessibility, creating a smoother experience for visitors - Figma Prototype.
A grid of three exhibit cards from the Monterey Bay Aquarium, each showcasing a different habitat. The first card features “Monterey Bay habitats,” the second showcases the “Giant Pacific octopus,” and the third highlights the “Kelp Forest.” Each card includes a photo, a brief description of the exhibit, and a “View Exhibit” button for more details. A call-to-action button below invites visitors to “View All Exhibit.” The page encourages exploration of various ocean habitats and the fascinating creatures within them.​Safety guidelines for visitors to the Monterey Bay Aquarium. The image provides details such as: • Choosing a specific date and time for tickets • Wearing face coverings • Staying 6 feet apart • Staying home if sick • Hand sanitizing stations available • Following a one-way path to maintain social distancing.The “Before You Visit” section provides key details to ensure a smooth experience at the Monterey Bay Aquarium. It includes information on the Virtual Map, Safety Guidelines, Exhibits, Directions & Parking, Dining & Shopping, and highlights the Monterey Area with nearby attractions. Each section has clear calls to action, encouraging visitors to explore relevant details before their trip.
The redesigned exhibit section informs users about open exhibitions, including seasonal or special ones, ensuring transparency and safety during the pandemic. This functionality reassures visitors by highlighting the aquarium’s safety precautions. The “Before You Visit” section follows ticket purchase and provides essential information, ensuring guests are well-prepared and minimizing time spent at the aquarium. It enhances trust between the Monterey Bay Aquarium and its visitors by clearly communicating COVID-19 regulations and making the experience seamless from planning to visiting.
The redesigned “Welcome Back” flow introduces significant improvements to encourage user engagement post-ticket purchase. After buying tickets, users can explore the “Before You Visit” section, which provides essential information like downloading maps, finding directions, parking guidelines, and viewing available exhibits. This new flow is designed to motivate users to continue exploring the website while ensuring they are well-prepared for their visit to the Monterey Bay Aquarium - Figma Prototype.
A woman wearing a mask observes an underwater exhibit at the Monterey Bay Aquarium, featuring kelp forests and a swimming fish. The screen highlights a banner that says “We Are Now Open!” with a “Plan Your Visit” button below. Below this, various aquarium exhibits are displayed, including Monterey Bay habitats, a giant Pacific octopus, and the Kelp Forest, with “Open to visitors” labels. The vibrant imagery and clear design invite users to explore the aquarium’s offerings and plan their visit.