Denver Zoo Case Study
Goal
Streamline ticket-purchasing flow
Research
Role
Research and redesign based on identified pain points from user interviews
Usability testing of current experience
Challenge
Discerning essential information required for user to complete task
To evaluate the current experience, I interviewed 5 different users all between the ages of 18-65 who have visited a zoo before. I observed how they went through the website and ticketing flow while collecting their thoughts and confusion at every stage.
Too many steps to get to payment
Distracting/unnecessary information
Visually cluttered calendar
Competitive Analysis
I looked at other websites of Denver attractions to see what features may be lacking in the Denver Zoo website and created "how might we" questions to guide my design. When looking at the other websites, the Denver Zoo had many of the same features.
How might we make the ticket purchasing experience more efficient for users?
How might we make reading chunks of text quick and easy?
How might we display the calendar in a way that makes the experience of picking a date and time quick and intuitive?
Design
Problem statement
Denver Zoo customers need a simpler way to purchase tickets because the current process is time-consuming and inefficient.
Meet Charlie!
Charlie is purchasing tickets for their family to visit the Denver Zoo.
User flow
Date they want to go: October 20
Type of tickets: General admission
Additional items: Pull wagon rental
Checkout type: Guest
Here is my proposed new ticket flow for Charlie.
Low-fidelity frames
To begin the design process, I started by creating low-fidelity wireframes for the desktop layout, mapping out each step in the user flow I had in mind. I made sure to have a "Get tickets" button right at the top, so users have a clear starting point when they open the site. I also chose to have the stages of the checkout process seen by the user so they know where they are at and what to expect.
Mid-fidelity frames
In the mid-fidelity stage, I refined and began solidifying my design ideas within Figma. This process revealed a potential issue with the cluttered navigation bar and decided to remove tabs leaving only the essential items for optimal user functionality. I designed considering interactive elements, providing a preview of the screen before and after user interactions.
High-fidelity frames
Applying all the things I learned from the previous stages, I created my high-fidelity wireframes utilizing the Denver Zoo design system. This stage prompted me to reassess some choices I made in mid-fidelity specifically on the homepage and working with color contrast. This stage also emphasized to me that many things didn't need outlines because the color and spacing provided enough distinction between sections.
Professional feedback
In response to user feedback on the ticket flow, recommendations were made to enhance the clarity of the process by transforming the sections in the ticketing progress bar into a stepper with numbered tabs. This modification allows users to easily know their current step and the remaining steps they have left. To avoid a time-consuming process for purchasing larger quantities of tickets, it was advised to substitute the dropdown with an input field, enabling users to directly input the desired quantity. Furthermore, considering the limited advance ticketing window of 10-15 days, the feedback proposed exploring a weekly calendar format as a more user-friendly alternative to the monthly calendar.
Evaluation and results
User testing and pain points
I met with two participants between the ages of 18-65 who visited the zoo at least once and conducted user tests with them using my high-fidelity prototypes. This uncovered some new pain points, particularly around ticket types. Both users were confused about what the different ticket types meant and one suggested prioritizing the general admission option because it is the most recognizable.
Updates
To address this issue, I placed small question icons next to the unfamiliar ticket options. Designed for user interaction, hovering over these icons reveals a small pop-up description explaining the ticket type and who might want it. Additionally, I enhanced user convenience by prioritizing the general admission option, moving it to the top of the list as the initial choice.
Reflection
Future plans
Moving forward, I would like to conduct additional interviews utilizing the high-fidelity prototype to gauge the effectiveness of the implemented updates on the user experience. Additionally, I hope to explore the integration of animation and its impact on user experience. I would like to animate the event cards on the homepage and design a pop-up feature for the question mark icon alongside ticket types.
Conclusion
This Denver Zoo website redesign project served as a valuable learning experience in several key design concepts. Through user interviews, I gained a deeper understanding of user pain points, particularly in ticket flows, guiding the decision-making process. Additionally, progressing from low to mid to high fidelity wireframes provided insights into the iterative design process.
This project not only improved the Denver Zoo website experience but also deepened my understanding of user-centric design principles, the use of design systems, the significance of visual hierarchy, and the practical application of wireframing techniques at various levels of fidelity.
