San Diego Zoo Ticket Page Redesign For Mobile
By Kendra Dobson and Kasey Meredith
Description of the Product
Our design team created a mobile experience for the ticketing page of the San Diego Zoo website. When our team visited the San Diego Zoo website we observed certain functions that could use some work. We noticed that, though the site is organized and easy to navigate, the website requires the user to scroll for all related information. After collecting and analysing user surveys, we found that most of our target demographic would prefer to access the San Diego Zoo website from their mobile devices rather than their computers, so our design reflects the user preference for a mobile experience. We used information that was already presented on the San Diego Zoo website and reorganized it into a design that is more comfortable for a user who is accessing the ticketing site through their smartphone. Our ticketing experience begins after the user has clicked “buy tickets” on the home page. It then lists categories for the user to choose from including, Tickets, Membership, Kids Programs, School & Youth Programs, Restaurant Reservations, and Virtual Programs. The user can click on a category to see a list of choices from each category on the following page. There will be a total of 4 clicks from the “buy tickets” button on the home page to the “buy” button on the final description screen. The clicks in between those buttons are designed as an aid to the user’s decision making process as they narrow down choices about which tickets to buy. Before, the user would have to search the full website to find and compare descriptions of all activities and events across several pages which would take more time, more scrolling, more clicking, and more revisiting each page to compare before they can make choices.
We accessed the original site on November 5, 2020 when it looked like this.
The original website can be seen at https://zoo.sandiegozoo.org/tickets.
Wireframe Process
First we revisited the website and pulled any ticketed activities presented on the site, noting that all ticketed activities and attractions would be present in the tickets section so all paid programs are listed in one place for the user to easily compare. Most of these activities were listed in a dropdown menu under the title “things to do,” but not all of the activities listed in “things to do” were ticketed events. Taking the ticketed events and placing them in one place along with the ticketing information will inform the user about what activities have a fee associated with them while they are browsing a page where they expect to see fees and ticket information.
After pulling all ticketed events, we sketched a design for a wireframe that lists categories of tickets to look similar to Eventbrite mobile screens which lists organizations that the user can follow. This was our low-fi wireframe that we used to get initial feedback from users.
Shown in the initial low-fi wireframe, the user will click on a category to advance to a screen that further lists subcategories within that category, and detailed information including: a description of the subcategory, a picture to represent it, the price, and a button to tap if the user would like to buy a ticket.
During the initial sketch, we added additional paths where necessary instead of redesigning one path for a singular way of accessing information to keep stakeholder goals as a priority. There might be a reason why our stakeholders have organized the information in the way they have. So adding additional paths that are more user friendly will add to the usability of the product without taking away the original organization of information that the stakeholder has in place.
After receiving feedback on low-fi wireframes, we created mid-fidelity wireframes with changes inspired by our feedback. From there we created a hi-fidelity wireframe and turned that into a functional prototype! See below.
Initial Low-fi Wireframes
Feedback
User Research for San Diego Zoo Website
For this project we wanted to focus on user needs throughout the entirety of the design. By employing user-centered design, we crafted a survey and from a select sample we asked questions regarding information hierarchy, informational architecture and usability of the San Diego Zoo website. We asked users where they might find certain pieces of information and also asked them to perform “scavenger hunts” around the website as well as their general takeaways of the site. Initially we wanted to revamp both the mobile and desktop website experiences for the San Diego Zoo because that felt fitting, but after thorough user research we realized that users were mainly going to the mobile site for information, it didn’t seem necessary to focus on both overhauls.
Feedback from our Initial Wireframes
We asked the same group that we surveyed for our user research to give feedback on our initial wireframes. Feedback included adding all events to the menu page and combining some categories like School & Youth Programs and Kids Programs into one tab. After thinking about the feedback, we decided to add a link under the main picture on the second screen that links to an existing page on the website that lists all events. We did not want to add all event options in this section because the purpose of this section is to make buying tickets more organized with less scrolling through information. We decided that, to make information clear, all events listed in this section would only be ticketed events or those requiring a fee or reservation. However, this feedback gave us perspective on the user experience that we might have missed. The user might read all information in this section and think that all zoo events require a fee. So later on when they walk the zoo grounds and find free events, they might feel that they were tricked into purchasing tickets for paid events as though we hid the free events from them in their mobile ticketing experience. So, we decided to add a link on each middle screen that will link to “all events/ free events” or “all dining” so users know that there are free or other options before they decide to pay for an event or reservation. We did, however, keep School & Youth Programs and Kids Programs separate to maintain the stakeholder’s goal of separating those two departments.
Mid-fidelity Wireframes
High-fidelity Wireframes
Design Justification
Overall, we wanted to create an easier, straight-forward design where customers could buy tickets and access other information on visiting the San Diego Zoo without having to click and scroll a drastic amount like the former site did. We chose to revamp the mobile viewing of the site based on initial user research, where it became clear that users were looking up the mobile version of the site to find out more about the San Diego Zoo, rather than viewing the site on their desktop. The vivid colors and playful pictures of animals remained as well as a pertinent banner about Covid-19 regulations, as these were both appreciated by users during user testing and rang true to the brand of the San Diego Zoo.
We also incorporated a home button so users could return to the main screen of the site with ease. This idea was implemented during usability testing while creating the final playable prototype, where we realized that if users wanted to easily get back to the initial information hub (the first screen) they would not be able to without restarting the site. This seemed like a huge nuisance to burden users with.
During the beginning stages of design, we thought that the site required far too much scrolling and clicking. But before starting our low fidelity wireframes or initial sketches we made sure to survey a select sample to see if that is what a user would also want. We found that some users thought there was too much labor involved in the site and it could be distracting at times so we took out the chat box that would pop up everywhere on the mobile site. However, our initial assumption was wrong and by employing empathy through design thinking we were able to create a straight-forward whimsical mobile viewing of the San Diego Zoo website.