Miss Hall's School

  • Website
  • Branding
Introduction

Miss Hall’s School came to us looking for a complete digital makeover.

The team faced three crucial problems they needed to solve: their current website did not clearly represent the values and identity of the school, their new branding needed to be adapted for web use, and their existing tech stack was a costly hindrance and source of frustration. Additionally, the school wanted to avoid similar problems in the future by keeping the website fresh but cohesive through frequent updates made by those who know Miss Hall’s most intimately; they did not want to be held back waiting on developers to make these updates.

We began by working with the school to identify target audiences, key objectives, and crucial pain points in the user experience of the website and the tech stack supporting it. With this information, we crafted a new hierarchy of information and website layout that would deliver priority information in an immersive, storytelling-style experience.

200+

Students attend the school annually

200%

Reduction in time to first render

70%

Reduction in site staff resources needed

Background

The school had recently refreshed their branding but wished to evolve it further by using it in unique and interesting ways in the new website design.

Over the course of several iterations, we adapted their new print-centric branding into a digital theme that is fun but professional, welcoming, and informative.

Behind the scenes, we put together a tech stack that supported the website and it’s features, including an email marketing and automation system, donation processing, a direct line of communication with website visitors, website analytics, and an event management platform. The crux of all these systems was a content management system that allows the school to organize and custom all elements that appear on the website to create custom templates and pages.

The website launched in the fall of 2020 and received a highly positive reception from faculty, staff, students, alumni, and student parents alike.

Font

GT America & GT Super Text

Glyph

Sample Glyph

Characters

Sample Character Set
  • #20588d
  • #74afe9
  • #deeefc
  • #e65722
  • #f2ab90
  • #fbe6de
  • #792d68
  • #c3a2bd
  • #f5f0f6
  • #0b7b63
  • #8fc2b7
  • #e7f2ef
  • #ffdd34
  • #f3ebcf
  • #fdf7e3
Execution

The school wanted to modernize and improve the performance of their website while also providing a more comprehensive and cohesive mobile experience.

To improve page load times and overall site performance, our team decided to utilize static page generation alongside other techniques like lazy loading, image pre-optimization, and link prefetching.

Prior to bringing in our team, Miss Hall’s had developed new brand guidelines for print. We worked with them to translate and extend these guidelines to a digital branding system that would be used across the website and online marketing materials.

From this new digital branding system we built a library of responsive components for different use cases like galleries, video showcases, quotes, links to internal pages, recent stories, recent events, programs and courses, values, short and long form text. This allowed us to build out the site using this library of reusable components.

Additionally, we wanted to ensure that the site could easily be searched and that old pages were redirected appropriately. Search was integrated deeply within the website, using Algolia to provide a comprehensive, high-quality search experience. We also worked with the school to identify key pages to redirect from the existing site, ensuring that the transition from the old site to new was seamless.

  • Implemented a new CMS optimized for static page generation
  • Built a highly optimized and statically generated website
  • Implemented new, more powerful search using Algolia
  • Implemented a build process that deploys the website to a global CDN within moments of publishing

Mobile Site

The new site was built with mobile in squarely mind, as parents and prospective students are often on a variety of devices when evaluating, researching, and reading about new schools.

Website

With the website, we enabled the Miss Hall’s team to create unique pages without developer intervention by giving them a series of components and modules via a custom implementation in Sanity CMS.

Additionally, we created moments throughout the experience for users to interact with the content. This allowed us to build an interactive storytelling experience that was not just passive and consumption based; through short videos from students, quote and photo carousels, and interest pickers for smart course suggestions, we allow the visitors to learn and understand Miss Hall’s through multiple lenses.

  • Developed a digital brand design system extended from their brand guidelines for print materials
  • Used this design system to design a library of responsive sections for different use cases like galleries, video showcases, quotes, links to internal pages, recent stories, recent events, programs and courses, values, short and long form text
  • Enabled them to create unique pages by selecting sections and ordering them in different ways for each page via a custom implementation into Sanity CMS
  • Created moments throughout the experience for users to interact with the content, short videos from students, quote and photo carousels, interest pickers for smart course suggestions
  • Created a searchable staff directory to allow visitors to get in contact with the right faculty.
  • Designed a flexible article component to allow stories with and without featured images as well as stories with featured student quotes