University Online Admission System
Problem
A leading Hong Kong University wants to revamp its admission online system to strengthen its user experience for prospective applicants aged 17-26 around the world
Solution
We have rebuilt the user experience of filling a university application, and created a brand new design language that appeals to a younger audience and exemplifies the core values of youthfulness and innovation.
Outcome
The new experience received an NPS score of 89, a 230% increase from the previous version. The online admission system is now used by over 23000 users every year.
Web Application Design
Duration: Sep 2018 - Jan 2019 | Team: 1 Product Designer (Me), 1 Product Manager, 5 Developers | Responsibility: Design direction, end-to-end user experience, high fidelity prototypes, design system
DESIGN CHALLENGE 1
How might we make inputting information less fatiguing
The main function of an online application system is to collect information about an applicant. But who wants to fill in pages and pages of information? Our goal is to collect as little information as needed, minimize the number of steps to do so, and create an illusion that input form is shorter than it is.
Info Input Flow Overhaul
Instead of following a predetermined flow of information input, an applicant can add any kind of information into his/her application. This nonlinear flow eliminates the need to go through forms that collect irrelevant information and enables flexibility for information inputting.
Multi-step form
For some longer forms, instead of one long form, input fields are grouped into sections, with progress bar on top. Applicants need not to fill in the long form at one time, and the form feels shorter than original.
DESIGN CHALLENGE 2
How might we minimize error in form filling
A major operation struggle for the admission team is that information collected from the application is insufficient for evaluation or not in the right format that is needed. We start eliminating input error and insufficient information by providing contextual prompts to collect information necessary and reduce input error.
Pre-fill sections
Provide pre-fill sections to prompt applicants to input information needed for his/her application. These pre-fill sections are prioritized to the top of each information section.
Left: pre-filled public exam section; Right: completed public exam section
Help text, examples and validations in forms
Three levels of hints in the form: help text, examples and validations, to minimize input error. Help text shown at the top to provide overall requirements of the information needed to be collected. Examples indicate the format of which an information needs to be. Validation as the final check to make sure all information is input and in the correct format.
DESIGN CHALLENGE 3
How might we make form filling delightful
Traditional forms are boring and tedious. They cramp text, icons, input fields and buttons so tight that it feels frustrating to finish. We set out to make our system personable, fun and easing. Not only did we use the tactics outlined above to improve the user experience of providing information, but we also redesigned the look and feel of the system from the ground up.
Illustrative Design
We embraced a younger tone to embody the energetic and innovative culture of the university. We designed a set of illustrations to articulate different information needed for the application. We also use bold colors alignment with the universities new communication guide to make the system more exciting
Responsive Design
The previous version of the system is only usable on a computer. As our applicants become more mobile savvy, our system has to adapt to their mobile-first nature. For the first time in the university history, we designed the system mobile first, embracing the versatility of React web to create responsive components and make the system ideal for mobile, tablets and computers.
Result and Impact
After 5 months of design and development, the new application system is officially launched in Spring 2019. The response is overwhelmingly positive from both the applicants and the university admission team.
Applicants love the energetic design and ease of use compared to other traditional application portals. While the admission team praised the design for its reduced input error. It eliminated much time to chase after applicants for correct information.
89
NPS Score among applicants
23000+
applicants annually use this system