TORONTO ZOO
PROJECT SUMMARY
I collaborated with fellow UX students to develop interactive prototypes for the Toronto Zoo website's "purchasing tickets" flow on desktop and mobile. We began with card sorting to analyze navigation, created IA diagrams, and designed low and mid-fidelity wireframes. After usability testing with 10 participants, we refined our prototypes into high-fidelity versions. This project is not affiliated with Toronto Zoo.
TIMELINE
September 2022 – December 2022
ROLE
UX Researcher and Designer in a 5 member UX team
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 clean, easy to use, and well-organized.
- The ticket booking process was straightforward, with clear language and easy navigation.
- Breadcrumb navigation was helpful, and users appreciated the options to email or print confirmed tickets.
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:
- Relocate the "Tickets" tab for improved visibility.
- Introduce additional payment options.
- Streamline the booking process by consolidating calendar and ticket type on a single page.
- Allow multiple email addresses for ticket confirmations.
- Differentiate between "Group Bookings" and "General Admission" to reduce 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).
PREVIOUS
NEXT