Denver Zoo Redesign
Prior to redesign, only 64% of participants were able to successfully navigate to and accomplish their tasks. After redesigning, 89% of Denver Zoo website users were able to confidently and efficently accomplish their goals on their first attempt.
Summary
The current Denver Zoo website is inefficient, lacks cohesion and consistency, and is overall a confusing experience to the user. Through this redesign, I aimed to target problem areas within the home and animal discovery pages, as well as the ticket purchasing process. Additionally, I reorganized the site navigation, informed by extensive user research, to improve the overall usability of this experience.
Challenge
The challenge of this project was to redesign the Denver Zoo website to reflect a more intuitive and user-friendly experience. The limitations were time constraints and the adherence to a preexisting color palette and design system.
Research
UX Evaluation
I evaluated the existing Denver Zoo website on usability, findability, content, and visual design using a UX evaluation spreadsheet to conduct the audit. I found problems with the efficiency of the ticket purchase process and compliance with the AA accessibility standards. Some key opportunities I identified were creating consistency in button styling, simplifying the color palette and ensuring AA accessibility compliance with said color palette, redesigning the ticket flow, and ensuring all clickable items featured consistent animation.
Tree Test
I evaluated the hierarchy and findability of the Denver Zoo's existing information architecture through tree testing. Participants were given a series of tasks, and asked where they would go in the site navigation to complete it. Overall, this tree test was very helpful in understanding what needs to be adjusted moving forward. The average success score was 64.4% across all 5 tasks, which is allowed significant room for improvement.
Card Sort
For the card sort test, participants sorted existing labels for web content into larger categories. I used this test to reevaluate the navigation bar and used the original Denver Zoo navigation headings as categories. The card sort was conducted via UXMetrics.
Sitemap
The sitemap is the finalized structure of the Denver Zoo’s redesigned information architecture. I used the data from the tree tests and user testing feedback to inform these decisions.
Design
Design Systems Pattern Audit
I audited the existing Denver Zoo website to find examples of each element in existing design system. For each component, I made sure to document both active and inactive states, as well as all variations. The goal of this process was to discover inconsistencies within the design system and better understand the constraints for the redesign.
Annotated Low Fidelity Wireframes
First, I participated in a design sprint to collect my ideas and find examples of successful experiences that were similar to that of the Denver Zoo. Then, I digitally sketched each step of my redesigned ticket flow process, home page, and animals page. Each low fidelity wireframe was accompanied by annotations to clarify the elements within the drawings.
High Fidelity Interactive Prototype
Using the low fidelity wireframes and the feedback I received from user testing, I built the high fidelity interactive prototype in Figma. As this prototype is a sample version of the final experience, all screens have been connected so users can click through the entire experience. In the prototype, users can purchase tickets, explore the animals at the Denver Zoo, and scroll through the home page.
Results
I tested the redesigned Denver Zoo website interactive prototype with nine users. 89% of tested users navigated to and accomplished their tasks on the first attempt. This is a 25% increase in overall navigability and usability and a 51% increase in direct success task completion. Additionally, 100% of users stated that the redesigned Denver Zoo website was easier to use than the existing version, proving the redesigned version of the website is an overwhelming success.
Conclusion
Overall, I learned more from this project than I ever imagined. This was the first time I had ever designed for a desktop experience, which I did not expect to be so different from designing for a mobile app experience. Additionally, this was the first time I have worked on an experience redesign using a preexisting design system. I gained a variety of new skills in Figma, including how to make a functioning navigation bar and build an image slideshow. If I had more time on this project, I would design additional pages and create a more full-functioning prototype. Additionally, I would like to explore introducing more interactivity across the entire website. I am really proud of the work I produced, and this project has reminded me how much I truly enjoy user experience research and design.
