Metro Zoo
Transforming the Metro Zoo from a traditional animal display venue into an immersive adventure park, emphasizing animal conservation and education through a comprehensive website redesign
My Role
User Research
Usability Testing
Prototyping
My Team
Qiani Zhou
Koyu Shiau
Ankush Sood
Tools
Figma
Optimal Workshop
Timeline
3 months
//THE PROBLEM
outdated system
The Metro Zoo's current website, outdated and not reflective of its transformation into an immersive adventure park, fails to engage its diverse audience effectively, hindering the promotion of conservation and educational efforts.
//USER RESEARCH
analyzing
stakeholders
Various stakeholders are invlolved in the website redesign of Metro zoo, so we need to carefully analyze each stakeholders and their goals:
Metro Zoo
Management
Aims for a modern, user-friendly website to boost visitor engagement and highlight conservation efforts.
Zoo Keepers & Staff
Seek updated resources and content for operational support.
Conservationists & Educators
Require a platform for disseminating information and promoting educational activities.
Investors & Donors
Need transparent reporting and collaboration avenues
evaluating the
information architecture
A closed card sort study was conducted in-person with 8 users to evaluate the effectiveness on achieving stakeholders' goals and needs in the site's current information architecture. potential visitors were asked to sort the site's existing first and secondary navigation labels from the list we voted to be the most vital.
The current information architecture fails to clearly categorizing and associating various content to ensure intuitive navigation for users.
key insights:
-
Ticketing labels are misleading and unnecessary: Contents with the word "tickets" were consistently grouped together, though "Tickets and Events" indicated potential confusion and a need for clearer separation.
-
Global navigations is misleading: Terms like "Camp" in category names guided users more easily, indicating the importance of clear and direct category names.
identifying
opportunities
-
Content Alignment with Zoo's Evolution: Reflecting the zoo's shift towards more active experiences with an emphasis on education and conservation in the content.
-
Adventure Theme Enrichment: Adding features like "Treetop adventures," "Thrill rides," and "Scavenger hunts" to enhance adventure themes and visitor interaction.
-
Efficient Navigation Design: Implementing a mega menu navigation pattern to organize and display content efficiently, saving page space and improving user experience.
-
Responsive Mobile Navigation: Using a hamburger menu icon for primary navigation in the mobile version to improve usability and accessibility of the site.
rebuilding the
information architecture
After identified our opportunities for improving and redesigning the website, we planned to start rebuilding the information architecture before changing the navigation to on enhance user engagement and intuitiveness.
_edited_edited_e.jpg)
Key Changes
-
Revamping content to emphasize active visitor experiences and conservation education.
-
Adding features like "Treetop adventures," "Thrill rides," and "Sleep in the Wild" to reflect the zoo's new focus.
-
Implementing a mega menu navigation pattern for efficient content organization and space utilization.
-
Ensuring responsive navigation for mobile users with a clear, user-friendly hamburger menu design.
redesigning the
navigation
After presenting our IA redesign, crafted meticulously using Figma for seamless collaboration and visualization, we pivoted towards optimizing mobile navigation. Here's the middle-fidelity navigation redesign:
Mobile Navigation
-
Responsive navigation menus in the mobile version.
-
Hamburger menu icon displaying primary navigation items and key sections like “Plan Your Visit” and “Get Involved”.
-
Secondary navigation items positioned at the top of the mobile homepage.
-
Footer featuring newsletter subscription and additional information.
-
"Forwards" and "back" design in the hamburger menu for enhanced user navigation.
Key Changes
Desktop Navigation
Home Screen
Mega Menu 1
The primary navigation menu now features categories such as Education, Activity & Camp, and Conservation, emphasizing user experience. The secondary menu has been restructured with engagement options such as Plan Your Visit and Get Involved, which facilitate user interaction and participation.
We've implemented a mega menu for navigation, where clicking a label displays all related content in a dropdown panel, saving page space. For example, under Event, subcategories like Celebration, Science, Wildlife, and Host Your Events are included.
Mega Menu 2
In our primary navigation menu, labels like Activity & Camp lead to subcategories such as Attractions & Adventures and Camp, each with further divisions like Adventures and Things to Do, organized by subject. This structure, consistent across items like Events, Education, and Conservation, uses a mega menu format for depth and easy browsing, as detailed in our IA diagram.
Breadcrumb
The TundraAir Ride page features a breadcrumb navigation aid, displaying Activity & Camp > Facilities > TundraAir Ride. This provides users with a clear hierarchy of their browsing path, facilitating easy navigation and context within the site's larger structure.
lessons learned
-
Navigation Clarity: Breadcrumb navigation on pages like "TundraAir Ride" highlights the importance of a clear, hierarchical structure for easy user navigation.
-
Space Efficiency: Using mega menus for categories demonstrates effective space management while providing extensive information access.
-
Organized Information Architecture: The structured categorization in menus underlines the significance of well-planned information architecture for improved user experience and site functionality.