Application portal

Victoria University’s admission centre allows applicants to apply direct online for a course. Therefore, applying has to be a clear and intuitive experience.

I conducted and delivered a UX review of the 2019 application portal, providing user-driven recommendations and, as a result, increasing applications conversion rates.

Services

User flow chart – Competitors analysis – Screen flow – User interface design – Wireframe – Prototype – Sketch – XD CC – InVision – Zeplin – Agile methodology

Client

Victoria University
2020

My role

As the lead UX/UI designer, I led the research (user flow chart, competitors analysis, screen flows), workshops with stakeholders, and designed low-to-high-fidelity wireframes.

I collaborated closely with a cross-functional team across the organisation:

A Digital Producer who coordinated the project (Web services department)
A Data Analyst who implemented analytics code throughout the application pages to track the users’ progression to help us identify pain points (Web services department)
The admissions department (the Admission Centre Manager, stakeholder)
The Service cloud development (2 developers)

I focused the UX review on identifying users’ pain points and simplifying the user flows from an application’s entry point to the final action steps. I analysed the application process from a usability perspective and delivered a user-led design solution.

We adopted an agile methodology and delivered the designs in 6 sprints (this project took 50% of my capacity).
The project started in May 2020 with an expectation to be delivered mid-July 2020 to coincide with mid-year intake and maximise the impact on increasing applications. The product went live in September 2020.

Context

USER DROP-OFF RATES ARE HIGH

User drop-off rates maintained high levels in 2019 on the online application centre. As students need support from VU to apply successfully, they contact the admission team to assist them through their application process.

Therefore, the risk of low conversion is extremely, increasing the cost spent per application.

Challenge

CLEAR, INTUITIVE, ON-BRAND experience

A usable and engaging product that supports a better conversion to submission.
Students have many options for where to study and compare their courses among different institutions. However, we know that when students decide to apply for a course at VU and start an online application, the drop-off is high. Some will call the admission centre, and some will go to another university; either way, that costs VU.

A new modern and clean interface on-brand
As VU rebranded in mid-2019, we had to implement the new look and feel to assess Victoria University as a strong and consistent brand across mediums. I had to simultaneously translate the brand from advertising to digital and build our design system. Updating the UI promises to deliver an engaging interface.

A UX review with recommendations for user-driven improvements that are achievable with
the product development constraints, as we are not rebuilding a product from scratch
Technically our challenge was to understand the existing platform constraints, making some suggestions difficult to action and iterate feasible solutions.

What success looks like
Significant increase in conversion rate within the Application Portal and subsequently a decrease in the marketing spend per application. We will measure success based on YoY comparison of the same period.

Solution

INTUITIVE CONTENT AND FEATURES TO SUPPORT COMPLETION AND A CLEAN ON-BRAND UI

UX review conducted to focus on:

Preparing to apply
Form function
Account creation
Application progress

Usability

Inform users about their progress (wizard)
Clear CTAs
Introduce the form
Use web convention elements for making selections
Upload documents dedicated step
Redesign the input fields, added labels, assistive text, and states to help when there is an error
Redesign the footer and add help and support
Add a success screen at the end of the process and inform about what happens next

Content

Group questions under distinct sections on the page to improve the readability
Remove optional fields and collect only essential informations
Remove chunky tooltips and provide short contextual content

Implement a clean look and feel
Apply the new brand to the design
Create the University’s design system

Design process

Research

competitor analysis

Swinburne
ECU
RMIT
ME bank

Areas of focus

Preparing to apply
Commencing to apply
Form function
Error handling
Help and support

Key findings on commencing to apply (portal landing)

Communicating the process from start to end: before you start the process / what happens after you submit your application
Information on which audience can apply via the page
Prompt users to register/login options
Information on how long it will take to complete the application
Help options available

USER FLOW

Mapped the current user flow and highlighted pain points.

Areas of improvement

Preparing to apply

Add course title: you are applying for XXX
Add requirements: who can apply for the course and how to apply + add links to redirect others to the correct application portal
State process time: how long it takes to submit an application
Add checklist: before starting your application what are the documents needed (resume, referee details, proof of qualification…)

Commencing to apply

Add portal title: inform users that they have been redirected to the admission portal
Present login options: register, if you are a new applicant, and login, if you already have an account
Add explanation: why you need to create an account to get started with your application
Add existing login system such as facebook and gmail: a faster way to log in and easier to remember username and password
Add support options: need help call us, enquire, live chat, browse FAQ

Create your account step

Add wizard: inform users where they are in their application form: step 1 register
Add a progress feature: for users to track their time and task progress
Add assistive text for input field: guide users and/or inform about error
Add “email confirmation” field: avoid email typing mistake + improve email confirmation experience
Add legal acknowledgement: agree to VU policies
Add “NEXT” CTA: only active when required informations are filled

Application progress

Add wizard: inform users where they are in their application form
Add a progress feature: for users to track their time and task progress
Add a dashboard: inform the application’s status (draft, completed)
Add “Save and come back later” CTA: for users to save their progress and come back back at anytime

screen flow

I designed screen flows to map our solutions from entry to end. This visual format provided us support to iterate solutions with stakeholders. Each screen presents how the users’ decisions impact their flow through our product.

Ideation

step by step interface
contextual questions (info asked are user decision driven)
filling the application with as little writing as possible

Wireframing

Iteration 1

I focused on improving the content hierarchy to improve readability.

Application landing

Add onboarding content (first time applying, before you start what you should know, what happen after you applied)
primary action = create your account + login
secondary action = other info + help

iteration 2

Implement recommendations from the research:

Application landing

Focus on new applicants:

Add a modal to ensure applicants are applying at the right place
Prioritise essential infos

final iteration

Pre-application audience modal

The modal asks for confirmation that the user is domestic. If not, there is a link to the international application process. This modal helps support the poor UX on a course page when selecting the audience domestic vs international.

Landing page

Step 1 – Register

Create an account – Option to make your password visible by clicking the eye icon.
Log in – Forget your password link to generate a new one, if needed.

Step 2 – Course details

The Course Details screen will display contextual information depending on the course (information can include the requirement for supplementary forms, specialisations, study options & preferences…).

Step 3 – Personal info

The Personal Info screen offers the applicant an opportunity to update their email address. Sections on this page are:

Sign up details
Tell us about yourself Your cultural background
Contact details Your residency
About your parents/guardians
Special consideration (optional)

Step 4 – Study & work history

The Study & work history screen offers applicants the opportunity to add previous education information, previous roles & referees. Advanced standing application forms are included at the bottom of this page. Sections on this page are:

Study history Educational overview Secondary education Post-secondary education
Work history Add supporting documentation Referee
Advanced standing (optional)

Step 5 – Review & submit

An opportunity is given to review all application details before it’s submitted.

Final step – Success screen

Confirmation screen for successful applications. CTA to bring the user to their dashboard. “go to my Applications’

Dashboard

Draft applications = incomplete applications are listed.
Submitted applications = submitted applications are listed until an outcome is given: track progress, action required
Applications history = Applications that are no longer active (expired, declined, withdrawn…) Actions offered on this screen include ‘Contact Us’ prompts (for closed entries) & ‘View Details’ for completed applications.
Start a new application = “Choose your course” CTA to begin a new application from within the application portal.

Prototyping

Translating the new brand to Digital.

Reflection

What I learnt

Working with a cross collaboratiove team was a great and challenging experience. Collaborators were willing to share their knowledge and expertise that helps to appreciate each other’s efforts. My challenge was to deliver a user-centered product that aligned with the business requirements and with the technical constraints of the portal.

What I learnt and will improve for future projects:

High fidelity wireframes to be signed off before development
Expected behaviours/features implemented in the new designs to be signed off before development (cross-checking between fields available in old and new UI)
Provide all high fidelity wireframes, not only the key pages assuming that the developers will understand the variations
Define clear acceptance criteria
Include all testers throughout the project
Define the tools we will all use at the start of the project, especially between designer and dev (developers had a lack of familiarity with Zeplin and Invision, which results in complications matching the finalised designs.)
From weekly to daily meetings with the developers
Ensure that pages are tested in all different browsers/devices (a Mac wasn’t available to the development team to test on Safari).

Next steps – Project phase 2 scheduled in September 2021:

Design a fully mobile responsive experience (the mobile design wasn’t part of the scope. We focused only on a desktop solution).
Analyse the data analytics that
we put in place at the lunch of the project for continuous improvement (heatmaps, google analytics)
usability testing
Implement a contextual FAQ as the GotoVU experience is poor

The project was a success as we saw a significant increase in conversion rate from before and after launch by +32 %.