Toronto Zoo Buy-Ticket User Flow Design
Project Overview
Topic: Designing a new buy-ticket flow for Toronto Zoo
End Date: Dec 2022
Methods: Card Sorting, Information Architecture (IA) Diagramming, Low Fidelity Prototyping, User Flow Diagramming, High Fidelity Prototyping, Usability testing
Deliverables: Test plan, Usability testing raw data, Usability test report, Test screener, Consent forms, Test Script, Low and High Fidelity Prototypes, UI style guide, Flowchart, and IA Diagram
Collaboration: 5 UX designers
My roles: UX designer, UI designer (preparing low and high-fidelity prototypes), Building information architecture, Usability tester
Tools: Figma, Miro
Problem Statement
Navigating through the buy ticket process is complicated, the navigation is not helping users to move in and out in the buy ticket user flow, and make changes easily. Also, users are not allowed to go homepage during the buy process. These problems lead to user loss, they quit buying because of frustration.
Solution
We built a new information architecture and developed a low-fidelity prototype of the new buy ticket flow based on the paper prototype we created previously. Then, we conducted usability tests with low-fidelity prototypes. For our usability testing sessions, we screened and recruited 10 participants that fit the product’s target audience criteria. After completing our testing, we analyzed and evaluated our raw data, summarized each test session, and prepared a usability test report. The main objectives of our usability testing are: to assess what works well in our low-fidelity prototype and determine key usability issues before proceeding to the following stages of prototype development, which is the High Fidelity prototype. We successfully created better navigation, aesthetic and minimalist design, and user freedom on the buy-ticket user flow.
Process
Business Goal
Increase ticket sales and bookings
User Goal
Improve tickets user flow
Target Audience
Our target audience for booking tickets consists of adults, seniors and students who are new or returning Toronto Zoo visitors.
Card Sorting
IA Diagram
The IA that we used for our Toronto Zoo prototypes was organized based on the findings from our Card Sorting sessions. For our final desktop and mobile navigation designs, our team decided to go with this specific approach because we wanted to prioritize the content arrangements to what the users are familiar with and highlight areas most important for Toronto Zoo. We decided to keep the navigation design simple with enough breathing space so that it’s easy to use for anyone visiting the website. Also, it is easier for users to find where to buy tickets.
Buy-Ticket User Flow
Low Fidelity Wireframes
We developed a low-fidelity prototype that is based on the paper prototype we created previously, and structured the wireframes with the goal of improving the navigation in the buying ticket user flow. We collected our data from card sorting and IA process to come to the conclusion of the designing this user flow. We applied the user freedom aspects to improve the flow of navigation(breadcrumbs, buttons)
Desktop Wireframes
Mobile Wireframes
Usability Testing
Platform: Zoom
Duration: 15-25 mins
Number of sessions: 10 test sessions
Participants: Adults and students who are new or returning
Toronto Zoo visitors
Deliverables: Analysis of findings (Usability test report)
and team brief
Process:
- Introduction – 5 min
- Tasks – 10-15 min
- Wrap-up – 5 min
What Are We Testing?
Before we can proceed to creating our high-fidelity prototypes, we want to test our low-fidelity prototype to see how users interact with it. At this stage, it is easier to identify and fix any usability issues regarding the low-fidelity prototype so that our next prototypes (high-fidelity) are ideally free of any usability issues.
Test Objectives
The main objectives of our usability testing are: to assess what works well in our low-fidelity prototype and determine key usability issues before proceeding to the next stages of prototype development. By using the usability testing method to conduct this study, we will be able to test our prototype and have one-on-one conversations with participants while they go through the test scenarios. This will allow us to understand their actions and feelings towards the ticket process on the Toronto Zoo website.
The information gathered from the raw data will be used to find out what worked well and what still needs improving – which will help us find solutions and potential opportunities.
In each test, we observed a participant and the ways they used and navigated through the Toronto Zoo website low fidelity prototype given the assigned user scenarios. Through these tests, we gathered significant observations and insights. Our findings are sorted into two categories: positive and negative.
Positive Findings (+)
- Participants liked the clean interface of the website prototype
- Most of them found the ticket booking process to be straightforward and well organized
- The language used across the website was not difficult to understand at any point in time during their tasks
- Most participants were able to navigate to the Tickets without difficulty
- Participants found the breadcrumbs useful while booking tickets
- Participants liked the options of sending the ticket to the email and printing the ticket
Negative Findings (-)
- Some participants struggled a bit in their second scenario by clicking on ‘Group Bookings’ for multiple tickets instead of ‘General Admission’
- Collapse feature of ‘Choose Ticket Type’ adds unnecessary step to the booking process.
- Multiple payment methods missing from the checkout.
Recommendations
- Changing the positioning of “Tickets” in the navigation bar from the left corner to somewhere towards the center of the webpage where it is more prominent
- Adding different payment methods other than credit/debit card payment, such as Paypal, Apple Pay
- Participants preferred having the calendar and type of tickets all on one page at once
- Option to add multiple email addresses in the checkout page ticket booking confirmation pop-up to send tickets to multiple people instead of one person. Everyone can get their own ticket sent to their mail in spite of billing together.
- Group Bookings are intended for large groups that have more than 10 people. A way to distinguish the purpose of ‘Group Bookings’ from ‘General Admission’ category is needed.
Design Changes According to Recommendations
- Changed the position of “Tickets” on the top navigation bar
- Added payment options in Payment Details screen
- Added a View Cart button to the payment details page to give a chance to users to check the cart before paying.
- Added multiple email options for sending the ticket.
- Defined Group Bookings with a subtitle that explains it is for booking for groups with more than 10 people
UI Style Guide
High Fidelity Wireframes
The desktop design for the entire online ticket booking process of Toronto Zoo is made in a ‘MacBook Pro 14’ size. The responsive pages are made in a regular iPhone 13 size. The colors selected in the UI style guide will be used in the future while designing high-fidelity prototypes. The selected colors symbolize flora and fauna of the zoo.
High Fidelity Prototype
Next Steps
While the buy ticket process was challenging to design, in the end, we were able to create something simple and intuitive that would help users: we created a navigation that increases user freedom, eases the way users buy tickets, change the dates and other actions they’ve taken, and visit other pages in Toronto Zoo during the buying process, For the client, we were able to cultivate an interface that could help users easily navigate through buying a ticket, and continue their shopping, or eye tracking on the website and come back to checkout.
With the client’s permission, we will proceed with several usability testings to see the impact of redesigned buy ticket user flow on users and see how it affects users’ behaviour and the business goal. Finally, it will be fully launched after getting a high conversion rate with the redesigned buy ticket user flow.
Toronto Zoo Buy-Ticket User Flow Design
Project Overview
Topic: Designing a new buy-ticket flow for Toronto Zoo
End Date: Dec 2022
Methods: Card Sorting, Information Architecture (IA) Diagramming, Low Fidelity Prototyping, User Flow Diagramming, High Fidelity Prototyping, Usability testing
Deliverables: Test plan, Usability testing raw data, Usability test report, Test screener, Consent forms, Test Script, Low and High Fidelity Prototypes, UI style guide, Flowchart, and IA Diagram
Collaboration: 5 UX designers
My roles: UX designer, UI designer (preparing low and high-fidelity prototypes), Building information architecture, Usability tester
Tools: Figma, Miro
Problem Statement
Navigating through the buy ticket process is complicated, the navigation is not helping users to move in and out in the buy ticket user flow, and make changes easily. Also, users are not allowed to go homepage during the buy process. These problems lead to user loss, they quit buying because of frustration.
Solution
We built a new information architecture and developed a low-fidelity prototype of the new buy ticket flow based on the paper prototype we created previously. Then, we conducted usability tests with low-fidelity prototypes. For our usability testing sessions, we screened and recruited 10 participants that fit the product’s target audience criteria. After completing our testing, we analyzed and evaluated our raw data, summarized each test session, and prepared a usability test report. The main objectives of our usability testing are: to assess what works well in our low-fidelity prototype and determine key usability issues before proceeding to the following stages of prototype development, which is the High Fidelity prototype. We successfully created better navigation, aesthetic and minimalist design, and user freedom on the buy-ticket user flow.
Process
Business Goal
Increase ticket sales and bookings
User Goal
Improve tickets user flow
Target Audience
Our target audience for booking tickets consists of adults, seniors and students who are new or returning Toronto Zoo visitors.
Card Sorting
IA Diagram
The IA that we used for our Toronto Zoo prototypes was organized based on the findings from our Card Sorting sessions. For our final desktop and mobile navigation designs, our team decided to go with this specific approach because we wanted to prioritize the content arrangements to what the users are familiar with and highlight areas most important for Toronto Zoo. We decided to keep the navigation design simple with enough breathing space so that it’s easy to use for anyone visiting the website. Also, it is easier for users to find where to buy tickets.
Buy-Ticket User Flow
Low Fidelity Wireframes
We developed a low-fidelity prototype that is based on the paper prototype we created previously, and structured the wireframes with the goal of improving the navigation in the buying ticket user flow. We collected our data from card sorting and IA process to come to the conclusion of the designing this user flow. We applied the user freedom aspects to improve the flow of navigation(breadcrumbs, buttons)
Desktop Wireframes
Mobile Wireframes
Usability Testing
Platform: Zoom
Duration: 15-25 mins
Number of sessions: 10 test sessions
Participants: Adults and students who are new or returning
Toronto Zoo visitors
Deliverables: Analysis of findings (Usability test report)
and team brief
Process:
- Introduction – 5 min
- Tasks – 10-15 min
- Wrap-up – 5 min
What Are We Testing?
Before we can proceed to creating our high-fidelity prototypes, we want to test our low-fidelity prototype to see how users interact with it. At this stage, it is easier to identify and fix any usability issues regarding the low-fidelity prototype so that our next prototypes (high-fidelity) are ideally free of any usability issues.
Test Objectives
The main objectives of our usability testing are: to assess what works well in our low-fidelity prototype and determine key usability issues before proceeding to the next stages of prototype development. By using the usability testing method to conduct this study, we will be able to test our prototype and have one-on-one conversations with participants while they go through the test scenarios. This will allow us to understand their actions and feelings towards the ticket process on the Toronto Zoo website.
The information gathered from the raw data will be used to find out what worked well and what still needs improving – which will help us find solutions and potential opportunities.
In each test, we observed a participant and the ways they used and navigated through the Toronto Zoo website low fidelity prototype given the assigned user scenarios. Through these tests, we gathered significant observations and insights. Our findings are sorted into two categories: positive and negative.
Positive Findings (+)
- Participants liked the clean interface of the website prototype
- Most of them found the ticket booking process to be straightforward and well organized
- The language used across the website was not difficult to understand at any point in time during their tasks
- Most participants were able to navigate to the Tickets without difficulty
- Participants found the breadcrumbs useful while booking tickets
- Participants liked the options of sending the ticket to the email and printing the ticket
Negative Findings (-)
- Some participants struggled a bit in their second scenario by clicking on ‘Group Bookings’ for multiple tickets instead of ‘General Admission’
- Collapse feature of ‘Choose Ticket Type’ adds unnecessary step to the booking process.
- Multiple payment methods missing from the checkout.
Recommendations
- Changing the positioning of “Tickets” in the navigation bar from the left corner to somewhere towards the center of the webpage where it is more prominent
- Adding different payment methods other than credit/debit card payment, such as Paypal, Apple Pay
- Participants preferred having the calendar and type of tickets all on one page at once
- Option to add multiple email addresses in the checkout page ticket booking confirmation pop-up to send tickets to multiple people instead of one person. Everyone can get their own ticket sent to their mail in spite of billing together.
- Group Bookings are intended for large groups that have more than 10 people. A way to distinguish the purpose of ‘Group Bookings’ from ‘General Admission’ category is needed.
Design Changes According to Recommendations
- Changed the position of “Tickets” on the top navigation bar
- Added payment options in Payment Details screen
- Added a View Cart button to the payment details page to give a chance to users to check the cart before paying.
- Added multiple email options for sending the ticket.
- Defined Group Bookings with a subtitle that explains it is for booking for groups with more than 10 people
UI Style Guide
High Fidelity Wireframes
The desktop design for the entire online ticket booking process of Toronto Zoo is made in a ‘MacBook Pro 14’ size. The responsive pages are made in a regular iPhone 13 size. The colors selected in the UI style guide will be used in the future while designing high-fidelity prototypes. The selected colors symbolize flora and fauna of the zoo.
High Fidelity Prototype
Next Steps
While the buy ticket process was challenging to design, in the end, we were able to create something simple and intuitive that would help users: we created a navigation that increases user freedom, eases the way users buy tickets, change the dates and other actions they’ve taken, and visit other pages in Toronto Zoo during the buying process, For the client, we were able to cultivate an interface that could help users easily navigate through buying a ticket, and continue their shopping, or eye tracking on the website and come back to checkout.
With the client’s permission, we will proceed with several usability testings to see the impact of redesigned buy ticket user flow on users and see how it affects users’ behaviour and the business goal. Finally, it will be fully launched after getting a high conversion rate with the redesigned buy ticket user flow.