Custom Squarespace website design for voice-over school

On The Mic Training

Clarity.

On The Mic Training is a government-accredited voice-over school offering professional training through its Vancouver and Toronto studios, as well as online.

As an established school, OTM had accumulated an extensive website covering its comprehensive program, individual classes, instructors, admissions, resources, and years of content. Its branding, however, had never been developed into a complete visual system, creating inconsistencies across the experience.

The website also needed to better reflect OTM's standing as North America's only government-accredited voice-over school — balancing the creative energy of the industry with the credibility expected of a professional training institution.

The challenge was to bring structure to both the brand and the website without losing what already made OTM recognizable.

The Approach

Rather than replacing the existing identity, I built upon it — establishing a visual language through typography, colour, image treatments, graphic elements, and recurring design elements.

From there, the project extended into the website itself: restructuring key content, improving user pathways, developing custom components, and creating a more intentional experience across a large and complex Squarespace site.

Content & Structure

With several ways to train at OTM, the website needed to make the distinction between the comprehensive program and individual classes immediately understandable.

The content architecture was refined around how prospective students actually explore the school — from discovering their training options to understanding schedules and formats, comparing programs, learning about instructors, and moving toward admissions.

Particular attention was given to:

• Distinguishing the comprehensive program from individual classes

• Creating direct pathways to admissions and key information

• Making dense program pages easier to scan

• Comparing Full-Time and Part-Time study options

• Establishing consistent terminology across the site

• Organizing supporting information without overwhelming primary content

Visual Identity

OTM already had recognizable brand elements, but lacked the system needed to use them consistently.

I expanded the identity by defining how typography, colour, imagery, graphic accents, and layouts work together across different types of content.

Bold typography, angled imagery, gradients, and graphic details retain the personality of the voice-over industry, while a more controlled use of these elements gives the school a stronger and more professional presence.

The system also provides a framework OTM can apply as new programs, classes, and content are introduced.

Website Design & Development

The existing Squarespace website was extensively customized to support the complexity of OTM's offering.

For the comprehensive accredited program, I developed a dedicated mega menu that brings curriculum, schedules, tuition, admissions, and related information together in one place — allowing prospective students to access detailed program information without repeatedly navigating through separate pages.

Custom responsive tables were created to simplify comparisons between Full-Time and Part-Time options and present detailed policies in a more usable format.

Reusable layouts and custom components were developed for classes, instructors, services, and testimonials, alongside tailored audio presentation for a school where listening is naturally part of the experience.

Custom development introduced carousels, scroll-based image treatments, sticky calls-to-action, anchor navigation, gradients, angled imagery, and subtle transitions throughout the site.

To make these customizations sustainable, the code was organized and documented, accompanied by a detailed customization guide and video walkthrough for OTM's team.

Features & Highlights

Expanded Visual Identity
Existing brand elements developed into a defined system for typography, colour, imagery, graphic treatments, and layouts.

Dedicated Program Mega Menu
Custom navigation for the comprehensive program, bringing curriculum, schedules, tuition, admissions, and supporting information into one accessible place.

Program Comparison System
Responsive custom tables designed to make Full-Time and Part-Time study options and detailed information easier to compare.

Reusable Content Components
Custom systems for classes, instructors, services, and testimonials designed for ongoing use by OTM's team.

Custom Squarespace Development
CSS and JavaScript used to extend Squarespace with tailored navigation, layouts, interactions, carousels, pop-ups, audio presentation, and visual treatments.

Internal Training & Documentation
A detailed customization guide, documented code, and comprehensive video walkthrough created to support independent website management.

The Result

On The Mic Training now has a digital presence that better reflects the professionalism of its training and the scale of its offering. Prospective students can distinguish between training pathways, explore the comprehensive program in depth, compare study options, discover instructors and classes, and move toward admissions with greater confidence.

Behind the scenes, reusable components and documented customizations give the OTM team a practical system they can continue to manage and expand internally.