Back

Exam portal redesign set to deliver up to 60% more revenue

London Brookes College faces a significant challenge in its exam portal, with students frequently entering incorrect subject codes on registration forms. This necessitates manual verification, taking 3-5 days, disrupting the student experience and resulting in a high number of application withdrawals.

My Role

Team Leader (product designer
& manager)

Duration

6 sprints

Key Stakeholders

College team (administration panel, students, and principal)

Other designers and engineers

overview

London Brookes College, is a sixth-form college offering comprehensive educational services to GCSE and A Levels students. Each term, around 5000 students choose to register with the college as they prepare for their exams.

I led the design initiative for the future of the exam portal, assuming a pivotal role in conceptualizing, designing, and prototyping a transformative set of features. This involved revamping the exam portal to create an error-free platform, with the aim of reducing application withdrawals and generating revenue to ensure the college's sustainability.

Highlights

A glimpse of the final design

1.1
Access arrangements with file uploading prototype
animated loop
1.2
Admin panel filtering system
Image

product discovery

Breaking Grounds, Crafting Solutions

Research summary

What our existing users were saying?

I conducted contextual interviews with exam office admins and students who recently
completed registration using this portal.

Due to the sensitivity of certain data & safeguarding issues, I may not able to share all details.

User feedbacks:

  • Cumbersome manual processes impede workflow and evoke frustration.
  • The outdated, non-user-friendly portal demands excessive mental and physical effort.
  • Users face task incompletions, resulting in wasted time.
2.1
Glimpse of research summary
image

The Problem space

Delving into the underlying factors behind the problems

As a first-principle thinker, I see problems as symptoms, believing that there must be underlying causes contributing to the issues we encounter.

1. Cluttered & lengthy registration process.

The registration flow is broken into two inconsistent parts having unclear input fields. This poses challenges, especially for students with special needs who struggle to find their access arrangement requirements.

2. Hurdle in locating the exam entry code.

When students need to add an exam entry code for their selected exam subjects, they have to manually submit codes separately for each subject and board. This process becomes cumbersome as the codes are buried within lengthy PDFs, each consisting of more than 200 pages.

3. Application withdrawal rate is more than 60%.

Almost two-third of the entries with incorrect information lead to 3-5 days of manual verification by exam office staff. The urgency frustrates 60% of candidates, prompting them to register with other colleges for quicker resolution.

4. Poor system leads to administrative inefficiency.

Absence of essential features, like custom payment options, forces exam office staff to manually calculate fees based on entries and access arrangements. Identifying new entries is challenging without a notification system, and a frustrating filtering system complicates administrative tasks. The cluttered layout requires high requires very high physical and mental effort.

Usability Audit Report

Usability Audit Report

Read Usability Audit Report

Read Usability Audit Report

The broken registration process navigating to the dark

Audit -  Old registration process
image
Audit - Old exam entry submission
image

Frustrating user profile

Audit - Old user profile
image

It is a nightmare to find the right subject code

Audit - Old exam entry code screen
image

The system is pushing everyone backward

Audit - Old admin panel
image

Objectives & Key results (OKRs)

Our goals: Reduce application withdrawal rate to below 10% and create an error-free portal that ensures robust revenue growth.

My team aimed to achieve these goals by revamping the platform's overall information architecture, organizing the user flows, streamlining the total registration process, integrating automation, and ensuring smooth payment integration.

challenges

Addressing critical constraints on the path of progress

  • The project was undertaken during the break, so organising contextual interviews, and usability testing sessions with the admin panel and the students were very difficult.
  • As this was my first experience working with teenage students, navigating safeguarding considerations posed a challenge.
  • To build a comprehensive solution within a very tight budget was challenging.

Jobs to be done & variables of success

Understanding the purpose of use and the
value parameters of the users.

When users perceive a product or service, various forms of value are typically added to their lives, whether functional, emotional, social, or life-changing. Therefore, comprehending the tasks users aim to accomplish within your product and the value parameters they use to measure task success is crucial for creating the right value for users.

3.1
Breakdown of the Jobs to be Done for students
image
3.2
Breakdown of the Jobs to be Done for admins
image

Information architecture (IA)

Setting proper structures from the chaos

My initial focus was on reorganizing the information architecture and user flows. Considering the user base and context, I restructured the entire information architecture of the platform. Throughout the design process, I iteratively adjusted the IA several times. The most updated versions (figure 4.1 and 4.2) are attached here.

4.1
Updated IA for students
image
4.2
Updated IA for admins
image

Visual design direction

The definitive guide to consistency and scalability

Layout grids

This portal is only accessible from the computer devices. So, a standard set of layout grids and breakpoints (Figure 5.1 & 5.2), was critical in ensuring we could design and build quickly and consistently.

5.1
Layout grid - LBC admin panel
image
5.2
Layout grid - LBC exam portal
image

Scalable design system

In pursuit of a seamless and consistent design process, I meticulously crafted a comprehensive design system for this project. This section provides a glimpse of the components building process.

6.1
Design component - stepper
image
6.2
Design component - file upload field
image
6.3
Design component - left bar/menu bar
image

Solutions

As a desginer I believe, you have to have logical explanation of every design decision you make. To make this process easier I follow a standard set of questions while designing a particular screen or a complete user flow.

I believe, if a designer keeps these questions in mind while designing, he/she will never design wrong solutions. This process also helps designers to iterate better and the engineers and managers to understand the design and make constructive feedbacks.

What is the intent of the users to use this flow or screen?

What information are they seeking, and which details require more attention?

What are the actions that can be done in this particular screen or flow?

How can we make sure smooth navigation?

How can we help the users to make better decision faster?

Solution for students - Streamlined registration process

The pathway to seamless enrolment

Iteration 01 - Shedding light on the refined journey

Initially we kept the new user registration and exam entry submission separate. We divided the lengthy and frustrating registration process into four small steps. Each step now contains similar information, clearly displaying the process status.

Solved existing usability issues.

Ensured better user flow.

Reduced registration process completion time by 8-10 minutes.

Friction between the registration process and exam entry submission is still there.

7.1
Iteration 1 - Registration process step
image

As this platform exclusively registers students for IGCSE, A-Level, and 11 plus exams, those with disabilities or require special needs typically know their required access arrangements.  We addressed this by clearly presenting all UK access arrangement options and offering necessary support.

Arrangements options are easily accessible.

It will effectively eliminate registration hassles for students with special needs.

These details should not be part of the registration process, as access arrangement fees will be calculated along with the exam entry fees later.

Our system struggles to calculate these arrangement fees since they are not included in the exam entry submission form.

UCI number should be the part of exam entry submission.

7.2
Iteration 1 - Registration process step -access arrangements
image

We redesigned the layout by categorising the information into smaller, more digestible chunks. Now users can easily access all the informations related to the exam entries, exam schedule, and even they can see the result updates from the profile as well.

Informations are easily accessible.

Since this is related to exam and the data is quite sensitive, so we shouldn't allow the students to change anything by themselves.

7.3
Iteration 1 - New student profile
image

Once students are registered with the exam centre then they will be able to submit exam entries.

Since subject codes don't change frequently so we decided to integrate them into our database.

This ensured that the system will intelligently detects exam entry codes by combining various inputs like exam series, level, board, subject, paper, and quiz type. Also students can make as many entries as they need simultaneously and submit them together without encountering errors.

This proved to be a game-changer, preventing over 75% of students from submitting incorrect entry codes.

It will save a significant amount of time for the students and admins by boosting task efficiency.

"Add entry" button seemed confusing to some students when they need to add multiple entries.

A "back button" would ensure a better accessibility.

7.4
Iteration 1 - Exam entry submission
image

To ensure a seamless payment we introduced a payment method that automatically identifies the registration date, to distinguish between standard and late entries. The system calculates the total fees by summing up exam fees for each subject and board, accounting for any access arrangement requirements.

It will minimise the manual calculation and payment confirmation hassles.

It will decrease application withdrawal rate.

No customisation options for entry details.

Confusing terminologies.

7.5
Iteration 01 - Payment integration
image

Final design - A seamless journey in five easy steps

Final design - A seamless journey

We refined the process into a seamless 5-step pathway by combining the registration and exam entry submission. This enhancement ensures users can effortlessly register, submit entries, and complete payments at once.

This design decision completely removed the friction between the processes.

System will perform efficiently while calculating the fees.

8.1
Streamlined registration steps
animated loop

Considering the frictions and feedbacks from the iteration - 01, I updated the complete
user registration task flow (figure 8.2).

8.2
Task flow - New student registration and exam entry submission
image

We increased the spacing between elements to improve visual hierarchy. Additionally, we strategically positioned the 'Add entry' button for better accessibility. Furthermore, we included the unique candidate identification number (UCI) in this step since it is related to exam entries.

Ensured seamless user experience.

Maintained proper visual hierarchy.

8.3
Streamlined registration process - Step 03
image
8.4
Streamlined registration process - Step 04
Prototype

Final design - A seamless journey in five easy steps

As we acknowledge the importance of payment for exam entries, we have reorganised the design into two parts. This enhancement ensures user control, allowing students to verify input details and edit payment information as needed.

Improved the readability of the details.

Ensured user controls by offering customisation.

Minimise the chances of application withdrawal to almost 0%.

8.5
Seamless payment method integration - Part 1
image
8.6
Seamless payment method integration - Part 2
image

After successfully completing the registration, students will land on this page. We have removed the option to edit submitted information. If someone needs to add or remove something, they can contact the office, and the admins will assist them.

Ensured submitted data protection.

8.7
Redesigned user profile
image

Solution for admins - centralised control hub

Increasing administrative proficiency by miles

Iteration 01 - All in one solution

During the hectic exam period, office staffs are burdened with managing registration information, verifications, payment confirmations, access arrangements, and other essential tasks. Our all in one panel provides administrators with comprehensive controls over everything.

Increased administrative proficiency by revamping the information architecture.

Solved usability issues by redesigning.

No option for specific searches, e.g., by name, candidate number, etc.

No option for sorting daily entries.

Office admins requested separating exam entry data for better clarity.

UCI number is missing.

9.1
Admin panel iteration 01
image

Final design - A seamless journey in five easy steps

Final design - The ultimate solution!

Based on feedback, we implemented necessary features and organized the table data in an even more intuitive way. The system enhances convenience for administrators by incorporating advanced filtering, sorting options, system controls, a notifications system, and quick actions, streamlining their workflow.

Integrated better searching and filtering.

Quick actions such as changing entry status made the workflow even more intuitive.

9.2
Redesigned admin panel
image
9.3
Redesigned admin panel - filtering options
image

Design impact

We made a significant impact

60%

More Revenue

Since the project is still in the development phase, we are anticipating more than 60% revenue growth than previous terms because with the new system the application withdrawal rate will be almost 0%.

High

Task Efficiency

Error-Free system enhances administrative efficiency, reducing workload by two-thirds.

Key takeways

Insights I gained from this project

1.  Gained knowledge about the education system

I was a profound learning experience about diverse access arrangements systems and safe guarding issues, particularly insightful for me as someone who studied outside the UK.

2. Stakeholder alignments

Aligned with various stakeholders, including college admins and engineering teams across different timezones. This experience enhanced my ability to manage individuals from diverse sectors.

Next read

#Product Design

#Mobile App

Redesigning banking convenience

Increased user engagement & task efficiency.

Read Case Study

Read Case Study

#Product Design

#Interaction Design

#mobile app

Lloyds Bank App

Increased user engagement.

Read More

Read More

#Product Design

#Product Management

Senior Places

Raised $350k initial fundings.

Read More

Read More

Will be live on 22 Jan 2024