Toronto Zoo Redesign - Alleesa Paragas

TORONTO ZOO

PROJECT SUMMARY

I worked with fellow UX students to create interactive prototypes for desktop and mobile formats of a user flow on the Toronto Zoo website. My team decided to focus on the "purchasing tickets" user flow and used several methods to create the prototypes.

We started with card sorting to understand the website's navigation, and created IA diagrams based on the collected data. Then we designed low and mid-fidelity wireframes, followed by usability testing with 10 participants.

Using the findings from the usability testing then informed the development of our final high fidelity wireframes and prototypes. This project is not affiliated with the Toronto Zoo.

TIMELINE
September 2022 – December 2022

ROLE
UX Researcher and Designer (in a UX team of 5)

TOOLS
Miro
Figma

Research

CARD SORTING

We began with card sorting to analyze website navigation. User goals were listed beforehand. Gathering 10 participants in total (2 per team member), we selected 50 words and phrases for participants to sort them into their own categories and name them.

Findings

Notable cards used as category labels in sorting sessions: About Us, Things to Do.
Most participants grouped the cards Conservation Initiatives, Animal Welfare, Animals, Plants, and Adopt an Animal together.
Most of the participants thought Accessibility was associated to transportation.
Most participants have left the "Sign In" card by itself.

INFORMATION ARCHITECTURE (IA) DIAGRAM

Once we finished with card sorting, we used the results to create individual IA diagrams, organizing the navigation system for our project. After reviewing our diagrams, we finalized an IA that incorporated everyone's ideas and data, representing the optimal navigation system format.

USER FLOW

Ideation

WIREFRAME SKETCHES

Each team member created their own individual wireframe sketches and prototypes. We started by sketching out our ideas on paper to create a rough draft of the ticket purchasing user flow. Then, we used prototype software of our choice to make our sketches into interactive prototypes. Here are my individual wireframe sketches:

Prototyping

LOW-FIDELITY WIREFRAMES & PROTOTYPES

We then compared our individual sketches and prototypes for the ticket purchasing user flow as a team. We discussed and evaluated them to find the best solution. We chose the team member with the most suitable sketches and prototype. Using the selected sketches and prototype, we created a low fidelity wireframe.

Desktop Wireframes

Mobile Wireframes

Testing

USABILITY TESTING

We conducted a total of 10 usability tests. In each test, we observed a participant and the ways they used and navigated through our 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 found the prototype's UI to be clean and easy to use.
The ticket booking process was straightforward and well-organized.
Participants easily understood the language used on the website.
Participants were able to navigate to the Tickets page easily, and found the breadcrumb navigation useful.
Participants liked the option to send confirmed tickets to their email or print them.

Negative Findings

Some participants struggled during the second test scenario by clicking on "Group Bookings" for multiple tickets instead of "General Admission".
Collapse feature of "Choose Ticket Type" adds unnecessary step.

Final Prototypes

HIGH-FIDELITY WIREFRAMES

We received recommendations from our usability testing and made changes to our low fidelity prototypes before moving to high fidelity. The changes included:

Relocating the "Tickets" tab for improved visibility
Introducing more payment options
Streamlining the booking process by consolidating the calendar and ticket type on one page
Allowing multiple email addresses for ticket confirmation
Differentiating between "Group Bookings" and "General Admission" to avoid confusion.

DESKTOP DEMO

MOBILE DEMO

Reflection

I enjoyed conducting card sorting and usability testing as it was intriguing to observe how participants think. I also liked creating the prototypes using prototyping tools as this was my first time trying them out. However, I had trouble using Figma as its prototyping features were hard to learn. To improve, I plan to keep practicing Figma and other prototyping tools (like Adobe XD).