1.Getting up to speed — understanding what existed and why

When I joined, the task creation and task template workflows had already been designed. My first job wasn't to redesign — it was to understand. I worked through the existing designs, traced the flows, and identified which decisions were still valid and which needed revisiting.
The core task drawer had accumulated complexity. It had five tabs — Information, Attachments, Related Work, Workflow, and Activity Log — and a header crowded with competing action buttons: Cancel Task, Export to PDF, Save as Draft, Save and Assign. Users had no clear hierarchy of what to do next.
This diagnosis gave me a concrete starting point: before expanding the product, the foundation needed to be cleaner.

2.Pilot research — validating problems before designing solutions

Rather than designing in isolation, the team ran a structured pilot programme with construction professionals across Europe. I co-facilitated sessions alongside the Product Manager, conducting 2–3 interviews myself and contributing to the synthesis of all 10.
The programme ran in two formats:

Problem Validation (20K format) — We presented four core business problems and asked participants to rank them by relevance: disconnected processes, poor ownership visibility, unreliable field data, and no single source of truth. This session grounded every subsequent design decision in real industry pain.
Hands-on Prototype Testing (10K format) — Participants worked through the tool with real tasks. We observed where they got stuck, what they reached for instinctively, and what they said out loud when the tool did — or didn't — match their mental model.

Participants included: Derek O'Neil, Director at Careys — extensive site experience across concrete frames, shopping centres, and residential projects
André, BIM Engineer at Wills Bros — pre-construction and procurement focus

What we heard:
"One of the most important things is to be able to keep the information in one single place and then we can go through and understand what was happening."
"For me it is about clarity around what the task is and who's to complete the task and by when."
"If we have some kind of highlighting or something, that would be helpful." — on managing multiple concurrent deadlines
"I can use your interface to create my own workflow and then improve it in the future, change it completely." — on the value of configurable templates

I synthesised research findings using Dovetail's AI co-pilot, tagging insights by theme and surfacing patterns across sessions — a significant improvement over manual synthesis, which I had used on previous projects. One early evaluation worth noting: I investigated whether designs needed to be produced in German to support localisation for the DACH market. After evaluating Phrase — a translation management platform — I confirmed that localisation happens entirely at the development layer. No parallel design work in German was needed, freeing the design process to focus on a single, well-considered English-language experience.

3. Simplifying the task drawer — less surface, more clarity

The pilot confirmed what the existing design suggested: the task drawer was doing too much with too little hierarchy.

The problems:
1. Five tabs competing equally for attention
2. The Workflow tab showed a flowchart that users found abstract and disengaging
3. The Activity Log sat as a full tab despite being a secondary reference, not a primary action
4. Action buttons — Cancel Task, Export to PDF, Save as Draft, Save and Assign — were all surfaced at the same visual weight, creating decision paralysis

The changes I made:
1. Reduced tabs from 5 to 4 — removed the Workflow tab entirely; workflow state is now communicated contextually through the task status badge and the available action buttons
2. Elevated Discussion — replaced Activity Log as a full tab, but transformed its purpose: Discussion is now where users both communicate and act. They can comment, add attachments, and complete the task — all without switching context
3. Consolidated action buttons — a single primary action (e.g. "Mark As Done") sits prominently in the header. A chevron dropdown reveals the destructive action (Cancel Task, in red) one level deep. The ⋮ overflow menu holds utility actions — Export to PDF and Activity Log — keeping the header clean without removing functionality Comment & Mark As Done — a combined action at the bottom of the Discussion tab lets users close the loop in a single gesture: leave a note and advance the workflow simultaneously

What users said after:
"Instead of accepting and clicking Done, I can insert some comments here in discussion, I can insert some attachments if I want and then send it back."
"If you start discussing some challenges or issues... we can discuss using that feature and track what was agreed and new ideas and solutions. It'll be fantastic."
"This simple possibility to see the details regarding the activity that I'm about to start — in my point of view, is extremely helpful."

4.Designing Observations — field capture meets task management

Observations was a net-new feature. On construction sites, issues are spotted in the moment — a crack in a wall, a safety hazard, a deviation from spec. The current reality: a photo taken on a phone, sent to a WhatsApp group, and promptly buried. No record. No owner. No action.
I designed the Observations flow for both web and mobile — using RIB Hub's Construct design system throughout, with the web implementation drawing on Chakra UI components and the mobile implementation on Material Design patterns. The two platforms serve different but connected purposes.
Web — visibility and action
On the web, Observations live as a card grid under the main Process Management navigation. Each card represents one observation — a flat card for a single image, a stacked card for multiple. Users can filter, flag, archive, and download. Crucially, any observation can be attached directly to a task — creating a traceable link between a site photo and the formal process that resolves it.
Mobile — capture first, everything else second
The mobile experience is built around the moment of capture. Tapping "+ Create" on the Observations tab opens the device camera directly. Users shoot multiple photos in sequence — a thumbnail strip fills below the viewfinder as they go. Once done, they tap Save. The observation is logged instantly, timestamped, and geotagged.

5. Designing Site Diary — turning daily site activity into a permanent record

Site Diary was the second major feature I designed for web. On most construction projects, the site diary is a legal document — a daily record of weather, labour, equipment, and work performed. In practice, it's a paper form filled out at the end of the day from memory, or not at all.
The Process Management Site Diary turns this into a structured digital flow. Using a vertical stepper navigation, users move through five sections: Weather, Trades, Work Performed, Machinery, and Attachments — before previewing and submitting the completed diary.
The weather section auto-populates from a weather API, reducing manual entry and improving accuracy. Each section is an accordion — collapsed by default, expanded on interaction — keeping the full form navigable without overwhelming the user.
Submitted site diaries are immutable records, exportable as PDF, tied to the project date and user identity. They form part of the audit trail that protects contractors in disputes.

Final Design

The final designs were built in Figma using Construct — RIB Hub's internal design system (web: Chakra UI-inspired; mobile: Material Design-inspired). They cover the following core flows:
Web
All Tasks — list view with status, severity, location, and action required
Create Task — drawer with Information, Attachments, Related Work, Discussion tabs
Task Templates — configurable workflow builder
Observations — card grid with flag, archive, download, attach to task
Site Diary — vertical stepper with weather, trades, work performed, machinery, attachments

Mobile
Task list — time-grouped (Overdue / Today / Later), accordion expand, severity indicators
Create Task — task name with voice input, inline attachments, offline mode
Observations — camera-first capture, multi-photo strip, merge, attach to task
Project switcher — bottom sheet with company/project grouping