McGill Alert / Alerte de McGill

Updated: Thu, 07/18/2024 - 18:12

Gradual reopening continues on downtown campus. See Campus Public Safety website for details.

La réouverture graduelle du campus du centre-ville se poursuit. Complément d'information : Direction de la protection et de la prévention.

Revamping the Admissions System: A McGill DS Case Study

See how McGill DS helped deliver a great brand experience on a tight timeline

We want our users to recognize and love us wherever we (and they) go. This is extra important when our users are prospective students. Prospective students don't know us very well, and they meet us during a stressful moment in their lives. A new admissions system will allow us to simplify and consolidate our connections with prospective students. 

The new admissions system is a licensed software product (like Workday or Outlook). Through this application, a prospective student might:

  • Sign up for an event
  • Join a mailing list 
  • Receive email notifications about events, programs, or deadlines

As the Admissions System Implementation project advances, prospective and new students will also use the new system to:

  • Create and submit an application for admission
  • Follow up on the status of their application
  • Submit supporting documents
  • Accept, refuse, or defer an offer of admission
  • Complete their conditions of admission

Our mandate on this project? Charm users with an experience that's clear, welcoming, and thoroughly McGill.

The challenge

Achieving a consistent and delightful experience is hard when you're starting from scratch. It's even harder when you're working on a licensed platform: the structure of the software is unique, and we don't have access to the full range of customization options we normally use on a website. 

In this project, we also needed to coordinate updates across two parts of the admissions system that are programmatically separate:

  1. The application for admission
  2. The Applicant Portal

But to the user, these separate pieces needed to form a seamless experience.

The application for admission had already been customized by the original software vendor. The vendor couldn't write custom code, so they used existing CSS from the McGill.ca homepage. Here's what that looked like:

Screen capture of original application for admission

The second piece was the applicant status portal. Applicants see this after submitting the application form, so it must match the form. We started with an un-customized portal, which looked something like this:

Screen capture of original applicant portal

Our challenge was to align and update both, while respecting certain limits to our time and resources:

  1. The application form's design would need to be updated by a team of two McGill developers who were unfamiliar with our new admissions system. They'd have less than two weeks to make the updates.
  2. The applicant status portal would be built by a vendor with a more generous, but still strict timeline. To respect the project schedule, we needed to deliver mockups in less than a month. The vendor would also need very precise instructions to make sure his work matched the application form.

The solution

For the application form, we applied McGill DS styles directly and avoided writing custom code. This was the fastest solution, and also gave us the benefit of full automation. Any time we update the design of something (like a button, a heading, or a link), the appearance of the form will update automatically. That way, the McGill developers won't need to intervene in (and re-learn) the backend workings of the admissions system any time there's a change.

The result? A more polished, brand-aligned application form that respects our needs and available resources:

Screenshot of revised application form

For the applicant portal, our priorities were (relative) speed and consistency with the application form. McGill DS accelerated the mockup creation process with typography, header, footer, accordion, button, and other standard styles. These dropped into the design file in just a few clicks, saving many hours of design effort:

Selecting a design component from a Sketch library

Our user research showed us that we could limit custom design work to a handful of key items, like the application progress indicator (shown below). Since the standard components came together quickly, we had time to review and finesse those custom pieces. The result was a strong, user-focused design that maintained alignment with the application form:

Screen capture of new applicant portal

The admissions system's constraints didn't allow us to automate the applicant portal CSS (as we did with the application form). But McGill DS provided a useful reference to ensure pixel-to-pixel consistency between the two pieces. The end result was a consistent user experience - despite the fact that it spanned two separate products coded by separate teams.

The takeaways

McGill DS allowed us to get the most out of our in-house team and vendor investment. It helped us deliver a strong, consistent brand experience across the entire application journey. McGill DS allowed us to:

  • Reduce development time for the application form from months to days (when compared to coding the form's appearance from scratch)
  • Deliver a more customized applicant portal than originally planned (while respecting previously-established cost and time estimates)
  • Benefit from automated updates, ensuring that the application form remains current without requiring additional developer time
  • Communicate brand and code standards clearly and effectively to our vendor

If you've got a custom project in mind, McGill DS could help you, too! Contact the Web Services team to learn more. 

Back to top