Kristy Stephens

← Case Studies

Web Design & Information Architecture

Rebuilt a Nonprofit Theatre’s Website for Ownership, UX Improvements, and a 93% Cost Reduction

UX · Accessibility · Web Design · Marketing

Overview

Children’s Theatre of Annapolis (CTA), a nonprofit community theatre for young performers, had a website built and controlled by an outside agency. CTA could not make changes beyond basic page edits, add features, or get full backups on its own. Families struggled to find information on the site; accessibility was not a focus of the design; and the site was not designed well for mobile.

I rebuilt and redesigned the site and, once the new site is pointed at the current domain, it will be owned entirely by CTA. I restructured navigation and content around what families looked for, created a consistent layout for shows and classes, built in accessibility, and ensured hosting and the domain were in CTA-owned accounts.

View the site here: https://childrenstheatreofannapolis.org/

The Challenge

  • The site was built and controlled by an outside agency — CTA could not make changes beyond basic edits, add features, or get full backups on its own
  • The imagery on the site was outdated as the theatre staff were unable to update it
  • Shows, auditions, and classes were mixed together in one list, with dates in different places and long centered paragraphs
  • Site was not optimized for mobile devices
  • Site visitors complained about not being able to find information
  • The agency-managed average cost was about $6,000 a year

CTA needed a website that got families to tickets, classes, and donations faster, that its own staff and volunteers could keep current, and that cost far less to run.

Approach

My approach centered on the audiences CTA served: families buying tickets, parents looking for classes, donors and sponsors, students and volunteers, and the staff who keep the site current.

01

Redesigned the Homepage

Replaced the static image hero with rotating slides for the current show, auditions, classes, and the capital campaign, each with its own call-to-action button. Added three colored quick link panels (Coming Soon/Now Playing, Classes & Camps, and Get Involved) so every audience could find its path without scrolling.

02

Restructured Navigation Around What Families Look For

Replaced the vaguer “Education” with “Classes & Camps,” moved Contact from the footer into the main menu, and added a site search. Also removed the static images from the top of the secondary pages, making the sub-navigation more visible and easily accessible.

03

Built a Consistent Card System for Shows and Classes

Separated shows from classes so ticket buyers and parents could easily find them. Designed every show and class card with key details and clear call-to-action buttons.

04

Organized Interior Pages with Clear Titles and Tabs

Gave every interior page a clear title and tab menu so visitors saw content immediately. Redesigned the About and Get Involved sections to bring greater attention to CTA’s impact on the community and ways for families, sponsors, and volunteers to support the organization.

05

Embedded Accessibility and Mobile Optimization

Added descriptive alt text for screen readers, readable text over photos, high-contrast buttons, and slideshow controls with previous/next arrows, progress dots, and a pause button. Created one mobile-optimized design that adapted to phones, tablets, and desktops. Added a built-in accessibility checker that flagged issues as pages were edited.

06

Supported Fundraising and Audience Growth

Added homepage sections for CTA by the Numbers, sponsor recognition, and an email sign-up in the footer. Built a dedicated Growing Our Reach campaign page showing progress toward their goal and ways to give.

07

Transferred Ownership and Reduced Costs

Moved the site off agency-managed hosting and ensured the hosting, domain, and backups were in CTA-owned accounts. Set the site up with a visual drag-and-drop editor so staff could easily add new classes, shows and other information themselves rather than having to contact a developer. Reduced annual website costs from $5,586.80 to $411.

Before & After

A side-by-side look at how the redesign changed the experience for families, donors, and volunteers. Select any image to view it larger.

Homepage

Old Children's Theatre of Annapolis homepage with a cast photo, centered headline, and small Buy Tickets button
BeforeThe old homepage had a strong photo, but its only action was one small Buy Tickets button, with white text sitting directly on a busy image.
New Children’s Theatre of Annapolis homepage with a search button, Buy Tickets and Donate in the header, a Frozen show slide with slideshow controls, and three color-coded quick-link panels for Coming Soon, Classes & Camps, and Get Involved
AfterThe new homepage pairs a rotating hero and clear button with three color-coded panels — Coming Soon, Classes & Camps, and Get Involved — visible right away, plus Buy Tickets and Donate in the header.

Shows & Events

Old Current and Upcoming section with four columns of posters, long centered paragraphs, and gray buttons
BeforeShows, auditions, and classes were mixed together in one list. Dates appeared in different places, long centered paragraphs were hard to scan, and gray buttons blended into the page.
New Shows and Events section with two rows of uniform event cards, each showing a date line, title, short description, and yellow ticket button
AfterEvery event card now shows the date, time, and venue in the same spot, followed by the title, a two-line summary, and one clear yellow button.

About Page

Old About page with a large cast photo and "About CTA" title, a tab menu below it, and the start of the mission text
BeforeThe old About page is an example of how the content and sub-navigation were buried beneath a large static image.
New About page with page title, tab menu, mission text, and annual report buttons
AfterThe new About page opens with a clear title and tab menu, then puts the mission, nonprofit details, and annual reports — as easy-to-tap buttons — right under the title.

Show Page

Old What's On Stage page with three show posters for Frozen, Peter Pan and Wendy, and Honk! JR above long centered descriptions, performance dates, special events lists, and gray Buy Tickets buttons
BeforeThe old Shows & Events page stacked posters above long centered descriptions in different styles.
New show page with the Frozen poster beside its description, a performance dates panel, and a Get Your Tickets button
AfterEach show now pairs its poster with the description, a highlighted panel for performance dates and special events, and a clear Get Your Tickets button.

History

Old About page History tab with three production photos above several paragraphs of history text and two captioned photos in a sidebar
BeforeThe old History tab told CTA’s story in three dense paragraphs, with photos set apart from the events they described.
New About page History tab showing the CTA Through the Years timeline, organized into acts, from the 1959 founding through the 2008 theatre opening, with archival photos
AfterThe new History tab turns that story into a timeline organized into acts, pairing each date and milestone with its archival photo.

Growing Our Reach

Old homepage section titled CTA’s New Arts Center with a campaign flyer image, three paragraphs of text, and two gray buttons
BeforeThe campaign lived in a section far down the old homepage with a flyer image, three paragraphs, and two gray buttons, with no sense of progress.
New Growing Our Reach page with the campaign logo, Donate Now and Ways to Give buttons, a Where the campaign stands section showing amount raised, goal, target date and a 35% progress bar, and the start of the campaign story told in acts with archival photos
AfterA dedicated campaign page explains the new arts center, shows progress toward the goal, and gives donors clear ways to give.

Get Involved: Audition

Old Get Involved Audition tab with long paragraphs of audition policy, a photo, an embedded video, and StageWise instructions
BeforeThe old Audition tab opened with long paragraphs of policy, and the current audition dates sat further down the page in a plain bulleted list.
New Get Involved Audition tab with a highlighted Peter Pan and Wendy audition panel listing ages, dates and commitments, plus a Join StageWise section
AfterThe new Audition tab leads with the open audition in a highlighted panel, with ages, dates, and commitments in a scannable table and clear sign-up buttons.

Results

  • Cut annual website costs by about 93%, saving $5,175.80 a year and nearly $26,000 over five years
  • Gave CTA full ownership of its site, domain, hosting, and backups
  • Shortened the homepage by roughly 39%, with every audience’s path visible on the first screen
  • Separated shows from classes so ticket buyers and parents could easily find what they were looking for
  • Added Elementor so staff could easily update the site
  • Delivered one mobile-optimized design for phones, tablets, and desktops

Next case study: Modernized Theatre Production Operations with StageWise