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.
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 10,000 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.
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.
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.
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
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
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 - 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.
Ensured better accessibility by making left columns sticky.
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.
.png)