My colleague John Bourne recently wrote a post about our clearing application process covering the user experience improvements. In this post I’ll be delving into some of the technical work behind these.
First, an introduction; I am a front-end developer for the Digital Communications team here at the University of Bristol. This will hopefully be the first of many dives into some of the technical work we do.
Last year we identified that the process for updating clearing information was convoluted and vulnerable to mistakes. A manually coded HTML table was used to display current vacancy information for all the courses involved in the clearing process. This would have to be completely re-written and published after any change within a separate system maintained by our admissions team.
Not only did this introduce risking data disparity, it also meant changes would not be live until a publish cycle had completed. The clearing period is extremely busy at the best of times, so any improvements we could make to minimise errors and speed up the update process would be hugely beneficial.
The first step was to build a new index on Algolia, our cloud-based search tool. This index was populated with data based on all courses involved in clearing, and crucially fields indicating whether there were Home & EU or International vacancies respectively.
From here we needed to produce and host a web-based tool for our admissions team to interact with this data index. We chose the JavaScript library React as the framework to build this interface, primarily because of its suitability for SPAs (Single Page Applications) but also due to the fact that other recent projects within the University had been built using it (including the University’s homepage). The key features this admin tool needed were:
- Quickly view and search all courses in the clearing process
- Edit course information, specifically availability
- Add new courses into the clearing process
- Remove courses from the clearing process
We used Netlify to host the admin tool due to its combination of fantastic feature set and its ease-of-use. Security was naturally a big focus of this tool as it is accessing and manipulating our Algolia-hosted index. Netlify’s cloud functions were used to obscure any interaction with the index (API keys etc), and its ability to integrate with our BitBucket repository meant it was trivial to implement both staging and production instances. Finally, the Auth0 authentication solution was used to secure the application behind a login process.
With the admin tool complete the clearing pages on the University’s website had to be updated. The pages hosting the availability tables were updated to query the Algolia index on load, minimising the chances of a prospective student seeing outdated information. Along with this the course pages themselves were also updated to query the Algolia index, dynamically displaying varying information based on the data returned.
Fast forward to this year and the introduction of the self-service form for students to apply directly online rather than by phoning our call centre (discussed in John’s post). This led to the Algolia index being updated so that each course now has a unique URL to access the form. In tandem with this, the dynamic panel on our course pages has been updated to include an application button, with the ability to quickly hide it should we need to remove user access to the form, but still allow users to call us.
We have also now implemented a display of course-specific entry requirements for some of our courses. This involved updating the Algolia index with new fields, extending the Admin tool to allow for dynamic editing of course requirements and finally extending the course page panel to handle these variations.
Hopefully this post has highlighted how our work has helped to aid our clearing administration team, minimise the chance of errors and data disparity, and ultimately bring clear improvements to the experience of our end users.
Technologies/services used: