Transforming employee experience
Foolproof and Zensar worked with UCL (University College London), one of the most esteemed educational bodies in the world, to design and build a BIMA award winning new employee experience platform for managing HR and administrative activities, such as booking annual leave or updating personal details.
The challenge:
- Create a flexible progressive web app platform (across mobile, desktop and tablet) for hosting admin activities, such as booking annual leave or updating personal details.
- Promote engagement with the tool through design which removes workarounds and bespoke explainers used for completing basic tasks.
- Marry great design with a low code platform to bring the employee experience to life.
- Enable a new channel (mobile), while strengthening their operations with cloud-native, API-led digital platform with a high-availability and fault tolerance.
Approach:
- 3 rounds of qualitative user research and testing with UCL staff members across roles including academic staff, researchers, professional staff, and new starters.
- Define the vision of the new app experience, supported by 5 experience principles to communicate, and meet users’ needs consistently and effectively.
- Create user journeys for the priority admin tasks such as updating personal details and booking annual leave.
- Form a component library and the foundations of a design system to support the new Progressive Web Application and other future applications of design across UCL.
- Bring to life the vision for design using the low-code platform OutSystems to bring the experience to employees at speed.
- Harness existing backend systems to develop new APIs to integrate data from other sources which enabled functionality within the new low code platform.
UCL are a leading educational institution.
Design & engineering
End to end employee experience
We worked with University College London (UCL) to design and build a new employee experience platform for managing HR and admin activities, such as booking annual leave or updating personal details.
Staff members found the existing platform unintuitive to use. Simple tasks often needed PDFs or explainer guides to aide completion without errors, as well as signing into a local VPN to gain access. This resulted in additional time and cost being invested and unforced errors creeping into what should be a smooth process. Among employees this caused frustration and detracted from their wholesale experience of the University.
Getting under the skin of a leading educational body
We knew our solution had to work for everyone at the University, so we ran successive rounds of qualitative user research and testing with staff members across the University - from lecturers to administrative staff and beyond. We also invited key stakeholders into workshops to capture their thoughts on existing processes and new requirements.
This helped us to immerse ourselves in the current system to understand the failings, opportunities for improvement and the needs of different people in the institution.
Having captured insight from user research and stakeholder workshops we formed the user journey flows for viewing & editing personal details and viewing/booking/modifying/accepting annual leave for the employee and their line manager.
We then built out prototypes which we used with employees to test and iterate on the user journeys we created. The prototypes contained multiple routes to ensure the user could explore the new designs in a natural and realistic way as if they were performing actual tasks. Figma’s Smart Animation feature allowed us to animate features like notifications and saving states.
Scaling design across the employee experience
Supporting and scaling our design work, as well as promoting future reuse, was the formation of a component library and the foundations of a design system. We created flexible components & variants which use nested master atoms, allowing complex properties to be built 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. Defining breakpoints like this allowed us to understand whether a component was consistent across all screen sizes, if it wasn’t it was easy to understand how its behaviour differed. We could then have this conversation with our Zensar engineering team and UCL's technical team. This enabled a high amount of reuse in design and development speeding up both processes exponentially as more components were created for the application.
We established a changelog page where details of changes to the design library can be recorded. This means that there is a single place to reference all changes to the library. This is useful for other designers and developers, helping them to keep up to date with changes and understand the decisions for them. Each component also has a short description to offer a quick reference for designers when using the library. This helps to make sure the correct components are used in a consistent manner across the current and future application.
This approach to design was crucial when balancing the variety of tasks which employees need to complete, the sometimes-intricate inputs, and the amount of effort required of design and engineering.
Employee experience: the intricacy of design
The homepage
When designing the homepage we focused on simplifying the information architecture of the experience and making sure different areas of the application are clearly signposted. This promotes easy and quick access to the most common tasks an employee would undertake. We also helped to define a system for organising the different types of notifications on the platform from an employees and a manger’s view.
Getting personal
During our formative research with UCL team members on the current system, we found that employees weren't sure if their changes had been saved or not. We tackled this through design by using different active states in the form fields to indicate completion and saving. This helped employees easily distinguish between viewing vs editing. We also provided a clear review step with all information about the request presented and a saving confirmation notification.
Taking time off
With booking time off we set out to only show relevant information, this meant only showing information which pertained to an employee's specific type of leave request. We structured the time off page to prioritise annual leave and sick leave as these were the most common requests.
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 so they could see the information they needed to decide, as well as making sure that the system captured the right response, such as requiring a comment when declining a request. We renamed the section for absence to ‘Time off’. Time off was deemed more approachable and representative of all types of leave, avoiding existing confusion with annual leave being the nomenclature.
Engineering employee excellence
Because of the strength of our documentation and the promotion of reuse our designs are easily consumed by our engineers, who worked alongside us across the whole project. Strong documentation in Figma has made the shift from atomic components to OutSystems easy.
Any limitations from the perspective of design and engineering were regularly discussed as one team spanning Foolproof, UCL and Zensar and were corrected in-flight. Our work in Outsystems followed the same principles of reuse to help scale engineering velocity over time.
What’s next
We continue to work with UCL on their employee experience and beyond. Currently, this involves adding more tasks and activities to the platform. We’re also working to expand on the component library we defined and to build out the design system in full.
Activities
Qualitative research, design, proof of concept, UX writing, engineering, API build.
Delivery
Two-week agile sprints.
Get in touch
We'd be very happy to talk through more examples of our work.
Contact Ed Walker, Business Development Director on ed@foolproof.co.uk.
Nedbank
We worked side by side with Nedbank to undertake a radical end-to-end transformation of their technology and customer experience by taking a strategic, user-centric approach to design and technology.
Shell Fleet Hub
We partnered with Shell to transform their Fleet Management platform. This has been deployed globally across 39 markets and benefits millions of customers.