Weaving Stories and Programs for Community Impact

This website design project was completed in 6 months in collaboration with the Communications Team and Operations Director at Toronto City Mission (TCM) to enhance the organization’s offerings and community programs with kids and teens.

Organization

Founded in 1879, Toronto City Mission is Toronto’s oldest continuous outreach serving people impacted by poverty. Rooted in Christian faith, it focuses today on long-term transformation through relationship-based programs for children, youth, and families in underserved communities.

The organization continues to provide diverse programs including: Sonshine Day Camp, Kids in Community (KIC), Education Provided in Community (EPIC), Youth Extreme (YX), Teens Leading Communities (TLC), and Role Model Moms (RMM).

Purpose of the Redesign

The website redesign aims to unify stories, testimonies, and program outcomes into a clear, connected narrative while improving site architecture through parent–child page relationships and a tighter content taxonomy.

By enhancing a Squarespace template with JavaScript and redesigning the homepage with dynamic blog and event content, the project strengthens calls to action to improve program visibility and increase enrolment.

Research and Strategy

Content Audit

There was a good amount of information related to volunteering opportunities, communities and programs that people can get involved in. The focus was to understand the organization’s current structure and find opportunities to identify categories and enhance the learning journey for areas of volunteering.

The content audit was focused on how to unite the organization’s impact with stories from staff, volunteers, and guest speakers through key communications collateral such as events and newsletters. Designing well-structured blog categories with meaningful, SEO-rich content was the goal to improve navigation and discoverability.

Non-profit Website Layout Research

A comparative analysis was conducted to evaluate non-profit website layouts and call-to-action strategies, examining how readers navigate for information about volunteering and donating. The study focused on identifying key areas of call-to-action and grid layouts across similar organizations including Yonge Street Mission, Intervarsity Canada, and Daily Bread Food Bank.

View the research proposal presentation on Google

Challenges

Content migration and re-creating old blog content with new URLs for impact stories that match their category

The manual process involved batching each content item with the appropriate impact story category, descriptive title, description, SEO metadata, author, and published date.

Creating a Notion-documented workbench ensured every entry was properly migrated and formatted in the new webpage layout, while re-creating stories included restoring internal links to their corresponding program, community, or blog pages.

Working within the constraints of Squarespace templates

While templating navigation parent pages, we encountered a limitation in Squarespace that prevented users from directly accessing a parent page, instead automatically redirecting them to its first child page in the navigation.

The solution was to use JavaScript event handlers to override this limitation, ensuring direct access to each main section.

Design Strategy and Development

The homepage, communities, programs and impact pages were redesigned with concise descriptions, calls-to-action and internal linking to boost search engine rankings, content engagement and website structure.

Below is a summary of changes of the main sections on the website. Screenshots are ordered by the old website layout featured on the left to the new designs on the right.

Homepage

Redesigned the homepage with a full-width layout, integrating clear calls to action for programs, communities, volunteering, stories, events, and donations.

Program and Community Landing Pages

The layout was redesigned for a wider content fit, featuring internal links to related communities with program and volunteer information, while giving readers the opportunity to explore additional stories connected to each program.

Collection of Stories

Linear scrolling blogs were redesigned into a branded grid of stories, structured with meaningful categories highlighting staff and volunteer perspectives, key community impact stories, and organizational announcements.

Reflection

Applying JavaScript in SquareSpace templates

Squarespace's default navigation behavior redirects parent links to their first child page. To meet the organization's requirement for dedicated landing pages (About, Communities, Programs, Impact, Donate), I implemented JavaScript event handlers to override this limitation, ensuring direct access to each main section.

An example of an event handler for the programs page is below:

• once the page is fully loaded, each new child page is targeted
• an if function is used to check if the link exists and prevents errors if the link isn't found
• a click event handler is attached to the link, and runs the code to stop navigating to the child page
• the user is redirected to the main landing page ("/programs")

document.addEventListener("DOMContentLoaded", function () {
  var link = document.querySelector(
    'a.header-nav-folder-title[href="/programs-toronto-city-mission"]',
  )

  if (link) {
    link.addEventListener("click", function (event) {
      event.preventDefault()
      window.location.href = "/programs"
    })
  }
})