Lantum's Rota UI
Lantum is a workforce management platform for healthcare organisations, in particular the NHS in the UK. It helps schedule and manage clinical staff, enables clinicians to find extra (locum) work, and allows them to manage their shifts and time-off.
The NHS spends billions every year on 'short-staffing'. This is partly due to not having enough supply to meet demand. But other factors such as large swathes of staff leaving because of poor working conditions as well as out-of-date processes are to blame
Lantum's mission is to save the NHS £1bn a year by solving these two problems. We do this by building a state-of-the-art rostering system that both clinicians and managers the platform to work together to create a working environment that helps everyone from staff to patients.
Foundations
There's essentially two parts to Lantum: The manager view and the clinicians view. The former is a web-based application where managers (sometimes senior clincians too) manage and plan their departments rota. The latter have a mobile app which consumes this rota as well as allows them to book leave, message their manager and swap shifts.
This post is mostly about the manager's view.
Our UI is built out in React, which I worked with AAsh Clarke, the FE lead. We kept a minimal design system, organised in Figma and Storybook. You can see a stripped down version of that here
Rota UI
The Rota is essentially a large schedule. Rotas are planned in advance and loaded onto the system using various templating systems. We built an AI rota builder that dramatically improved how these rotas are built. Most of the managers role is to manage any incoming changes to their initial rota. Things like leave, shift swaps, sickness, or unexpected demand need to be managed and approved by this person on Lantum.
From talking to a lot of deparment managers, there are few things Lantum's Rota needs to be successful:
- Comfortable – Managers typically sit with Lantum open on their desktop all day. They're either in the weeds managing the rota or away from the screen performing other duties. Making sure when they jump into Lantum, everything is where they left it and feels familiar and easy.
- Reliable – Rotas are planned in advance. Most of what managers use Lantum for is responding to changes. Lantum should be fast, responsive, and reliable so when shit hits the fan - the software can handle it.
- Compliant – Rostering staff requires lots of rules to be obyed. Lantum should help rota managers try out changes without the risk of making rule-breaking decisions, permanently.
These design principles were drawn out of lots of conversations with our early adopting departments.
Changing the view, fast
In an effort to make the UI feel comfortable, we looked at tasks that were being repeated frequently and needing a fast response. In this scenario, the UI should feel like a tool in your toolbelt. Exactly by your side, ready to grab it when you need.
These dropdown menus with searchable lists are one of the many small UI affordances we built that optimised for comfortable, rapid UI. As frequent users, managers would zip around the rota and having use of keyboard shortcuts and responsive, searchable lists shaved seconds of finding a staff member to assign to a new shift.
In Lantum, we built this using Radix UI's popover component to handle the menu. This ensures a good base for building out the menu, with out-of-box ARIA support, keyboard events etc. You can see how a long list of ~50 staff members, all with different names can be hard to scan. So the search filter allows for quick access.
The user doesn't even need to lift their mouse up to filter each staff member on/off the rota.
Draggin' me around
We watched lots of early customers use both Lantum and their previous methods, typically Excel spreasheets. It would be easy to scoff at Excel but we took our lead from it.
Even though everybody complained about it, it was comfortable and you could move things around at will.
The interface afforded you something that matched the users mental model. In to say, if there are items organised on a plain - the natural thing is to move them around freely across both X and Y axis.
Having such familiarity with their rota and it's software was the gold standard for us to replicate.
If managers can drag and drop items, it creates a more friendly way to move things around.
We can also do inline rule-checks such as stopping certain shifts, in this case a FY (Foundation Year) shift being assigned to a different staff role. However, some rules checks – such as checking EU working restrictions need to be done via the backend.
We optimistically update the UI after the drag, but indicate that the UI is saving and can be rolled back if we are disallowed because of rules breakages, or any error for that matter. This way the UI feels fast and slick, but we don't run the risk of messing things up.
Making big changes
Often times lots of similar actions need to be taken at once. A row of shifts might need to be re-assigned to someone else or even removed. Additionally, powerful bulk actions like 'Delete' or 'Re-assign' can shave lots of repetative work.
On ⇧Click over the sessions, we turn on selecting mode.
Users are presented with a toolbar containing bulk action options. These are specific actions which we've found users repeat over and over again in one go.
Actions are held in limbo for a few seconds, giving us the ability to undo it if the user makes a mistake or changes their mind.
We optimistically update the UI but hold off updating on the server side until the time has elapsed.
Learnings
The Lantum Rota is our core product and has been built brick-by-brick. Lots of smaller decisions come together to create a polished, useful product. This was a great learning moment for myself and the rest of the design team.
We often need to look at the big picture, but products aren't built in one go. They are crafted, adhering to a strong vision and set of principles, over lots of iterations and hard-work.