Making Inheritance Intuitive: Labwork Navigation
Problem
The work in the lab is composed of a four tiered hierarchy:
Workflows
- Protocols
- Steps
- Process Types
- Steps
(workflows are made of protocols, protocols are made of steps and each step is made from a process type).
This structure is powerful for labs as protocols can be reused in multiple workflows, so mixing and matching scientific processes in the lab is very flexible.
WHAT MADE IT HARD FOR USERS
- Parent-child relationships and dependancies were hidden by paging (users had to develop naming conventions or write and follow a handmade guide)
- There was a high cognitive load involved in learning Clarity

The Labwork Navigation selection model, the result of extensive scenario mapping
Approach
Our mission was to deliver a navigation pattern that keeps the hierarchical context while allowing users to edit the children and parent without wasting real estate.

Design Documentation: I produced this document initially and then developers contributed to it once implementation began. To view this document more easily, please go here.
UX TECHNIQUES USED
- Scenario mapping with paper photocopies to explore selection model and interaction patterns
- Whiteboarding to test compositions
- Tested with users using a clickable prototype
- Collaborated with developers to find and document interaction behaviour
Solution
We designed the Labwork structure into powerful navigation which:
- Allows selection of the object
- Allows editing of the object (the form pertaining to the object opens below)
- Allows editing children within the parent (reordering and adding and removing)
- Depicts upstream and downstream relationships of the object selected (if you select a protocol, the workflow(s) it is contained in is indicated and the Steps inside of it are filtered)
WINS FOR USERS
- Manage all Labwork in one place, using one pattern (and clear language)
- Users can immediately understand dependancies saving time and frustration
- Vastly reduced training time (cognitive load) and cost

Interaction video demos for the new Labwork Navigation