top of page

Online Student Portal

Empowering applicants easily navigate and fill the admission forms to submit their application with ease.

The Online Student Portal is a web platform for applicants to submit undergraduate admissions application. The admission decisions are made based solely on the information submitted through it. Being the only opportunity for the applicants to impress the admissions officers, it is crucial to complete the application accurately and to the best of their ability.

Client

Faculty of Applied Science & Engg., University of Toronto

Role

UX/UI Designer

Team

SME - Assistant Registrar, Admission

Development Manager

Duration

6 weeks

Problem

How might we help candidates fill the admission forms accurately and confidently?

The complex and cluttered user interface of the current Online Student Portal was resulting in applications submitted with inaccurate and/or missing information. The Admissions Office received several phone and chat queries each day related to admission forms. The admission officers spent a significant amount of time correcting the forms and following up with candidates.

Goal

Accuracy rate

Applications submitted with correct & complete information

Result

30%

Increase in the accuracy rate

Design Process

Overview of the project phases

Discover

Understanding the domain - current admission lifecycle 

To truly understand the admissions process and how to improve it I started with a deep dive into the available documentation. From there, I took it upon myself to explore the portal independently and set up meetings with experienced admission officers to gain even more insight. To get a handle on the project priorities I conducted interviews with stakeholders to better understand their goals and expectations.

All of this research helped me to identify the user flows and pain points that the admissions office was currently experiencing. Armed with that knowledge I was ready jump into the next steps.

03

Documentation reviewed

02

Walk-through sessions

02

Stakeholder interviews

Discover

Web analytics data

>90%

Users view on desktop

39%

Users are not native English speakers

53%

Users are from outside of Canada

Discover

Learnings from heuristic evaluation

1. Lack of visibility of application status and unclear next steps

With information scattered in several places, the old portal made it difficult to determine application status and pending items at a glance. It gave no guidance or indication of the correct order of steps to complete the application.

2. Critical information lost in the noise and out of context instructions

Large block of unformatted instructions make it impossible to scan. Critical information necessary to accurately fill the application were not highlighted. Moreover, some instructions were out of context.

3. Complicated and error prone interaction patterns

Each screen had many clickable elements and no clear visual cues to indicate the correct next step. Some application sections had to be filled in a specific way, but no instructions or guidance was available to help applicants take the right steps. 

4. Lack of visual alignment and consistency in UI elements

There was no apparent balance or alignment in the UI elements. Page layouts lacked both structure and a coherent visual language.

5. Web accessibility problems 

Online Student Portal failed to comply with several WCAG compliances, especially colour contrast.

6. High reading level of content

The recommended reading level as per the industry standard is level 6 to 8, whereas the text content of the Online Student Portal was around grade 11. This was especially concerning since 39% of users are non-native English speakers. 

High reading level.png
Define

Defining the design strategy and plan

Based on the project timeline, I suggested a short-term redesign plan that I could achieve and proposed long-term design strategy for the team to follow for taking the user experience to the next level.

Short-term plan

User Interface

  • Focus on desktop

  • Bring visual hierarchy, alignment and consistency

  • WCAG compliance - font, colour and contrast

Interaction Patterns

  • Eliminate complex and confusing interactions

  • Reduce probability of making mistakes

  • Provide guidance for possible next action

Information

  • Application status clarity

  • Transparency in use of application data

Long-term plan

End-to-end Experience

  • Guided step-by-step application completion process

  • Integrated email communication

Modularization

  • Separating applicant account information, dashboard, admission application workflow, and additional information/resources

Content Strategy

  • Content audit

  • Vocabulary development

  • Reading level suitable for international non-english speaking audience

Design, Evaluate and Handover

User Interface - bringing consistency and clarity

1. Defining grid system and page layouts

As the first step to bring consistency in the UI, I introduced the concept of a grid-system to the team and defined the standard layouts to be used to ensure clean interface and proper alignment of elements.

Creating a design system

To address lack of visual hierarchy of content and inconsistency in UI elements, I created a design system. The new font styles and colours ensure WCAG compliance.

Design, Evaluate and Handover

Interaction patterns - reducing errors & providing guidance

1. Logic based states of UI components

I introduced multiple states for UI components based on business logic to indicate what data has been submitted and what actions are possibles.

2. Explicit actions for accountability

All sections of the admission application must be submitted even if there is no relevant data to provide. I brought in explicit actions to ensure that applicants are aware when they are submitting any sections without data.

Design, Evaluate and Handover

Information - providing clarity and tranparency

1. Clearly visible application status and pending items

I introduced a dedicated application status block on the dashboard along with summary of the various application sections and pending documents.

2. Bringing transparency in admission decision process

The data submitted in the application is used for making two decisions - admission and scholarship. Whereas some data does not affect the decisions at all. But no advice regarding this was given to applicants.

 

By bringing transparency in this regards supports applicants to better fill the application. 

Reflections

Project Limitations

01 No access to primary users

Due to the strict timeline and limited resources it was not possible to conduct research or testing with the primary users - high school students. Instead, I conducted research and usability testing with secondary users - admission officers who interact with applicants on a daily basis and assist them correctly filling the admission application.

02 Focus on desktop

Since 90% of our users view the portal on desktop, we focused on improving the experience for them. But going forward it is necessary to cater the other 10% - mobile and tablet users.

Reflections

Learnings

01 Keeping stakeholders in loop

I established regular meetings with stakeholders to update them on the project's progress and solicit their opinions on the design. It assisted in setting the pace, providing frequent updates and continuous validation of the direction the redesign was taking.

02 Being the UX evangelist

The Admissions Office was collaborating with a UX designer for the first time during this project. Therefore, a key component of my job was to create a strong foundation, raise awareness, and empower the team to take the user-centric approach forward.

bottom of page