One Website, Many Audiences: How Fringe Theatre Rebuilt fringetheatre.ca Around Its Audiences

Fringe Theatre runs one of Edmonton’s most iconic events: the Fringe Festival. Their small team juggles year-round programming, a huge summer festival, a café, rentals, and more.

The previous fringetheatre.ca was built years ago. Because of its age, it wasn’t component-based, it was hard to grow, and staff were constantly shoehorning new content into old layouts. Audiences struggled to find the right information at the right time, especially during the festival crunch.

Fringe didn’t just want a redesign. They needed a flexible, easy-to-update website that could act as a home base for everything they do: the festival, ticketing, rentals, donors, volunteers, and all the “Fringy” things in between.

Fringe’s website has to serve wildly different people, often with competing priorities:

• Festival-goers trying to find shows, tickets, and schedules.
• Artists looking for application info, guidelines, and support.
• Volunteers needing shifts, training, and updates.
• Donors and sponsors who want clear ways to give and understand impact.
• Rental clients exploring venues and technical specs for events outside the festival.

Those needs change over the course of a year. In August, everyone wants festival shows and tickets. In the off-season, it might be rentals, donations, or other programming.

On top of that:

• The site had grown in a somewhat organic way, so important pages weren’t discoverable from the main nav.
• A third-party ticketing system (RED61) handled show data and purchases off-site, and many users found it confusing.
• Multiple staff and volunteers touched the site, so the CMS needed to be safe and intuitive for many editors, not just one web person.
• The problem wasn’t just design. It was navigation and information architecture.

We started with listening. Fringe and Full Stacks collaborated on audience surveys for artists, patrons, volunteers, and rental clients.

While we mainly heard from patrons and volunteers, we still gleaned some valuable insights about all audiences.

• A clearer sense of what each audience needed from the site.
• Insights into pain points around information, sign-ups, and ticketing.
• Clarity about how often those audiences used the site and for what.

In parallel, Fringe compiled a list of all the pages they had (and needed) across the site. From there, we developed a suggested sitemap, working closely with the executive director and team to decide what belongs in the top navigation, what should live in subsections, and what can be merged, retired, and simplified.

The point was to give Fringe a workable, flexible structure that would evolve with them, rather than a “perfect”, permanent information architecture (IA).”

From research and IA discussions, it became clear: the new site needed more than a basic dropdown.

We designed a navigation system in layers:

1. Mega menu for orientation
   A structured mega menu helps visitors see “the big picture”:
   • Festival info, year-round programming, rentals, donate, about.
   • Logical groupings under each, rather than a long, chaotic list.
   • Room for a primary, contextual call-to-action highlight for each section (e.g., “Buy Festival Tickets,” “Donate Now,” “See What’s On”).
2. Sidebar navigation for deep sections
   Some sections are deep: policies, artist resources, opportunities, etc. We added a collapsible sidebar menu for those. When you land on a section, the sidebar starts to expand, giving you a clear sense of what’s within that category. As you scroll, it collapses, so it doesn’t dominate the layout, and users can open/close it at will.

   This keeps in-depth sections navigable without cluttering the global nav.

3. On-page wayfinding blocks
   Within pages, we designed content blocks (cards, CTA strips, stacked links) that Fringe can use to point people to related content, promote key calls to action (e.g., “Volunteer,” “Book a Space,” “Apply as an Artist”), and make long pages scannable for visitors who just want “that one thing.”

The combination of mega menu, sidebar menu, and in-page blocks turns the site into a map, instead of a maze.

Fringe has a vibrant visual brand, but the reality is:

• Their photo library is varied in quality and aspect ratio.
• Many show photos belong to artists with their own rights and styles.
• They can’t rely on consistent, high-quality imagery for every page.

So the design had to work beautifully even with minimal images; use typography, layout, and colour as the main drivers of hierarchy, and treat photos as enhancements, not requirements.

A few key choices:

• A homepage banner slider (one of the rare times we agreed a slider made sense!), with:
  • Strict timing and motion controls.
  • Play/pause and slide selection controls for accessibility.
  • Room to feature multiple big things (festival, café, rentals, special events).
• Calmer colour palette in the UI:
  • Fringe’s palette is effectively a rainbow, but we used it strategically.
  • Colour is used to highlight links, icons, and key sections, not to overwhelm.
  • Footer logos and funder blocks were tamed so it doesn’t become a “logo garden.”
• Layouts that stack cleanly on mobile and tablet, with special attention to iPad use (a common device around the festival timeline).

This made the site feel distinctly “Fringe” without relying on perfect photography.

Originally, we planned to use our own custom field-based framework. But as WordPress evolved and the client became more familiar with Gutenberg, Fringe asked:

“Can we have it built with Gutenberg instead?”

We said yes, and used this project as the catalyst to rebuild our internal framework around Gutenberg blocks.

Together we designed:

• A Flex Page template:
  • Used for most of the site.
  • Includes all the blocks Fringe can mix and match: text, images, staff grids, FAQs, callouts, etc.
  • Recommended for pages like Our Team, About, and other informational content.
• Dedicated templates for:
  • Blog—including filter controls for exploring stories, news, and updates.
  • Blog Post—focusing on readable typography and clear CTAs.
  • Search Results—including examples of how off-site show results (from RED61) will appear.

This block-based approach means that Fringe staff and volunteers can build new pages with confidence, and don’t have to call Full Stacks every time they need a new layout.

It also means the site stays consistent, even with many editors, because the design system is encoded into the blocks.

Ticketing is handled by RED61, a third-party system that Fringe has a long-term partnership with. Many users find being shot off to an external ticketing platform confusing or jarring.

To make that connection more natural, we:

• Used the RED61 API to pull show information into Fringe’s own site search.
• Let visitors search for shows directly on fringetheatre.ca, then click through to RED61 to complete the purchase.
• Designed search results that clearly indicate:
  • Which results are internal content (blogs, information pages).
  • Which results are shows, with clear “Buy tickets” or “More info” links.

We also designed filters so that during festival time, visitors can limit search to shows only, making it easier to get to what they want quickly.

This doesn’t remove RED61, but it wraps it in a better, more Fringe-aligned experience.

The new fringetheatre.ca was built to help people get to the right information faster, especially during the festival rush. Early performance data shows stronger engagement with festival content, increased use of on-site show search, and improvements in conversion performance.

What improved for audiences

More people used the on-site show search:

• +38% increase in the share of users who used the website’s show search
• This supports the goal of keeping visitors oriented on fringetheatre.ca, even when ticket purchases still happen in RED61

Festival pages held attention longer:

• +15% increase in average time spent on festival-specific pages over the past year

This suggests visitors are finding what they need and spending more time with key festival content

More conversions, with better efficiency:

• +20% increase in total conversions
• +6% increase in conversion rate (conversion efficiency improved)

This indicates the site is doing a better job guiding users toward key actions, even across multiple audience types

Launch Impact

Engagement rose after the new site launched:

• +71% increase in engagement rate compared to the previous year’s launch period

Average time on page increased:

• +13 seconds increase in average time spent on page

Every project has constraints; this one was no exception:

• Third-party ticketing (RED61):
  • Could not be swapped.
  • UX was limited by what their system could do.
  • We mitigated this with better on-site search and show listings, but the checkout experience is still external.
• Budget and capacity:
  • Fringe is a non-profit still recovering from COVID impacts.
  • Scope had to be tightly managed; we focused on the site that delivers the most value, not a dozen side projects.
• Many editors:
  • The CMS needed to be safe for multiple staff and volunteers with different technical comfort levels.
• Constantly changing priorities:
  • Fringe is a very dynamic organization. They do not sit still and their website needed to be as flexible as possible to accommodate new pages, changes in navigation, etc. This couldn’t be a site that is crafted to an ideal state and could be maintained with little changes over time.

We handled these by designing around reality, not a hypothetical best case.

From Full Stacks’s perspective, this project reinforced a few things:

• Not every site relies on SEO!
  While we still baked in the SEO fundamentals we always do, the Fringe site is so specific that it doesn’t need to rely on search. Getting traffic to the site isn’t an issue (and often results in the site needing larger bandwidth in August while the festival is on!) Instead, our focus needed to be on clear wayfinding and simple UX for the users that are already on site.
• Gutenberg can be a powerful foundation
  Rebuilding our block framework for Fringe set us up for future Gutenberg projects and gave Fringe a much better editorial experience.
• Working with external systems is part of the job
  Instead of complaining about RED61, we integrated it and improved what was in our control.
• Process and collaboration matter
  The project moved smoothly because Fringe:
  • Took surveys and page inventories seriously.
  • Gave clear feedback on wireframes and designs.
  • Was flexible, collaborative and kind throughout!
  • Owned content creation and entry so that we could focus on strategy, design and development.

It was the kind of partnership where both teams made each other’s work better!