Embedded Files
Introduction
Introduction
Summary
Summary
For this project, I evaluated the current experience of the Denver Zoo's website, and I proposed a redesign. This redesign is important because the current experience is confusing, and it takes too long to complete tasks on the site. The outcome of this project is a simplified and efficient version of the ticket purchasing process.
My role
I worked on this project by myself, so I was both a UX researcher and UX designer. I was responsible for conducting usability tests and building low, mid, and high fidelity designs.
The challenge
The problems I looked to solve with my redesign were making information easy to find, and creating a ticket purchase flow that was quick and easy to understand. Some limitations included time constraints and working with the Denver Zoo's current design system. In other words, I was unable to work on this project full time and had limited colors and fonts to choose from.
Research
Research
User testing of the current experience
User testing of the current experience
To evaluate the Denver Zoo's ticket purchasing experience, I conducted 4, moderated user tests. Each user had the task of purchasing tickets as a non-member customer.
Major pain points
There were too many "Get Tickets buttons"
Getting to the credit card information and quite frankly just purchasing tickets took too long
The calendar view to select a date and time was overwhelming and confusing
There was a login page in the flow that felt out of place
There were several types of tickets displayed, and both their prices and descriptions were confusing
Key opportunities to improve
The styling of the site could be cleaner and more consistent
Ticket types could be simplified to just members and non-members and then categorized by age
Non-member customers should not have to log in or see a log in page
Ticket details can be condensed to fewer pages
Competitive analysis
To evaluate what was on the market and see which features I wanted to add in my redesign, I created a feature comparison chart, which compared the Denver Zoo's site to 3 other sites. I chose to consider the websites of the Cheyenne Mountain Zoo, Butterfly Pavilion, and Pueblo Zoo.
How might we statements
How might we make the process of buying a ticket more efficient?
How might we allow customers to feel more comfortable selecting a time and date for tickets?
How might we provide important information to customers so that they feel more confident about their purchase?
Design
Design
Problem statement
Zoo visitors need a more efficient way to purchase tickets because the current experience is confusing and takes too long to complete.
User flow
Before creating low fidelity wireframes in general, it is good to map out the steps users will take. This map makes it easier to transition to wireframes, as the steps translate into the necessary screens for the experience. To create my user flow, I identified the happy path, which is the ideal set of steps users take to correctly perform a task. Then, I created a diagram to illustrate this happy path for the ticket purchasing process.
Low fidelity wireframes
With my completed user flow, I was ready to sketch out low fidelity wireframes of the screens I wanted my experience to have. In this stage, my sketches were made with pencil and paper, and they illustrated the general structure of the ticket purchasing process. As opposed to the 16 screens users went through for the initial experience, I reduced the number of pages and condensed much of the ticket details like date, time, ticket type, and add-ons into one page. I also made sure that non-member users would not see a log in screen and only need to enter necessary payment information.
Mid fidelity wireframes
Based on my low fidelity wireframes, I built my mid fidelity wireframes on Figma. While I did not worry about fonts, colors, and images during this stage, I fine tuned the page hierarchy, spacing, and sizing of my elements. I also made sure to use grid and use real text content rather than filler text for my page designs.
High fidelity prototype
Building from my mid fidelity wireframes, I added more details for my high fidelity prototype to capture the look, feel, and content of the redesigned ticket purchasing experience as if it were actually developed. This included branded fonts, colors, and images. As I iterated on my designs, the general look of this was meant to be clean, professional, and simple. I feel that using a minimalist color scheme actually helped with that. In addition to increasing the fidelity of my designs, I also added some basic interactivity for the screens, such that users could click each screen to proceed to the next one.
Professional feedback
Throughout my process of building up from low fidelity sketches to a high fidelity prototype, I received feedback every step of the way from Brittney Urich VanHorssen, my UX instructor who also works as a product manager at Amazon Business.
Low fidelity wireframe feedback and changes
Feedback included the following points:
Add a homepage to the wireframes because users will start there before buying tickets
Stay consistent with language on the ticket details page. Use "select" or "choose" but not both
Move the ticket type and quantity selection before selecting a date and time to ensure the quantity of tickets is available for a specific day
Remove +/- buttons for quantity selection since it is easier to just type the quantity
Add the total cost in the purchase summary
Add a way to get back to the home page on the confirmation page
Add pages that show what users see after they fill information out
The changes I made going into my mid fidelity wireframes incorporated all of the feedback I received. On the homepage, I added a section that users could click on, which led to the "Plan a visit" page. In terms of language, I chose to stick with "select," and on the confirmation page, I added a "Back to home" button. The two pages that needed to show user input were the ticket details page and the payment information page, so I added the filled out versions for those.
Mid fidelity wireframe feedback and changes
Feedback included the following points:
Use sentence case for headers since title case can interrupt reading flow
Avoid stacking images on top of other images since that can get busy in high fidelity
Headers should be left aligned with their respective content underneath
For the ticket type selection by age, each category does not need to be put into a box
The pattern for the add-ons takes up too much vertical space
Purchase summary on cart contents page also does not need to be divided via boxes
Going into my high fidelity prototype, I incorporated all of the feedback from the mid fidelity wireframes. Rather than using images for member e-tickets and non-member e-tickets on the "Plan a visit" page, I placed an icon button for each ticket category underneath the hero image. For the ticket type selection by age, I moved the price and quantity input closer to each age category. Regarding the add-ons, I changed the pattern such that three add-ons could fit in each row, which significantly reduced the vertical height it used to take up. Instead of using boxes to divide items in the purchase summary, I used division lines to create visual breathing room.
High fidelity prototype feedback and changes
Feedback included the following points:
Extend or move content to the left most margin on the grid, as it is a design standard
Stay consistent with header size starting from the ticket details page to the confirmation page
Left align buttons to the respective content above them
Add back buttons on the cart contents page and payment information page
The gray shading of the wagon icon makes it look like it can't be interacted with
To iterate on my high fidelity prototype, I applied the feedback I received. In terms of moving or extending content to the left edge of the grid, I understood that users read from left to right, so anchoring content to the left would make content easier to read. The same concept applies to left aligning buttons. For the headers, I chose to stick with h2 since h1 looked a little too big. Finally, the back buttons account for user error. If users enter in the wrong ticket information or change their minds, they can easily return to the ticket details page and make changes. The only piece of feedback I didn't immediately apply was the shading for the wagon icon because I was curious to see what other users would think about it.
Evaluation and results
Evaluation and results
User testing process and pain points
To evaluate my high fidelity prototype, I conducted another round of moderated user tests and took detailed notes. Each user was tasked with purchasing tickets and a wagon rental as a non-member. I ended up testing my high fidelity Denver Zoo Figma prototype with 3 participants aged between 18-65, and their feedback for my new experience seemed better than the feedback for the original ticket purchase experience. Some buzzwords I heard were “straightforward” and “clean.” The users told me that the experience behaved in the way they expected, and the site design was easy to use. One thing in particular that all three users liked was how the wagon icon changed color after changing the quantity. Of course, there were suggestions for some improvements I could make for my prototype.
Pain points:
On the ticket details page, one user was confused that non-members could order tickets 10 days in advance, but they saw 14 days on the calendar that were selectable
The quantity boxes on the ticket details page were also empty at the time, so at one point, a user thought that they could be checkboxes for the add-ons
For the add-ons in particular, multiple users expressed a desire to see a link of some sort to see more information about where to pick up the wagon or what the food options entail
All users had feedback for the confirmation page. They all wanted to see some text saying that they would get an email with their tickets and itinerary, along with the date and time of their planned visit
Updates
To fix the ticket details page, I added some placeholder text in the input boxes so that users will know it is for quantity. That styling was also consistent with how the payment information form is designed. I also changed the number of selectable days in the calendar to just be 10 days. In terms of the add-ons, I added an icon users could click for more information, and I changed the add-on selected color so that the gray fill will not block out the interactivity of the experience. For the confirmation page, I added the date and time of the planned visit. Additionally, I had some text stating that the user will receive an email with their tickets and itinerary.
Reflection
Reflection
Future plans
My next steps would be to do another round of user testing on my high fidelity prototype with the changes that I made. Considering the number of tests I conducted, I understand that 3 people make up a small sample size, and the ideal number of tests to do is typically 5 tests. If I had more time, I would definitely like to work on the prototype interactions more. At the moment, users can click anywhere to proceed to the next page. I would have an even higher fidelity prototype if the interactions were improved to more closely match the intended functionality of the experience if it was actually developed. I would also want to evaluate different parts of the Denver Zoo website to see if there are any other areas for improvement.
Conclusion
The key take away from this project is that UX design is a back and forth process between user testing (or getting external feedback) and redesign. If I solely based by designs on my own opinion, my high fidelity prototype would likely be of questionable quality. A good user experience cannot exist in a vacuum, and it is imperative that UX designers see how others interact with their designs. After all, designers are not users.
Page updated
Google Sites
Report abuse