#Gamification #Usability Test #Tree Testing #Engaging #Interactive

Pandemic Challenge: Engaging & Playful Virtual Exhibition

Monterey Bay Aquarium

Project Overview

Background

Monterey Bay Aquarium located in Monterey, CA, sees education and conservancy as priorities. We conducted a UX case study. We believed this is an opportunity to solve the negative impact of Covid. The goal was to bring the exhibition experience to the users.

Challenge

Monterey Bay Aquarium doesn’t have a mobile app to provide the public remote experience and education on marine life. Due to pandemic, the site is closed temporarily. People don't have access to connect with the marine life. The aquarium doesn't have opportunity to educate the public or keep them engaged.

We wanted to target youths, educators and animal lovers.

Solution

Our team decided to design a mobile app for Monterey Bay Aquarium. Because we wanted to create moments of delight and inspired involvement with animal conservancy, not just for remote setting, but also in-person experience once the aquarium re-open.
We discussed the essential features to implement in the app that would help with our goals.

We concluded the existing information of marine life and conservancy from the aquarium's website for educational purpose.
Since youth was one of our target audience. We introduced gaming component in the app.
To delight in-person visit once the aquarium re-open, we decided to implement an interactive map of Monterey Bay Aquarium.

Project Plan

• Research

Understand user's needs, goal, frustrations, & behaviors

Explore current and competitor's product

• Define

Identify problems and suggest opportunities

Analyze features prioritization

• Design

Ideate sketches and low-fidelity wireframes

Create mid-fidelity prototypes and test usability

• Deliver

Create high-fidelity prototype

Reflect process and discuss future steps

My Role

• User Research: Conducted interviews, analyzed findings, persona & journey map

• Sketches: brainstormed solutions & ideated lo-fi wireframe

• Prototyping: designed & created mid-fi prototype

• Usability Test: tested overall user flow, identified findings & problems for iteration

Scope

• Team: 4 UX designer across 3 time zones worked in a remote setting

• Duration: 2 weeks

• Team: 4 UX designer across 3 time zones worked in a remote setting

• Design Practice: User Interview, C&C Analysis, Feature Analysis, Affinity Mapping, Persona Development, Problem Statement, User-Flow, Journey map, Mood-board, Sketching, Wireframes, Prototyping, Usability Testing & Iteration

Research & Synthesis

Exploration and Comparison

First, we took a look of the current website. The website is full of resources. We needed to figure out what contents to carry over and what new features to incorporate to the App. We also checked out in-app features on other aquariums, zoo and museums.

We decided that Live Video, Educational Resources, Maps, and Games are our "must have" features.

User Research

Objective

We wanted to learn what people experienced, what was learned and what they enjoyed during their visits to aquariums, in order to apply those insights to a virtual experience.

Methods

I conducted users interviews via Zoom meeting and recored and jogged down the findings.

Findings

We found out that our users like interactive experience, use educational resources Monterey Bay Aquarium provides and are aware of conservancy.

"I enjoyed cool interactive display."

"It's beneficial to see animals in person while learning about them."

"Things start going wrong in the ocean, you'll have a big problem."

" This cool interaction helps with engagement."

User quotes from the interview.

Persona

We created 3 personas based on our targeted users, student, educator and animal lovers.
But we decided to focus on the "Student" persona because her goals, needs and frustration overlapped with the other two personas.

Journey Map

User Flow

Problem Statement

Sam is a high school student who wants to engage with the aquarium. She needs an entertaining way to learn about marine life because she is easily distracted and learns best through interactive experiences.

How we might:
- Help students stay interested in learning about marine life
- Provide various ways of learning
- Make learning more interactive

Ideation & Iteration

Paper Sketches & Ideation

We walked through each sketches, and came out with the app template.

My Sketches

Team's Sketches

Our Decisions :
• Navigation bar with logo

• Drop Down Menu as the "junk drawer", where it contains "setting", "log-in"...etc,.

‍• 3 main tab bars accompanied by secondary tab bar ( I got this idea from San Diego Zoo's app)

Mid Fidelity Wireframes

I designed the screens for "Fun" section includes "Live Cams" and "Games".

Information Architecture

I created the charts as a reference for contents structure while building our prototype.

Tree Test

I wanted to validate that our users are able to navigate through the app.

Overall they were able to locate the content in the correct path.
However, I observed there was a common error our users encountered. In response, I iterated the design.

Some users failed to reach the "calendar" page. Green path represents the correct path.

Usability Test & Iteration

We created a mid-fi prototype through Sketch prior moving to the hi-fi stage.
I conducted the usability test, mostly in-person.