Imperial College London
Replacing legacy systems with intuitive services
Online Student Enrolment
Scroll ↓
Note: This is my first design project in a company before I had studied or received any mentorship.
Tools used: Adobe XD, Microsoft Viso, Balsamiq, OutSystems
Background
The online student enrolment process was originally part of the wider student system E-Service at Imperial College London.
The system had many processes and was disjointed which is why the project was created. This project focuses on the student enrolment process which consists of forms and document uploads.
My contributions
his was my first step into design, and I was both the designer and a junior developer for this project, working within the Postgraduate Milestone project. At the time, there wasn’t a design team within the IT department, and I noticed a real gap when it came to UX. So, I decided to take matters into my own hands and enrolled in an online UX design course to learn as much as I could and bring those skills to the table.
I worked closely with the product owner, meeting weekly to gather requirements and figure out what we needed to deliver. I also helped the business analyst turn these into user stories with clear acceptance criteria. Then, I started sketching out ideas and creating wireframes using Balsamiq. It was a big learning curve, but I loved being able to bring structure and clarity to the process while making sure the user’s needs were front and center.
Understanding the problem
The existing system didn't take into account the actual student journey and included many tabs in no particular order. The labels were also not completely descriptive of the information on each page.
Looking through the legacy system, we took into account the colour scheme and tried to make sure it would fit in with the other processes which are being worked on so that the look and feel is consistent.
Research findings and analysis
At this stage, I facilitated workshops to gather research insights, working through a lot of unstructured data. Most of the feedback came in the form of negative comments about the current system, which we then organised into themes to uncover the broader issues.
The image below shows the affinity diagram we created, with post-it notes grouped and categorised to highlight key problem areas.
User flow
One of the main issues with the existing system was the navigation and user journey. After going through all of the content on the existing website and grouping processes together with the Business analyst, SME's and product manager, we created new user flows in workshops to improve the process.
Below is the revised user flow for the Online enrolment process from setup to confirmation.
Defining the journey
Designing the system
During workshops we started sketching wireframes and potential layouts before I created digital wireframes. This process allowed us to structure the information in an intuitive way with clear use of branding colours, status colours and a wizard navigation so the user knows where they are at each stage.
Some high-fidelity prototypes can be viewed below which were creating using Adobe XD.
