UX UI Project
Toronto Zoo
Revamped ticket purchasing experience with in-depth UX research.
Information Architecture remapped and new buy flow built.
Redesigned User Interface of mobile app and website.
Duration
3 weeks (Nov 2022)
Deliverables
IA Diagram
Paper Sketch
Wireframes
UI Style Guide
High-fidelity Prototypes
Usability Test Report
My Role
UX UI Designer
UX Researcher
(Individual Work)
Service
UX Design
UI Design
User Research
Ticketing Features
Project Overview
What is Toronto Zoo?
The largest zoo in Canada, showcases animals and plants.
Why the ticketing feature?
I’ve always loved visiting zoo. Needless to say, I planned to visit Toronto Zoo as a newcomer in 2022. Unfortunately, I experienced unfavorable ticketing journey on their website and it's the main user's goal of their site. A smooth and satisfied user experience helps the business raising ticket revenues and increasing the number of visitors.
What I did?
I restructured the website information architecture, redesigned the navigation bar and user flow. Then, I applied it to design a new interactive interface and also created the app design.
Design Process
Empathize
Learn about the user
• Define their goals
• Card sorting
Define
Determine the features
• Painpoints
• Problem statement
Ideation
Brainstorm solutions
• User flow
• Information architecture
Prototype
Simulate user experience
• Sketches
• Wireframes
• Prototype
• Style guide
Test
Validate with users
• Usability tests
• Improvements
Empathize
Define Business and User Goals
To ensure a deep understanding of user needs, I began with thorough secondary research, uncovering essential information that user needs, prioritizing needs, and mapping potential user flow.
Key insights:
-
Main user goal is purchasing tickets, even for different target audience.
-
Ticketing features should be more accessible.
-
Not only the ticket information, information about visiting the zoo should also be provided to different type of audience.
Card Sorting
A well-designed NAV bar also improve the usability. In order to make sure the remapped site is well-structured with the new NAV bar, I made a list of the content and features and conducted a workshop. Participants were asked to do card sorting for re-grouping.
Key insights:
-
There are 3 levels structure, while "Plan Your Visit" contains lots of important visiting information.
-
"Tickets" is grouped under "Plan Your Visit". Both of them are closely related in the user flow.
-
How may we rebuild the IA with appropriate amount of top-level labels, make ticketing features easily accessible, and let user also access to "Plan Your Visit" at the same time according to their flow?
Define Problems
How is the current experience?
The difficulties and challenges for users to purchase the tickets lowered their interest and positive impression towards the zoo as this is customer’s first interaction with the Toronto Zoo. Not to mention some users gave up purchasing and bounced from the flow due to pain points.
What are the pain points?
01
Lacking eye catchy call-to-action button and "where to click" instructions to guide users steps by steps to let user having a smooth and confident purchasing flow.
02
Lacking visibility of system status. Users will easily give up the purchase due to the difficulties during the process without a transparent and clear buy flow stage status.
03
Bad visual and layout design such as lacking interactive elements, colour for branding, short descriptions, and visual hierarchy of text, icons and call-to-action buttons and hard to compare the ticket types.
How might we do?
Problem Statement #1:
How might we redesign the ticket buy flow to decrease the bounce rate?
Redesign the whole experience with deeply consideration of the usability heuristics, such as increasing the visibility of system status. Restructure the NAV bar by prioritizing user tasks and navigation trends.
Problem Statement #2:
How might we trigger user positive emotion to deliver create a user experience that feels more human and make the interaction with the digital product more delightful?
Create a responsive interface design with elements such as CTA buttons with hover effect, clickable breadcrumb and icons and illustrations with metaphor effects.
Problem Statement #3:
How might we build a concrete branding on website and app?
Change colors and visuals, the essential visual elements to show brand’s character. Build UI Style Guide that obey the color palette of Toronto Zoo logo, maintaining the consistency of branding.
Ideation
Define User Flow
In order to map out the ticket purchasing process from the user perspective, I created a user flow that stating the customer action throughout the entire user processes.
This diagram not only enables me to better visualize how the website will be delivered to the end users, but helps us in designing the step-to-step flow of the website.
IA Site Mapping
Before starting the wireframes, I created a site map to help mw brainstorm the pages and information under each tab inside the website.
I created categories according to audiences in mind and considered each user type’s anticipated user flow. By priority, we put “Tickets” second and “Plan Your Visit” third to represent a user’s task flow. For example, a user can purchase the ticket they would like and then proceed to plan their visit.
Prototype
Sketches and
Low-fidelity wireframes
Using the site map as a guide, I developed low-fidelity wireframes, serving as a foundational blueprint. These sketches visualize my design concepts early on, aiding in the layout planning process.
Style Guide
To maintain design coherence and consistency, I crafted a style guide rooted in the following principles.
Color:
The color palette was inspired by Toronto Zoo's positioning, which is nature, earth and environment. Also, its primary audience of kids and families inspired a rejuvenating and fertility color palette.
Typography:
Typefaces were carefully selected for optimal readability and approachability, ensuring a friendly and trustworthy appearance of the content.
High-fidelity wireframes
And finally, I worked on these prototypes to bring the wireframes to life by demonstrating the interactions and animations.
How is my design decision
and WHY?
Resigned NAV Bar
Level up the "Tickets" Label.
Trendy and Dynamic Visuals
The color and graphics help branding the website/app and refreshing the users.
Responsive, Interactive
All the buttons, NAV bar and dropdown menu are visually interactive.
Convenient to Compare
Ticket Types
Users can compare tickets by dragging gesture on app.
On web, users can compare on the same page with less clicks and short descriptions.
Adding Call-to-action Button
Eye-catchy and guiding the user to next step.
Chatbox for Asking Help
Assist users when they face challenges in order to decrease the bouncing rate.
Breadcrumb
For site navigation and purchase stages, present a transparent system status.
Minimalist Buy Flow & Visual
Only essential elements and necessary steps placed. Titles are bold and placed in a larger font size for visual hierarchy .
Click Less, Page Combined
All the steps of purchasing are combined on one page, more convenient to complete.
Order Preview Box
Recognition rather than recall, more efficient use.
User Control and Freedom
"Clear Cart", "Back", and clickable breadcrumb to review cart for modification.
Prevent Accidental Click
Warn user before leaving the page and lose the input data.
Test
Why usability test?
To evaluate the prototype's strengths and weaknesses, 10 usability tests were carried out. By testing a lo-fi prototype, usability issues were minimized and design improvements were addressed early in the process.
What are the key findings?
01
The progress bar (breadcrumbs) worked well for users.
02
Users found the navigation flow to be very easy to follow.
03
Users average rating of task as easy to complete: Level 2 (easy).
04
There is no email confirmation or "email tickets" option.
05
Too many long dropdown menus in the checkout process.
06
Certain steps of checkout process are divided and deemed redundant to users.
What are the next steps?
Eliminating user confusion by wording headings in a clear and concise manner, so that users are able to complete tasks without further description or explanation.
Eliminating user frustration by combining pages and steps in the order process that should be grouped together, specifically by having the Contact Information and the Payment Information text fields on the same page.
Increasing user control and freedom by modifying buttons and drop-down menus to allow for more flexibility and efficiency of use.
Takeaways
How's my journey?
This was my first go at tackling a whole UX/UI design project solo. No teammates to lean on, I had to handle everything from UX research to UI design. Gotta admit, it was a challenge, but boy was it worth it!
Here's the thing I learned from going through this process a bunch of times: the more I invested in the initial stages (Research and Define), the more kickass the final result turned out, visuals included. Time spent upfront really sets the tone for an awesome overall outcome.
What can I do better?
Since I chose the primary research method, I believe if I conduct more qualitative user research such as interviews, then creating journey map and persona would help me explore more useful insights.
Also, the usability test should be conducted in with the low-fidelity prototype to gather feedback from potential users which may help me improve the features and interfaces of the final product. I made a mistake here, which is creating the high-fidelity prototype before conducting the tests. I realized that instead of asking for feedback at the end of the project, it's much better to get feedback after every stage of your design process as it saves a lot of time and effort in the long run.
Now, I learned from the mistake. So, stay tuned to my final prototype!