Campus Online redesign

Designing a better staff portal for the University of Kent.

Discovery

Campus Online is the University of Kent’s staff portal. It is the default webpage setup on all staff desktops across the institution and contains links to systems and resources that support staff in their day to day job.

The challenge: Address a large number of complaints about the page feeling ‘stale’ and users not being able to find the links they were looking for had reached an all time high.

The solution: Streamline the design of the page so staff can easily find the link they’re looking for whilst making more space for announcements and notices from around the University.

Research

Using Google analytics, heatmaps via CrazyEgg, as well as online surveys I was able to learn how the web page was being used. I prioritised the content using this data and provided a more focused experience for the target audience.

Inspiration

During the discovery phase many users cited Kent’s Student Guide as something that should be emulated for Campus Online. Whilst the exact same look and feel could not be implemented due to the quick turnaround needed for this project, I decided to use a similar approach for the content hierarchy.

Experience and design

The primary purpose of users visiting this page is to access quick links to other systems they need for a task. The secondary purpose is to keep up to date with going’s on around the University.

Sketches and wireframes

The sketches show different ideas on how to maximise page space without overcrowding it. Keeping enough visual contrast between the two main sections, quick links and updates, being my main priority.

Code

Due to the quick turnaround wanted for this project, I went straight to mocking something up in code. Doing this might meant I was able to deal with design problems straight away keeping the project revisions quick and lean.

The Front-End

The front-end went through many stages of iteration. One of the largest changes during the prototyping phase was the colour contrast of the interface. By using the lighter colours of the brand palette I was able to tone down the visual noise and bring out those elements that users had previously most trouble to find.

The main content is injected onto the page via a PHP based snippet with additional blocks being brought in via AJAX and JavaScript using the Kent API. This had the advantage of letting me pick and choose the fields I wanted to display, reducing the page load times as well as making it more relevant and useful to its users.

Final Results