Feb 2025 - Shipped π
End-to-end Product Design
Myself
2 developers
4 Weeks
Business strategy
Product design
Project delivery
Poor navigation, buried data, and a hierarchy that didnβt match their workflows made the core Visibuild experience full of friction.
Users need to jump between tasks efficiently, and complete requirements across multiple levels without losing context. The old page treated each level of an inspection as a separate page, making this nearly impossible.
There were two key reasons that made our web experience difficult to use:
Every nested task opened a new page, losing context
Users got lost in deep hierarchies with no visual connection to parents
Jumping between sibling tasks required multiple back clicks
Every requirement opened a modal
Couldn't see multiple tasks at once
Web took 3-4x longer than mobile - users were reverting to completing inspections on mobile, just because it was faster.
Visibuild's core purpose is to increase efficiency on site. Our current offering was doing the opposite. Users were finding it clunky and difficult to get simple tasks done.
Refreshing this experience was core to continuing to push Visibuild towards our north star of empowering users to be efficient on site.
Inspections are hierarchical and deeply nested. They represent the work that needs to be complete before proceeding. You can't pour concrete until the pre-pour inspection is complete, signed off, and documented. In Visibuild, we call these Visis. A Visi can be a simple checklist (e.g., "Verify rebar spacing: β Pass"), or it can be a complex, multi-level inspection with nested subtasks.
The nesting of a single "Concrete Pour: Suspended Slab" inspection would look something like:
Switched to full page modal pattern to always keep users in context
Introduced navigation tree to make task relationships and navigation crystal clear.
Allowed users to complete tasks in-line, reducing clicks by over 66%!
I needed to understand not just what wasn't working, but why users were struggling and how they wanted to work. I approached this through three lenses:
Discovery calls with power users across key personas
Behavioural data analysis to validate what users were telling me
Theme 1
"On my phone, I can see everything at once. On web, I'm clicking through pages constantly. Why can't web work like mobile?"
Project Coordinator
Users loved the mobile inspection flow because all subtasks were visible in one scrollable view. They could scan ahead, see what was coming, and complete tasks without losing context.
How this influenced design:
Decision to eliminate modals and make all tasks expandable inline.
Single-view completion flow that mirrors mobile's continuous scroll.
Checklist takes visual priority in the centre panel and is now the first thing users see
Theme 2
"I'll be three levels deep reviewing formwork, then need to check something in concrete design, and I can't figure out how to get back without clicking the back button five times."
Quality Manger
We had created an experience that made it impossible to understand the relationship between tasks.
Old version
Navigation between sibling tasks was nearly impossible. Users had to click back up to the parent, then drill down into the next child. With 5-10 child inspections under a single parent, this meant 10+ clicks to compare two related tasks.
How this influenced design:
Tree navigation in left panel showing full hierarchy at all times
Direct jumping between any task without clicking back
Visual nesting with indentation to show parent/child relationships clearly
Active task highlighting so users always know where they are
Modal vs Full page
The data showed that on users were jumping around inspection and needed to be able to move quickly. They were spending more time in other areas of the app and needed the ability to jump between views quickly. The existing full page approach meant that they had to rely on the browser back arrow.
This is why I moved to the full page modal pattern - we never took users away from the context that they were already in and supported their existing workflow of needed to bounce around easily. This also worked well with the future ambitions of the business. As we expand our offering, users will be able to access their Visis in many places without losing context.
Tree navigation panel
Inspired by our template builder trees - familiar mental model to our users.
Shows entire inspection hierarchy at a glance
Users can jump directly to any task without losing their place
This was an unlock for our users. They went from having one page per level of inspection to a single page that allowed them to easily navigate between tasks.
Navigating a deeply nested inspection using the tree view
In-line completion of tasks
Users loved that on mobile, they were able to quickly input the information required. Our existing web expereince forced users to do the following:
Knowing that users close a high volume of tasks in one sitting and need to work through them quickly, I:
Eliminated modals for requirements
All tasks expandable and completable inline (like the mobile experience)
Pre-empted users next steps by auto-expanding next task.
Reduced clicks from ~15 to ~5 for typical inspection
Allowing users to complete tasks in-line reduces clicks by 66%
The journey after this change was drastically shorter.
The new experience halved time to completion
I actively tracked time to complete tasks via our in-product analytics. I also conducted timed usability sessions to understand if the goal of halving inspection time had been achieved.
Data showed that users are now completing inspections from the parent inspection - meaning the in-line completion change has adjusted their workflow and are seeing the benefits as a result!
Our customers actively reached out to the customer success team to sing praises to the new experience.
Heres a speedrun of completing the same inspection on both the old and new versions of the page
Slide to the see the before and after of the project
Lead with data, mitigate risk
Leading with data (usage patterns + timed tests) made the case for change
Meet users where theyβre at by borrowing familiar patterns (tree nav) - This reduced learning curve despite big changes
Modal approach preserved context without disrupting current workflows
I underestimated the change management needed for our user base. Construction teams aren't always tech-savvy, and even time-saving changes can feel jarring when they disrupt established workflows. We shipped a better experience, but the sudden shift created initial friction that better communication could have softened.
Key learning: For core workflow changes, invest as much in explaining why as you do in designing what. In-app education, gradual rollouts, and setting expectations about adjustment periods would have smoothed the transition.
Great design isn't just about solving problems - it's about bringing users along on the journey.
Thanks for reading!
Find me in the following places!