TORONTO ZOO
WEBSITE REDESIGN
Redesigning the Toronto Zoo website is the main goal of this project in order to meet consumer demand for online zoo ticket purchasing. In addition, consumers had to travel an alternate route in order to book parking permits, which added unnecessary complexity to the booking procedure on the official Toronto Zoo website. To simplify the process, I suggested a new way to book tickets.
PROJECT OVERVIEW
TimeLine
4 months (Jan to April) 2023
Tools
Figma, Miro, Canva, FigJam
Role
UX/UI Researcher and Designer
DESIGN PROCESS
CARD SORTING, SITE MAPPING & USER FLOW
PAPER & LOW FIDELITY WIREFRAMES
USABILITY TESTING
UI STYLE GUIDE & HIGH FIDELITY PROTOTYPE
The Problem Statement
The ticket booking process for the Toronto Zoo required users to follow a separate path to book parking tickets, which caused unnecessary complexity.
Suggested Solution
To address this problem, we sought to simplify the process by merging the booking of parking tickets with regular tickets.
A design along with a user path that has minimum required clicks that will help our goal.
The Reason
Focussed on "Keeping it Simple"
Ideation
CARD SORTING
We used a set of 44 cards and held open card sorting sessions with ten people. This gave us more understanding of the mental models of our participants and how they arrange and interpret the data. We came to a final grouping of cards by synthesizing and analyzing the individual card types. This will guide the site mapping and IA diagramming processes that come after.
SITE MAPPING
The content was subsequently arranged into an IA diagram using the synthesised final card categories, which served as guidance for the site map's structure.
USER FLOW
A user flow was developed using the site map to buy tickets for a family visiting the zoo (two parents and two children).
PAPER & LOW FIDELITY WIREFRAMES
Produced wireframe drawings that address the user's goal of buying tickets. The sketches made it possible to outline the layout of the interface and place key components that would help achieve these goals.
USABILITY TESTING
We conducted usability testing with six individuals using a low-fidelity prototype. They were given the task of purchasing tickets for two adults and six children using the prototype. This allowed us to detect any major usability difficulties before proceeding with design and high-fidelity prototyping.
Overall, participants completed the exercise with just minor difficulties. The layout of the booking page, on the other hand, was a frequent difficulty. Many participants felt that the booking step should include a progress bar so that when they completed each step, it would be displayed at the top of the page.
To remedy this issue, We decided to display a progress bar that highlighted each completed step. This allows the user to clearly distinguish which steps they are in and which they need to complete.
.png)
HIGH FIDELITY WIREFRAMES
These are the High fidelity for the Toronto Zoo website.
FINAL PROTOTYPE
UI STYLE GUIDE
We wanted to honour the website's predominantly green colour scheme when choosing the design aesthetic for this overhaul. With button colours influenced by the colours of certain Toronto Zoo animals, we decided on a darker shade of green as our main colour. Additionally, we selected Nutto Sans, a sans-serif typeface, for its simplicity and legibility.
INTERACTIVE PROTOTYPE
NEXT STEPS
"Following the High Fidelity Prototype Usability Test, we will validate or re-iterate our findings. Simultaneously, we will work on next-in-line priority areas, such as the membership page, addressing areas of improvement to enhance the user experience."