Enhancing Program Participation at TPL
Industry
Education
Duration
3 Weeks
Methods
Overview
The Toronto Public Library is one of the busiest urban library systems in the world, with over 100 branches offering free access to books, programs, and services that support lifelong learning for Torontonians of all backgrounds. I designed a new digital experience to help users better navigate programs and discover the full range of resources available to them.
Problem
Online programs have seen a -25.7% drop in attendees, views, and replays from
2022 (61,035) to 2023 (45,347).
While this decline is largely due to uncontrollable external factors (e.g., a cyberattack), it signals an opportunity to rebuild digital trust and re-engage audiences through more intentional program design and visibility.
Research Goal:
We need to understand how UI improvements can increase program engagement and enhance program discoverability and categorization for our target audiences—young adults, adults, and seniors—ultimately boosting retention and encouraging users to explore more programs.
Research Methods:
Design Audit
To understand the existing user flow and identify usability gaps, I conducted a heuristic evaluation of the Toronto Public Library website guided by Nielsen Norman Group, focusing on the process users go through when searching for a program and viewing the detailed pages.
Customer Journey Map
Mapping out the user’s journey allowed me to visualize pain points, behaviors, and moments of friction that may not have been immediately obvious. Through this process, I uncovered several areas where the experience could be improved.
Competitive Analysis
After identifying key usability challenges, I turned to other library websites to examine how they approach their UI patterns to understand how they structure content, guide navigation, and enhance search functionality.
Indirect Competitive Analysis
I conducted an indirect competitive analysis looking for how heavy content websites design their homepage, detailed event registration and flow
Design Audit Evaluation
After completing the heuristic evaluation, I created insights where I found missing features as a way to surface friction points in the user experience. I framed each observation as a gap in the experience—areas where expected functionality was absent or unclear.
Purpose of Customer Journey Map
The customer journey map was created to uncover how both new and returning users interact with the Toronto Public Library website when discovering and registering for programs. By mapping user behaviors, goals, and frustrations throughout this flow, I identified key pain points and opportunities to improve navigation, clarity, and overall user experience.
We defined five key phases in the customer journey:
Awareness: Discovering TPL programs
Consideration: Evaluating a program of interest
Acquisition: Exploring more and registering
Service: Participating in a program
Loyalty: Returning and referring others
User Personas from Journey Insights
Based on insights uncovered in the customer journey map, I created two user personas to define and prioritize the most relevant behavioral patterns, emotions, and unmet needs observed across both new and returning users.
Actions – Common behaviors users perform when discovering and registering for programs
Feelings – Emotional states that surface during various phases of their journey
Needs – What users require to feel successful, supported, or confident in navigating the platform
Competitive Research: Understanding How Other Libraries Present Programs
After identifying key usability challenges, I turned to other library websites to examine how they approach their UI patterns to understand how they structure content, guide navigation, and enhance search functionality.
This analysis provided insights into best practices and areas for improvement, informing the next phase of my redesign.
Direct Competitive Analysis
Visual Hierarchy in Event Listings
The best designs prioritize contrast, weight, and spacing to make key event details (title, date, location) instantly scannable.
Search & Filtering Systems
Best example: Oodi Helsinki’s calendar-based filter dynamically updates results based on selected dates.
Brooklyn Public Library’s search index and filters streamline event discovery by preventing information overload.
Indirect Competitive Analysis: Uncovering Missing Solutions
After reviewing library websites, I found the current designs lacked effective visual solutions for showcasing events, particularly in the hero section. To address this, I explored content-heavy layouts, turning to news websites for inspiration, and one library homepage. I also noticed that event pages and registration flows were underdeveloped, prompting me to study how other platforms handle registration processes.
Indirect Key Insights
Visual Inspiration for landing page
I took inspiration from Chicago public library as they have a blog post style.
News websites to see how they visually deal with text heavy content to reduce cognitive load.
Event Detail Pages – Best Example: Eventbrite
Eventbrite’s sticky registration button follows you as you scroll.
Users can read the event description and register immediately when they’re convinced, without searching for the CTA.
Registration is a modal popup instead of a separate page.
Reduces friction by keeping users on the event page rather than redirecting them elsewhere.
Mockups: Iterating Toward Visual Consistency
To achieve a cohesive layout, I began by experimenting with the Card component, drawing inspiration from my competitive analysis. As I refined the card, I used it to guide the structure of the Homepage layout. This iterative process helped establish a visual rhythm that brought the layout together.
The slideshow below captures the evolution of both the card and homepage design, moving from early drafts to the final system.
Breakdown
1 . Card Component
The card went through several design iterations as I tested different sizes, typography, spacing, and image ratios. Each change informed how the content could be displayed consistently across the site.
2. Homepage Layout
Once the card’s structure was in place, I explored layout configurations that allowed the card to shine while maintaining balance, responsiveness, and clarity in the overall page flow.
A Clearer Path to Program Discovery
This new layout builds on what already works—reshaping the homepage into a more cohesive, interactive experience. Users can now discover and register for Toronto Public Library programs in a more fluid, engaging way.
Click Through the New Layout
1. Homepage: Discover
Take a look at the carousel—you can now browse current, featured, and online programs. On the right, check out TPL’s YouTube and Crowdcast platforms, now surfaced more clearly to give you more ways to engage.
Program Page: Explore
From the homepage, use the top nav bar and click “Programs” to access the redesigned navigation. Clicking any program header will take you to the updated Programs page. With the added calendar design found choosing the date will help users quickly make a decision to find a program that fits their schedule. The redesigned layout of TPL's YouTube and Crowdcast content was to increase visibility for the platforms.
Program Detail Page: Register
Clicking a program on the program page will bring you to the details, You’ll notice as you scroll through the page that the register button follows you. Clicking on the register button opens a modal so you can sign up without creating a frictionless experience. At the bottom, suggested programs are included to support content retention and encourage continued discovery.
A Smarter Way to Discover Programs
The redesigned Programs page helps users find what fits — whether they're looking for something this weekend or exploring a specific topic. The goal was to reduce friction and make the experience feel more intentional, organized, and visual.
Key Design highlights:
Interactive Date Picker
Inspired by Oodi Helsinki, the calendar lets users browse by exact dates — giving them more control over when and what they want to explore.
Improved Visual Hierarchy
A cleaner layout with stronger headings and imagery makes it easier to scan, compare, and discover relevant programs without getting overwhelmed.
Cohesive Experience for Media Content
YouTube and Crowdcast platforms are now built into the layout — making it easier to access live or recorded content directly from the page.
Redefining How Users Register
This redesigned registration page focuses on ease of use, engagement, and a frictionless path to conversion — providing a clear, purposeful, and enjoyable experience that guides users from exploration to action.
Key Design Highlights:
Sticky Call to Action:
The registration button sticks as users scroll, keeping their path forward clear and reducing friction in signing up — a small but purposeful design decision that guides their interaction.
Seamless Modal Interaction:
When users click to register, everything happens within a modal instead of forcing a new tab or interrupting their flow. Inside, they can view available seats, dates, and additional details — all without losing their place on the page.
Discovery Loop:
Once users are finished registering or exploring a program, a carousel featuring related programs invites further exploration — adding depth to their experience and increasing retention without overwhelm.
Redesigning TPL’s Program Search for Clarity, Speed, and Confidence
The fully redesigned Search Index addresses challenges like low scannability, cluttered filters, and overwhelming layout. It now supports quicker discovery and helps users make faster decisions without overthinking — making it easier to browse, filter, and act with confidence.
Key Design Highlights:
1. A More Engaging Starting Point:
The new layout invites users to start with an “Everything” feed — a simple, scrollable view of popular topics, featured programs, and updates. This reduces decision fatigue and encourages casual users to explore without needing to make specific choices right away.
2. Smarter Navigation & Filters:
Filters are now grouped visually and organized by intent. By structuring filters around real goals, the new design reduces cognitive load with a more organized category system. Once a main filter is selected (like “Programs”), users see relevant sub-filters — making it easier to explore without feeling overwhelmed.
3. Redesigned Program Cards:
Creating a more visually structured card layout helps with decision making — you're able to scan important information more clearly and quickly. The cards also include tags, giving users the ability to find related programs and create a natural discovery loop.
4. Better Control Over Filters:
The new filtering system feels more modern and intuitive — especially for first-time users. Tags now appear clearly below the search bar as removable pills, making it easy to see what’s selected and change your mind without friction. You can also reset all filters with one click. It's a small shift, but it gives users more control and makes exploring feel smoother and less frustrating.
Initial Scope & Ambition
When I began this project, I wanted to redesign the entirety of the TPL website, borrowing, programs, locations, and FAQs.
This felt ambitious, but it was encouraged by my initial competitive analysis and a strong understanding that there was a huge opportunity for improvement across the platform, and I knew that a well-designed UI could make a big impact on the overall experience.
Turning Point & Lessons
But as I dove further into the project, I stumbled upon something that opened up a new way of thinking: TPL’s annual report. Inside, I noticed a key opportunity from a business perspective — a way for design to directly contribute to reducing churn and strengthening community engagement.
This turning point forced me to rethink my approach. I decided it was more important to be efficient — to create a design system and refine my research methods — and from there, I was able to focus on delivering a purposeful minimum viable product (MVP).
This process not only resulted in a more realistic and impactful solution, but also equipped me with a way of thinking and working that I can carry forward into future projects.