Monterey Bay Aquarium Website Redesign
During my time at UX/UI bootcamp at UC Irvine, my team and I decided to work on the redesign of Monterey Bay Aquarium website. We were excited about making a difference on environmental issues which is why we decided on this website.
Roles
UX/UI Designer: Jennifer Kyong
UX/ UI Designer: Margie Churchill
UX/ UI Designer: Nick Soonthornyanakij
The problem
Upon the analysis of the www.montereybayaquarium.org we found that there are certain important user flows on the website namely donation and membership. We found that the UI and UX along these paths were not engaging and could be improved.
User Research
In order to find out more about our users, we reached out to the Monterey Bay Aquarium directly to gather data on actual users of the site. We discovered the following:
1) 55% of visitors range in age between 25 and 44.
2) 85% of visitors are from the USA.
3) 60% of visitors are from California.
This informed us that we needed to conduct user interviews with Californians between the age of 25 and 44, who are most likely to visit the Monterey Bay Aquarium. Key research questions that we focused on were:
1) What is the public's perception of non-profit organizations specifically the Monterey Bay Aquarium?
2) What are their beliefs concerning the environment, marine life and the health of our oceans?
3) How do these attitudes and beliefs correlate with their behaviors when it comes to the frequency of donations and membership subscription?
Research Findings
We received a total of 31 survey responses. The majority are between the age of 18 and 30 years old. Here are some important findings:
90% of respondents agree or strongly agree with the statement, "non-profit organizations make a difference."
Over 80% of respondents have never donated to an aquarium.
Less than 3% of respondents have a membership with an aquarium.
Affinity Diagram and User Insight
Once we gathered all the survey and user interview results, we used an affinity map to analyze the data to discover any trends that emerged.
We discovered from our affinity map that users are concerned about marine conservation and want to take steps to educate their children about the effects of environmental degradation. However, attitudes do not translate into financial support for aquariums due to lack of awareness that they support conservation efforts.
User Persona
We compiled our findings using a user persona which represents a typical user of the Monterey Bay Aquarium website.
Storyboard
Next, we created a storyboard to show a typical user journey based on our user persona Linda.
Problem Statement
We believe that by raising conservation awareness through the Monterey Bay Aquarium website for visitors, we will achieve the goal of raising more donations for conservation and education efforts.
The Monterey Bay Aquarium website was designed to attract visitors from across the country and to encourage people to become donors. We have observed that our existing website isn't meeting the goal of educating the general public of the conservation efforts of the Monterey Bay Aquarium, which is causing fewer people to donate to our non-profit organization.
How might we improve communication of the impact of donor efforts through the Monterey Bay Aquarium so that our stakeholders are successful based on 20% more web-based donations over the next calendar year?
Existing Website Redlining
Navigation: Inconsistent navigation changing from one page to the next.
Aesthetics: Plain design with little use of colors, pattern, and images.
Forms: long, tedious, and unnecessary use of multiple pages with no option to return to the homepage.
Competitor Analysis
The Ocean Institute: They are very clear about non-profit status and benefits of donating.
San Diego Safari Park: They are on theme with what they offer, uses animals as focal point to attract users.
Georgia Aquarium: excellent use of patterns, animations, CTA's and images to attract users.
Paper wireframes
Digital Wireframes
Style Tile
High Fidelity Prototype
Usability Testing Feedback
We received the following feedback during our usability testing:
- The images emotionally impactful
- Feedback suggesting a more consistent design system
- Perceptibility of information could be improved by a more deliberate grouping of texts to images when the information belong together
InVision Prototype
Micro-interaction Animation
We created a micro-interaction which made making an additional donation while signing up for a membership more engaging. Instead of skipping the additional donation section, users are drawn into interacting with it and the interaction may persuade them to make a donation.
Mobile Version
Key Takeaways & Future Opportunities
Design system: Upon receiving feedback from our instructors, they advised that in order to keep the design consistent across pages, it is important to keep referring to the style guide and having better communication with each other when make design decisions that are not consistent.
We plan on contacting the Monterey Bay Aquarium with our designs to provide them with feedback on ways that the current website could be improved.
