Photograph from behind a crowd of students with graduation attire
"Bringing it All Together for Education."

College Preparatory School

With a deep history dating back to the mid-1800s, the school’s myriad audiences includes students, parents, teachers, staff, alumni and prospective families. Over time, it’s half-dozen digital properties – designed to make education easier – had become a web of disconnected apps, data, and third-party plugins. Not only was it an arduous experience for users, it was increasingly difficult for the school’s small IT team to manage.

M7 was engaged to unify, centralize, and create a new experience for all the school’s audiences. This took form in two distinct products. First, a redesign of the public-facing website to engage prospective families. Simultaneously, we developed an internal ‘hub’ that combined all third-party applications into a single portal. For maximum efficiency, both sites are managed by a single instance of Drupal.

Image
lightbulb icon
Insight & Planning
Digital Planning
Industry Research
Persona & Scenarios
Problem Definition
Usability Research
Stakeholder Interviews
Image
icons with arrows going top left to bottom right
UX/UI
Technical Design
Responsive Design
Information Architecture
Interface Design
Experience Design
Content Design
Image
Icon of computer window
Digital Products
Websites
Custom Applications
Productivity Tools, Business
Solutions, CMS, CRM
Campaigns
Image
Icon of line graph
Measurement
Product Performance
Measurement and Analysis
User Testing and Usability
Search Engine Optimizations

Project Details

Media
Laptop, tablet, and phone showing example screenshots of the custom application built

Extensive Discovery

We started with a competitive analysis of roughly 100 high-school and university websites to understand best practices in the market. Then we interviewed dozens of stakeholders including teachers, staff, and students to create user-empathy and begin solution and feature ideation.

Media
Example screenshots in a collage of variable parts of the application
Media
Logos for "Canvas", "Office 365", and "Student Information System" with lines going to the right to a Drupal logo, with lines continuing to the right with icons for "public website" and "hub/portal"

One Platform

We developed a two product, one platform approach using Drupal CMS for its flexibility and extensibility. The system delivers targeted content to prospective families via the public website, while internal audiences interact with the portal. All content is managed within a single system. Third-party systems use API integration for a seamless experience.

Brand & Identity

A goal from the outset was to create a digital presence that mirrors the school’s rich on-campus environment. We elevated the school’s brand guidelines for the digital environment, leveraged authentic photography, and designed countless visuals to express the school’s identity as a dynamic 21st-century educational institution.

Media
Technical drawing of two logo icons as well as three shades of blue color swatches
Media
flowchart showing "Prospective Student" going to oval containing words with arrows progressing through each one "Evaluation", "Application", "Acceptance", "Registration", "On-boarding", and finally "Continued Development" with that flowing on to "Active Student"

Content Strategy

To attract prospective families, we developed a content strategy aligned with the school’s overall communication goals. Messaging, supporting content, and overall flow was designed with a primary purpose: to attract the new generations of worldly, conscientious, and change-making young people.

Wayfinding

To keep with the flexibility of a services model, we implemented Elasticsearch, a distributed, RESTful search engine. Combined with Drupal’s Search API enables extensible control over what gets indexed, how users can search the content, and how the system displays results. Also, information and site structures were designed with multiple access paths in mind.

  • Direct Path – Via other online and offline channels such as an integrated mass communication system
  • Guided Narrative – Through the use of storytelling
  • Self-guided – Non-prescriptive ways to find content
  • Related Material – Context and taxonomy system allowing surfacing of similar content
Media
Two circles: upper left containing elasticsearch logo and the bottom right showing a flow of information on cards
Media
A blue circle with a hierarchy structure displayed inside of it

Taxonomy

We developed a bespoke site taxonomy to assist in the classification and discoverability of content. By creating a deep understanding of the organization and the relationship between different types of content a useful vocabulary / term hierarchy was established.

Unique Experience: Prospects vs Existing Users

Understanding each audience’s needs was critical. Our team developed mind maps, personas, and user stories for each group of users. We defined attributes including user objectives, motive, fears, and trigger points in order to establish relevant features and calls to action.

Media
Two circles: bottom left contains image of mother and son working on a computer and the top right shows a group of students throwing their graduation caps in the air
Media
A blue pill shape design element with an image of a student's face, a red notification indicator, and the text "Welcome, Alison Y." on the right

Personalized Experience

With so many audiences, it was critical to develop a system that delivers targeted content and a personalized experience. No matter the user role, user interest or group, content is always relevant to their interests an involvement with the school.

A System for Growth

Since digital products continually evolve, we designed the platform to easily accommodate future growth initiatives. We built the infrastructure with a mechanism to measure effectiveness and support iterative changes.

Media
The Drupal logo with four elements beneath it: "public", "hub", "future", and "future"
Media
Two rectangles indicating "3rd-Party Applications" and "Drupal CMS" with arrows pointing to each other

API & Drupal Decoupled

Drupal was the right fit for this project because of its "API-first framework". Some key advantages include:

  • Content-as-a-service, decoupled CMS experience for delivering content to remote systems
  • A hub for content consumption from multiple third-party platforms.
  • Integration with: Student Information System, Learning Management System, Office 365, Single Sign-On System.
  • Bulk and real-time data synchronization.

Social Communication

Keeping all school communication internal important, since relying on traditional social media can be complicated. We implemented an easy-to-manage, robust social communication system for sharing, communicating, and connecting.

Media
Two icons of speech bubbles, with the words "Administration", "Students", "Parents", "Alumni" on the left and "Alumni", "Parents", "Students", "Administration" on the right
Media
The Drupal raindrop logo above the word "Drupal"

Custom Drupal Module Development

We’re deeply experienced in building custom modules that any ‘Drupler’ can maintain. Modules created for this project include support for custom Entities, 3rd-party Software Integration, Class Scheduling, Membership, Personalization, Extensions to Webforms, an Announcement Platform, and a Custom Dashboard.

Extensive Custom Features

Media Management
Checklists / Task Tracking
Event Registration
Campaign Management
Multimedia: Slideshows, Photo Library, Videos
Groups
Calendar
Events
Ecommerce (Drupal Commerce)
Integration with Fundraising Platform
Sign-Up Forms
Surveys
Like / Bookmark
Messaging
Integration with Volunteer Platform