Monterey Bay Aquarium
App Design, UX Research
Monterey Bay Aquarium located in Monterey, CA, sees education and conservancy as priorities, from providing educational resources to promoting conservancy. The Aquarium is currently closed due to COVID.
Monterey Bay Aquarium doesn’t have a mobile app to provide the public remote experience and education on marine life. We wanted to create moments of delight and inspired involvement with animal conservancy, not just for remote settings, but also in-person experience once the aquarium re-open.
We wanted to target youths, educators and animal lovers.
• User Research: Conducted interviews, analyzed findings, persona & journey map
• Sketches: brainstormed solutions & ideated lo-fi wire frame
• Prototyping: designed & created mid-fi prototype
• Usability Test: tested overall user flow, identified findings & problems for iteration
• Team: 4 UX designer across 3 time zones worked in a remote setting
• Duration: 2 weeks
• Tools: Sketch, Figma, Miro, Zoom
• 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
User Research: Conducted interviews, analyzed findings, persona & journey map
Sketches: brainstormed solutions & ideated lo-fi wire frame
Prototyping: designed & created mid-fi prototype
Usability Test: tested overall user flow, identified findings & problems for iteration
Team: 4 UX designer across 3 time zones worked in a remote setting
Duration: 2 weeks
Tools: Sketch, Figma, Miro, Zoom
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.
We checked out in-app features on other aquariums, zoo and museums.
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.
I conducted users interviews
via Zoom meeting and recored and jogged down the 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.
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.
Our "student" persona, Sam, wants to check out Monterey Aquarium's website. What might she encounter?
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
We discovered some problems our users have. It's time to dive into the solutions with our ideas!
Paper Sketches & Ideation
We walked through each sketches, and came out with the app template.
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- Fi Wireframes
I designed the screens for "Fun" section includes "Live Cams" and "Games".
I created the charts as a reference for contents structure while building our prototype.
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.
Iterations are reflected in our Hi-Fi prototype.