EducationPlannerBC

User Experience Research User Interface Design Web Design Art Direction

Deciding to pursue further education is arguably the most important decision of a young person's life. This decision itself invites myriad other decisions, and frankly barriers, that need to be met. Financial considerations, location logistics, and a whole new lexicon to decipher - Choosing a program soon seems to feel like the easy part.

EducationPlannerBC (EPBC) approached us with a very clear mandate of making this daunting path more approachable and inspiring for their user base of prospective students of all ages and backgrounds. The site is the primary application portal for the majority of further education institutions across British Columbia. It is used as a discovery, research, and application tool; however, critical information is often buried deep in a complex hierarchy of pages, adding additional overwhelm to an already intimidating task.

Project Type

UX Research, Web
Design

Project Mandate

UX Research, Web
Design

Industry

Government/
Education

The UX Report Card

The user experience research for this project was a mammoth task. We started from the ground up, using research methods to first and foremost discover what the assumed purposes of the EPBC platform were, and if that diverged from the organization's own assumptions of their mission.

Mockup of home page featuring mega menu

Whilst EPBC is used to apply for university programs at most BC institutions, and therefore does not experience much in the way of competition per sé, we looked closely at pseudo-competitor offerings, both in and out of province, that offer some or all of the same sorts of resources and information a student may be looking for. We also looked at a handful of institution's sites, to understand how they present and structure their program information, to help us begin to form our ideas on how EPBC can better cater for content.

Our most valuable data set came from first conducting many interviews with students, teachers, careers advisors and parents, of varying demographics. We gained deep insights into major pain points, not only with the current platform but the process of pursuing higher education itself.

From these insights, we were then able to map out our findings and recognise congruence among such things as;

  • Wished-for features
  • Methods of research
  • Preferred form of information intake
  • Level of understanding
  • Device preference
  • General platform expectations

And as we began to understand the user motivations, emotional drivers and communication preferences throughout the post-secondary application journey, this helped us form a strong foundation of ideas on which to base our recommendations on.

We also conducted many stakeholder interviews with EPBC staff in various departments - from communications to business development to site maintenance - so we could hear their thoughts on the platform, any user feedback they could share, operational gripes, and opportunities for improvement that would impact their day-to-day involvement, as well as the site as a whole.

Following our research outcomes, we set about bettering the structure of the information architecture around the three macro user journeys of 'Get Prepared', 'Start Searching' and 'Apply Now'. We sought to order the pages in these sections into a hierarchy that was more intuitive and pleasant to navigate, giving opportunities for discovery and helping the user take a step by step approach to understanding everything they need to know about the higher education process prior to applying.

Information architecture diagram and sitemap layout

Additionally, we suggested features such as a favourites list for the user to save programs, and a comparison tool within this list for users to compare such things as cost, academic prerequisites, and start dates. A powerful search tool with filters that focusses on helping students discover programs that align with their interests was also put forward, with the ability to pick up from where the user left off on a previous search.

A page mockup displaying information about specific post secondary school programs
A slider comparison table providing information on specific school programs
mobile design mockup
mobile design mockup
mobile design mockup
mobile design mockup
Example link component
Example link component

Some low effort but high value additions included a glossary of higher education terms, a pre-application checklist, program specific career options, a content-relevant top tips feature, and related programs and suggestions on single program pages. For those that wished to learn at a different time, we implemented a way to send content and documents to an email address (or links to a phone number).

Mockup of a student budget tips call-to-action component

Design and art direction

The user experience research for this project was a mammoth task. We started from the ground up, using research methods to first and foremost discover what the assumed purposes of the EPBC platform were, and if that diverged from the organization's own assumptions of their mission.

Mockup of school program search page

A dotted path and hill motif was used to represent the prospective student's journey to further education, whilst being guided by the resources and information from EPBC. Variations of these graphics are used as page headers, in combination with fresh and vibrant photography, to provide visual interest throughout, as are a custom suite of icons.

Apply / Check

Domestic

International

My List / Favourite

Book

Generic Form

Transcript

Open Book

Credit Card

Personal Finances

Education Cost

Accomodation

Targetted Advice

Make Notes

Mockup of map component
Mockup of event widget

We improved the UI, adhering to all current best-practises, with a clean set of interface elements that provide clarity in their purpose and a much better sense of the route the user has taken. The addition of micro animations for page population and creative content interaction, inject a much needed dose of delight for the user.

Explore More Projects

Private Organizations

Moving2Canada

A thorough UX research project that ultimately turned into Canada's top resource for immigration support, through a complex WordPress and React build

See project

Private Organizations

Education Planner BC

Detailed User Experience Research combined with a cohesive Design System to support students across British Columbia in their post secondary selection journey

See project

Colleges & Universities

SFU Beedie

A comprehensive Craft CMS build tying together various internal systems and student driven websites

See project