Inside UCL

[Staff experience PWA]

I worked with University College London (UCL) to design and build a new staff experience platform for managing HR and admin activities, such as booking leave or updating personal details. As part of the project we created a component library and the foundations of a design system to support the new progressive web app and future applications.

The project included 3 rounds of qualitative user testing for a total of 18 in-depth interviews with staff members in various roles, such academic staff, researchers, professional staff, and new starters.

In the first round we explored the current system in-depth to understand the failings of the current system and the needs of different people in the business. The other 2 rounds focused on different iterations of the new staff experience on mobile and desktop.

Following insights from our initial user research and stakeholder workshops we formed the user journey flows for viewing & editing personal details, and viewing/booking/modifying/accepting annual leave for both the staff member and their manager.

We built several complex prototypes for user research to test and iterate on the user journeys we had created. The prototypes contained multiple routes to ensure the user could explore the new designs in a natural and realistic way.

With the homepage we focused on simplifying the information architecture of the platform compared to the current experience and making sure different areas of the application were clearly signposted. We also helped to define the different types of notifications

During our staff interviews for the current system, we found that often staff members weren’t confident that they had saved the changes they had made, or they were completely unaware that they hadn’t saved the changes they had made.

We tackled this in the new designs by using different states of the form fields to distinguish viewing vs editing and providing a clear review step and saving confirmation.

In this project we were focusing on annual leave, however planning for the future we structured the time off page to prioritise annual leave and sick leave as these were found to be the most common.

We ensured the user could see how much time off they were taking and when, before, during and after booking. We also refined the approval process for the manager to make sure they were seeing the information they needed and the system captured the response needed, such as requiring a comment when declining a request.

As part of the project, we built a component library and some foundations of a design system. We created complex flexible components & variants that use nested master atoms, allowing you to build complex properties into a single component whilst ensuring the large number of variants are easily maintainable.

By creating just 15 highly flexible and efficient components, and defining set styles, we were able to create 100+ pages across 3 breakpoints. This enabled a high amount of reuse in design and development speeding up both processes exponentially as more components were created.

We established a changelog page where details on changes to the design library can be recorded so that there is a single place to reference. This is useful for other designers and developers on the project to keep up to date with changes.

Each component also has a short description to have a quick point of reference for designers when using the library. This helps to make sure the correct components are used and in a consistent manner.