Toronto Zoo:
UI Redesign
Toronto Zoo is a place where people, animals and science are connected to fight against extinction. (Toronto Zoo | About the Zoo, n.d.) The Toronto Zoo aims to protect wildlife animals and offers valuable opportunities to the public to closely get in touch with nature. Thus, ensuring customers' online ticket purchasing experience is intuitive and smooth would be crucial to driving more visitors to the zoo, thus boosting revenue to be invested in wildlife protection. For this project, we redesigned the user interface of the Toronto Zoo's website to improve the user experience.
Toronto Zoo:
UI Redesign
Toronto Zoo is a place where people, animals and science are connected to fight against extinction. (Toronto Zoo | About the Zoo, n.d.) The Toronto Zoo aims to protect wildlife animals and offers valuable opportunities to the public to closely get in touch with nature. Thus, ensuring customers' online ticket purchasing experience is intuitive and smooth would be crucial to driving more visitors to the zoo, thus boosting revenue to be invested in wildlife protection. For this project, we redesigned the user interface of the Toronto Zoo's website to improve the user experience.
Project Overview
Task
Redesign the user interface to ensure a smooth and enjoyable online ticket-purchasing experience.
Solutions
-
Allow users to create an account on Toronto Zoo's website to save personal information and payment details
-
Redesign the website to give it a fresh and modern look
Role
UX researcher
UI designer
Team size
3
Duration
4 weeks
Tools
Figma
Miro
Steps I took
User & Business Goals
To improve the online experience on Toronto Zoo's website, we first identified the user goals and business goals by conducting the secondary research.
User Types & Goals
Business Goals
Card Sorting
Then, we selected relevant cards from the website of the Toronto Zoo and eliminated repetitive or unnecessary items. Then we recruited a total of 10 participants and ask them to group cards that they think have a close relationship together. We were able to understand how users expected to locate the information they need on the website of Toronto Zoo. The data we collected was then further discussed and analyzed to create our final information architecture diagram.
IA Diagram
The information architecture was redesigned based on the result we had in the last card sorting activitiy. A log-in function was added to the website and we ensured that all functions could be performed within three clicks to shorten the time spent achieving the user goals, thus, making the whole online experience on Toronto Zoo's website more convenient.
User Task Flow
Due to the time constraint given, we were only able to focus on one user task flow. Based on the research we did previously, our team believed that improving the online ticket purchasing experience would fulfill the primary user goal as well as generate revenue for the Toronto Zoo to continues its work on protecting wildlives and educating citizens. A user task flow of purchasing ticket on the Toronto Zoo's website was then created:
Style Guide
The style guide the team decided to create is minimalistic that stays true to the colour palette of the Toronto Zoo logo. The team chose to stay with earth tones to emphasize plants and animals and their connection to nature. In addition, the colour light green will be used for the logo of Toronto Zoo as well as a highlight for buttons. The colour dark green is for navigation bars and section backgrounds. Warm white will be the overall background of the website, as well as some section backgrounds. Black will be used for the main text, and grey will be used for supplementary text that is not as important. As for the typography, the team will use the font style Poppins, which is sleek and simple to represent the typography on the Toronto Zoo website. The team also decided to have buttons as they would look at the upcoming milestones for high-fidelity wireframes.
Initial Sketches
Wireframe
Usability Test
Our team conducted usability testing on the low-fidelity wireframes to validate the design and identify any user pain points and challenges to refine the design before proceeding to the high-fidelity wireframes.
Our team conducted 8 usability tests, with 8 separate participants. The tests were done remotely and recorded. Each test consisted of one participant, a moderator and a notetaker - the moderator facilitated the tests (i.e., introduced the usability test, informed participants of their rights, and assigned the tasks), while the notetaker carefully listened and watched the user's behaviour, taking note of how the users executed the tasks.
Participants were encouraged to think aloud as they completed the real-world tasks. Participants unveiled to us their thoughts as they completed said tasks.
User Task
We designed a series of tasks for the users to complete to see if there's any space for improvements on our design.
Affinity Diagram
Positive Findings
-
Most users found that the wireframes guided them to purchasing their tickets in a simple and clear way.
-
Users found the back button helpful as it gave them the control to go back and forth throughout the wireframes.
-
Users expressed that they found the process of purchasing tickets easy and intuitive.
Negative Findings
Prioritization Matrix
Through usability tests, we were able to discover users' pain points, expectations, thinking processes and emotions when interacting with our prototype. By putting together the data collected from the usability test, we as a team made use of an affinity diagram to identify patterns and further analyze the difficulties our participants experienced while interacting with our low-fidelity prototype. We then put our negative findings in the prioritization matrix to see how high or low the user value and the effort would be for each problem. This helped us prioritize important issues to tackle in the following design process. We gathered valuable insights and understood better how would users interact with the website of Toronto Zoo. We then carried on with the result of our usability test to make changes to the low-fidelity prototype and move on to finalizing the mockup of our design.
Web Mockup
Mobile Mockup
What I learnt
In this project, our team involved users in two activities: card sorting and usability tests. Both helped us tremendously understand how users interact with the Toronto Zoo's website and categorize different items or information. Users' participation greatly influenced our design decisions, and I have learnt that only by understanding the needs of users could we design something truly useful and usable. I have learnt about the importance of setting up a design system within our group. Our group was able to divide the workload and work on our own based on the font, elements and grids of the design system, which made our final mockup looks unified and minimalist.