Two editors, one shift
AristoTelos Workforce Management System · Web & Mobile · solo designer
Marta needs her lunch break half an hour earlier. (Maybe she skipped breakfast or maybe she wants to catch the soap opera reprise she missed yesterday.) No biggie for a schedule but quite a big one for her manager.
Shifts are lively organisms. Small adjustments happen all the time. But shifting Marta's lunch means for her manager to leave the floor and walk to a computer in the office, which makes it too expensive of a favour for Marta to ask.
That is not the product we want to build. Adjusting shifts on the go makes managers efficient and workplaces better.
The mobile app needed a shift editor. So I extended what managers already knew from the web editor instead of inventing something new.
What I found
The web editor had no visual hierarchy and no direct controls, even though the parts of a shift were already laid out chronologically on a timeline.
Shifting Marta's lunch break half an hour early? Very well: open Marta's shift editor, select the lunch break, and a pop-up form appears. Find the field labelled 'start', type in the desired value, and confirm.
Sorry Marta, this is too much effort, I don't have time for all that.
Any video editor has solved this a long time ago. Drag a block to move it. Pull its edge to extend or shorten it. Easy as that. A no-brainer, done in two seconds. You're welcome, Marta!
So the timeline became the editor. The form is still there for when you need to be exact to the minute, change the type, or add and remove parts.
Then I added depth
The hierarchy came out of the roster work. The relationships between the parts of a shift were in the business logic but nowhere on the screen.
- Absence sits on top. It overrides everything underneath, so visually it covers it.
- Activities are the main flow. The spine of the day.
- Breaks interrupt activities, so they cut right through them.
- Parallel activities sit alongside. Lower priority, less space, unable to exist on their own.
- Overtime sits at the bottom. It doesn't interfere with anything else, it just marks the extra time worked.
- Labels get their own layer. They mark sections of a shift independently of everything else.
The visual rule enforces the business rule. The model does not have to be taught, it can be seen.
Depth also bought space. The shift view had to stay narrow, because managers open several at once to compare them and copy parts between them. The extra information couldn't cost extra height.
How I got there
Four versions, each answering the same question differently: which parts of a shift are objects, and which are conditions.
I picked the one that really shows the rules. If a layout lets you draw a shift that can't legally exist, sooner or later someone will try to save one.
One shift can carry every layer at once: absence, activities, breaks, parallel activities, overtime and labels, all in one day. Rare, but legal. I call it a horror shift, and I designed against it on purpose: an editor that survives the worst thing the rules allow doesn't need special handling for the regular shifts of ordinary Martas.
Same model, on a phone
The constraints here were structural. The shift and its editor have to fit one phone screen. Keep the model managers already know. God forbid users have to learn something new. Proportional time display was already out; I settled that when I designed the roster.
Managers read shifts as columns. In the shift detail I built for the roster, each layer gets its own named vertical stack, with the parts inside as cards in chronological order, times written on them, and empty columns hidden. See the roster case study.
It shows the model correctly, but it isn't interactive yet.
The editor grew straight out of this view. The same move as on web, where the timeline that displayed the shift became the timeline that edits it.
Edit mode. Select a shift and press the edit button, which is only visible to people with the rights to use it. Every part of the shift becomes interactive. Pressing a part opens its form in the lower half of the screen. The part stays selected and the shift stays visible above it, so you can see what you are changing and what it sits between.
Move lunch to 11:30, save. The afternoon activity stretches into the gap. One part edited, the rest adjusted automatically.
Each column keeps its own + Add new, so a part is created inside the layer it belongs to. (But don't worry if you didn't hit the right column, you can change the type in the form.)
Below the shift sit the things that belong to the shift and not to its parts: details, properties, note, tags, delete. The shift view collapses to make room for them.
This way managers can adjust shifts wherever they happen to be with their smartphones.
Where it is now
No usability testing yet. The evaluation was internal: what represents the business rules correctly, and what is feasible to build.
The web editor was implemented shortly after my proposal, and backported into the legacy version. The mobile app is in development, but the editor isn't expected in the first release.
TL;DR:
- One shift model, made legible twice. As depth on the web, as columns on a phone.
- Marta gets her lunch at 11:30. (Spoiler: Rodrigo wakes from the coma and learns the twins aren't his.)
- Dori is a great designer and you want to hire her. Let's talk!