Cheyenne Mountain Zoo
UX Design
UI/UX Design
UX Research
Figma
Cheyenne Mountain Zoo Redesign
The Cheyenne Mountain Zoo's current ticket purchasing flow makes absolutely no sense. So, I worked directly with users and made multiple iterations to create a final user-friendly and aesthically pleasing redesign of both the ticket purchasing flow and the animals page. With my changes, ticket purchasing is now an easy and fun experience for all zoo-goers!
My Role
I was the sole designer and researcher, so I personally did all user testing interviews and design work.
The Challenge
My goal was to make the ticket purchasing flow more user-friendly, have less information overload, and be an overall quicker process. A limitation to my work was only having college students be the users I tested with, even though the zoo has a much wider audience.
Initial Research
I did 5 user testing interviews with the current ticket purchasing flow of the site.
The main pain points I uncovered were that there was too much information for every new page the user encountered, the idea of "advanced tickets" was confusing, finding where to even begin adding tickets to the cart was not intuitive, the card popup seemed sketchy, the price of tickets is not clear soon enough, and choosing the date and time is an ugly-looking experience.
I immediately recognized the opportunity to make the experience much more efficient, since the main issue was that there was so much overwhelming information and way too many steps to click/scroll through to get the tickets.
Affinity map of pain points
How might we make the ticket buying flow more efficient?
Problem Statement
Animal lovers need an easy way to buy tickets to the Cheyenne Mountain Zoo in order to enjoy the experience of seeing and learning about new animals without stress or hassle beforehand.
Task Flow
I created a basic task flow to base my designs off of to make the process of buying tickets more intuitive. I wanted the sign-in option to be clear, instead of having a user scroll through a page to find the difference between member and non-member tickets. I also wanted there to be less screens click/scroll through to get to the end goal, the confirmation page.
Low Fidelity Wireframes
Through basic sketching I created lo-fi wireframes for each page for the task flow. I also created a lo-fi wireframe for a redesign of the animals page. I based my layouts my own "muscle memory" from other ticket/item purchasing flows that I am familiar with.
Mid Fidelity Wireframes
Based on my lo-fi wireframes I created earlier, I jumped into Figma and created basic mid-fi wireframes. I connected every textbox to its own style, making the wireframes extremely adaptable for the next step of hi-fi wireframes. I also laid every element on a grid system, making sure that everything was inside the grid and separated by a multiple of 8px.
High Fidelity Interactive Prototype
My final version of my high fidelity interactive prototype! Based on multiple hi-fi iterations: version one stemmed from my professor's feedback from mid-fidelity, and version two was built from direct user feedback and more of my professor's feedback. I used the styles I created in the mid-fidelity stage for quick design changes, and created components for consistency across pages and the ability to easily "fill in" user inputs.
Branding
I not only made the ticket purchasing flow much more user friendly, but I also updated the branding aesthetics for the zoo.
Integration of Feedback
My final project was not just from me sitting behind a desk... instead, I worked hard to integrate user and professor feedback to polish my designs and make them extra user-friendly. Here are some explicit examples of the changes I made from version 1 of high fidelity to version 2.
High fidelity version one user pain points
Major home screen changes: My users had a lot of confusion on the cash-only experiences, and the open space under the schedule was too big and out of place, so I deleted the cash-only experience section completely. Plus, the original schedule did not specify the date, so I added that. The zoo news also was not clear that it was a vertical scroll, so I added a scroll bar underneath. My professor recommended that I change all headers and buttons to sentence case.
Major ticket picking changes: My professor pointed out that I did not need the box around the ticket options, and this page showcases the changes in the footer of adding the logo really well. My users suggested greying out dates/times that could not be picked. Plus, I added an information overlay to explain the entrance time concept, since that brought up a lot of questions.
Reflection
If I had more time, I would love to pitch this redesign to Cheyenne Mountain Zoo themselves, even if it did not lead to them taking my exact design but just reworking their current ticket purchasing flow. I would also love to see these designs in an actual working site. I could work with a developer, or even create the site myself with my coding background. I would also like to expand my user testing past just college students.
I really loved this project! Working with UX in one project from start to finish in a structured way really set me up for success in my capstone project this year and any other UX projects I work on in the future! I loved the affinity mapping process and talking directly with users to uncover ideas I would have completely missed on my own. I learned that design does not just exist in the designer's head, but is a fluid product that is constantly in motion with different iterations and further testing.