Visualising Project Staging

Ben Doherty
BravoVictorNovember
2 min readFeb 5, 2018

BVN’s Sydney studio is having a pretty major refit, and for a bunch or reasons we’ve decided to stay put while it’s done. This means that there’s a lot of shuffling around while we’re doing a section, then moving again to do the next section.

This kind of staging is pretty complicated, and it’s notoriously hard to visualise what’s really going on. Trying to understand this kind of information through static drawings is fraught. It’s not uncommon to find an otherwise sensible looking plan where the studio has no internet for a week, or there’s no way of getting into the building.

We’re starting to see this class or problem showing up more and more. The problems are so knotty that it’s almost impossible to clearly communicate through the static medium of printed drawings (or their evil cousin, the PDF). We’re starting to experiment more and more with using the web to communicate these sorts of complex information. It usually needs a lot more work to build the pipeline to get the information to the web, but once it’s built it is way easier to use it for the second time!

Baptise Higgs is the latest addition to our little band of nerds. He distinguished himself by coming top of his class in battling fierce snakes,aka CODE 1161: Design computing, a particularly intense introductory Python course at UNSW. He’s been working on this way of showing the studio’s staging. It’s wonderfully simple, but it’s been a lot of work to get it to be that simple! Have a play with it and then read on for a better explanation:

As you slide the slider, the staging diagram, the gantt chart, and the notes all update. It’s really helpful having all the information change simultaneously! Something to bear in mind is that Google lock the colours on the gantt chart to blue—we will do a bit of graphic design and layout experimentation while we’re user testing.

Medium doesn’t allow iframes, so you’ll have go to to the site by yourself: https://baptistehiggs.github.io/BVN_Office_Staging/ it’s worth it, I promise!

The challenge when making these sorts of things is to take the person with the web-skills out of the loop as much as possible. If you do that too early the result is virtually certain to be wrong, too late and it’ll never get momentum. This thing is built out of a bit of hand-coded web stuff that glues together a Google spreadsheet and some SVGs made in Adobe Illustrator.

The slightly-mysterious data flow from Revit and people’s brains into a website.

There’s still a fair bit of user testing to see if people really like it, and if they can get their head around how to input/manage dates and stages in the spreadsheet. It’s still early in our journey of trying to use web technology in project workflows, and it needs us all to catch up with the technology. We’re getting there and it’s exciting!

--

--