Spectar · HoloLens · 2019–2023

Designing BIM for a headset on a hard hat

Designing BIM for a headset on a hard hat

Designing BIM for a headset on a hard hat

Spectar put the building model on the jobsite at full scale, on a Microsoft HoloLens. I spent four years there figuring out what works when the screen is strapped to your face and the user is wearing a hard hat.

Role

Lead product designer

Timeline

2019 to 2023

Team

Two designers, a small engineering team and sales

Platforms

HoloLens 1 and HoloLens 2

When I joined Spectar in 2019, the team was chasing a simple question: what if a crew could see the building model on the jobsite, full size, right where it was going to be built? I led the product’s design from there, on a headset almost none of our users had ever put on.

The problem

Buildings get designed in detailed 3D models and built from 2D drawings. Mistakes hide in that gap. A duct that runs into a beam that’s already on site. A wall that’s a few inches off. They tend to surface mid-install, when the fix means tearing out work that’s already done.

What made it hard

Mixed reality had very few design patterns yet, and none for construction. The HoloLens ran on a mobile chip, washed out in sunlight and wasn’t made to fit under a hard hat. And I didn’t know much about construction.

How I went at it

Spend a lot of time on jobsites. Get designs into the headset as early as possible. Keep at it until a foreman couldn’t imagine laying out a wall or checking an install without it. Over four years that meant two headsets, a lot of alignment experiments and one slightly ridiculous glove test.

2019 · HoloLens 1

Learning a new medium

On site with a Martin Bros. crew, 2019

The Projects menu on HoloLens 1

Logging in meant typing on a keyboard floating in midair

Gaze, air tap and a lot of patience

The first HoloLens gave you a handful of inputs: gaze to point, air tap to click, a bloom gesture for the menu, tap and hold to drag, and your voice. That was about it.

Voice helped, but jobsites are loud. We tried to stick with Microsoft’s “if you can see it, say it” voice guidelines, and made sure there was always another way to do it.

Even logging in was a design problem. Try typing a password on a keyboard that’s floating in the air.

Designing for all this had its own problem. The tools hadn’t caught up yet.

Process

Prototyping without the tools

Concept: building the model up from the floor plan

Menus and the placement tool, tested on my living room floor

The login screen, pinned up in my living room

Screenshots, in the headset

There weren’t real tools for designing in 3D space, so I started in Sketch and Photoshop, mocking up UI on top of photos from real jobsites.

Flat mockups lie, though. So I’d load those images onto the HoloLens and pin them around the room. You find out fast what’s too small, too dim or too far away.

Later, GLB models and ShapesXR let me test whole flows at real scale before engineering built anything.

The prototypes kept pointing at the same problem. None of it matters if the model is in the wrong spot.

Alignment

Making the model line up

Explaining drift: the farther you get from the anchor, the more the model slips

The later nudge tool on a concrete slab

The later nudge tool, down on the slab

A QR code on a steel beam, found and aligned

A QR code on a steel beam, found and aligned

A few inches off and nobody trusts it

Our first approach used a single holo target set on a known point, laid out by hand or with a total station. You placed the model on it, rotated it to face project north, and a nudge tool cleaned up the rest. It worked, but it took time and a steady hand.

We tried QR codes early on but dropped them over accuracy and UX. Microsoft’s HoloLens team talked us back into them for HoloLens 2, and this time they stuck (more on that below). The surprise was that people trusted them more, even when the accuracy was about the same. With a QR code the system does the aligning, not your hands. Less fiddly work made it feel easier and more trustworthy.

QR estimates were touchy about rotation, and codes spread farther apart did better. A short lock-in step, with an animation that showed it working, made setup a little slower and a lot more accurate. Worth it.

Getting it right in a test space was one thing. Then we took it outside.

Field research

Surviving the jobsite

The glove test

HoloLens 2 on a Spectar hard hat

HoloLens 2 on a Spectar hard hat

Loading the model in tiles to keep the frame rate up

Gloves, glare and 60 frames a second

Hand tracking works great until you put on work gloves, and nobody on a jobsite takes their gloves off. So I bought a dozen pairs of the gloves crews actually wear and tested every one. Unsurprisingly, bright colors tracked best, though some shades worked a lot better than others.

Holograms wash out in sunlight, so we kept a tinted visor in our back pocket for the jobs that needed it. Hard hats were their own problem. Trimble sold a separate HoloLens 2 built into one, which meant buying a whole new headset. I mounted a regular HoloLens 2 onto a standard hard hat instead.

And the models were huge. Drop below 60fps and holograms start to swim and people get queasy. Early on we split models by level, zone and trade. Eventually Jesse, our chief engineer, built a rendering pipeline that did that splitting for you, so you could load an entire trade for a level at once.

Then HoloLens 2 came out, and we got to start over.

HoloLens 2

Starting over on new hardware

Concept: an eye-tracked hand menu

The Tools menu with a hand reaching for it

The Tools menu: visibility, benchmark and positioning

A project and its zones, some saved for offline

Download a project’s zones before you head out, then work without signal

Rebuilt from scratch

HoloLens 2 was lighter, better balanced and could track your hands. Instead of porting the old app, we rebuilt it. I led the screens, flows and hierarchy, and a second designer took the lead on color and type.

Menus moved onto your hand, so they went where you went. Everything lived in three sections, Projects, Tools and Settings, and each one opened the panel you needed for the task. Gestures picked up shortcuts, too. Tap and hold on the ground anywhere on site and the nudge tool showed up, so you could fix your alignment on the spot. The list of voice commands grew a lot, and you could lock your hands when you needed them for real work (more on that below).

Offline mattered just as much. Jobsites rarely have good internet, so the new app worked offline first: download a project before you go, and it synced whenever it found a connection.

Favorite features

Four features I still love

01 · Lockable hands

Turn your hands off

The problem

HoloLens is supposed to be hands-free, so you should be able to use your hands while you wear it. The catch: grab a drill or pull a tape and the headset might read it as a gesture and start tapping things you never meant to touch.

What we did

After a few rounds of ideas, we landed on a lock that lives on the back of your hand. Need to do some real work? Turn your hand away and slide the lock to switch your hands off. Ready to get back in? Turn it over and slide it back. Think slide to unlock on a phone, or the safety on a nail gun. This one shipped, and it felt really good to use.

02 · BIM Track

Drop a pin anywhere

The problem

Field issues usually get tagged to a floor, a room or a sheet number. Then somebody in the office has to figure out where exactly “by the east stair” is.

What we did

Our BIM Track integration let you drop a pin at a precise point, in the model or right there in the real world, and share that exact spot with the office. Back then, nobody else in AR was doing that.

BIM Track issue pins placed in the model

03 · QR codes

QR codes, take two

The problem

We tried QR codes on HoloLens 1 and walked away over accuracy and UX. Then Microsoft’s HoloLens team pointed us back at them. HoloLens 2 is always scanning for codes at the system level, so reading them cost our app nothing extra, and they quickly became the no-brainer way to get localized on site.

What we did

I went deep on how QR codes work: formats, size, error correction, even which materials and angles the headset reads best. We landed on a simplified mobile QR format you could scan from a comfortable distance, paired with multi-point alignment for accuracy. Scanning a code skipped the project, level and model picker and dropped you right in. We also prototyped a one-point alignment that got the model up fast, then nudged you to scan a second code to tighten it up.

The edge cases

Codes we didn’t recognize, codes you didn’t have permission to use, codes with no point attached, no internet. Each one got a clear state, so nobody was left staring at a QR code wondering what happened.

Every path a scanned code could take, from “unsupported” to “active”

04 · Lenses (never built)

Pull down a new way of seeing

The idea

A full BIM model is a lot to look at, and what you need to see changes from task to task. So what if you could pull a lens down over your view, anytime? X-ray to see through walls. Highlighted edges so things are easier to read. Or just the backing in your framing model when that’s what you’re installing. Night vision goggles, but for BIM.

Why it didn’t ship

The gesture felt great. But we had more basic problems to solve first, and the cool interactions had to wait their turn. I still think it would’ve been neat.

How it turned out

Great for some jobs. Not for every day.

We plotted every use case by what it was worth against how accurate it had to be. A QC walk is useful even if the model is a few inches off. Laying out a door frame needs about an eighth of an inch.

Part of our use case board for wall and ceiling crews: every task by construction phase, with the accuracy it needed. Click to see the whole board.

Spectar was great at the first kind of job: QC walks, curved walls, custom fabrication, anything that’s hard to read on a 2D drawing. It showed a lot of promise on everyday install and layout work like backing, door frames and hanging pipe, but it never got widely adopted there. Setup time, a heavy headset and that accuracy bar kept it from becoming something crews reached for every day.

Spectar won a Red Dot Award for design concept in 2022. When Red Dot asked me what success would look like, I said it was “when construction workers insist on using our product to aid them in doing their work.” We got there with some teams. Not enough of them.

What I took away

Prototype where the work happens. A monitor lies about mixed reality, and an office lies about a jobsite.

People trust it more when the system does the work. The QR codes taught me that. Same accuracy, but nobody had to line anything up by hand.

The hardware sets the ceiling. Good design can’t make up for a device people don’t want to wear all day. I still think AR belongs on the jobsite. It’s the same idea I picked back up at Sitelink, this time on the phone already in everyone’s pocket.

From the archive

Four years of screenshots

Shoots, captures, specs, and a few ideas that never left Figma. Click any of them to see it bigger.

On site with HoloLens 2, checking the model against a tape measure

Point at a stud, get its name and what you can do with it

Far interaction: pointing at a pipe from across the room

Dictation built into the keyboard

Darkening by distance, so the close stuff reads first

Picking a HoloTarget off the floor plan

Anchor controls: manual, auto, lock, delete

Concept: live captions on a Teams call from the field

The web portal, where zones and models got uploaded

Project menu, pinned to the palm

An issue, opened right where it lives in the model

HoloLens 1 · Metadata tags on the bathroom fixtures

Rendering tests with a framing model

Metadata labels over the model

Microsoft Store hero art

Surface cue: texture spreads out where the model meets a real wall

Concept: drag a big prefab unit around at full scale to make sure it clears corridors and everything else on site before install

Nudge tool: rotate and step the model with your hands

Testing how light a QR code can print and still scan

A zone’s layers, with what’s saved offline

Auto-aligning, prototyped in ShapesXR

Filtering issues without a keyboard

Choosing which layers to load

Tool tracking concept: directions to a gangbox

The Spectar color palette

Notification states: success, neutral, error and safety

Signing in on HoloLens 2

Tap a duct to see what it is, with a shortcut to create an issue on it

Creating an issue, step two: add a photo or video

Nudge tool, free move mode

Object properties, with pins for the ones you check every time

Wireframe with solid faces, one of many visibility tests

Concept: placing the model from a floor plan, mocked up over a site photo

Inside a dense model

Metadata over live ductwork on a campus job

Teams call controls, docked to your palm

Issue marker spec: colors, x-ray, pointer position, sizing

Checking overhead ductwork before it’s installed

Rather than crash, the app gave you a heads-up. Not a great experience, but we knew we were working within limits.

Spectar hard hat with HoloLens 2

Repositioning by snapping to real geometry, step by step

HoloLens 1 · An early capture: pipes in a test space, 2019

Planning where QR codes go on a steel beam

HoloLens 1 · Picking your zone

Detail view: edge highlights so studs don’t blur together

Focus view: fading out what’s far away

Loading a zone, as a flowchart

Plan view with a north arrow, so you know which way you’re facing

The Visor Down one-pager

A real foreman using Spectar on site

HoloLens 1 · Jesse and I on one of our first days of site testing

Use case map for installing backing: today’s steps and pain points on the left, the same job with AR on the right

Issue markers in place, x-rayed when something’s in the way

On site with HoloLens 2, checking the model against a tape measure

Tap a duct to see what it is, with a shortcut to create an issue on it

Point at a stud, get its name and what you can do with it

Creating an issue, step two: add a photo or video

Far interaction: pointing at a pipe from across the room

Nudge tool, free move mode

Dictation built into the keyboard

Object properties, with pins for the ones you check every time

Darkening by distance, so the close stuff reads first

Wireframe with solid faces, one of many visibility tests

Picking a HoloTarget off the floor plan

Concept: placing the model from a floor plan, mocked up over a site photo

Anchor controls: manual, auto, lock, delete

Inside a dense model

Concept: live captions on a Teams call from the field

Metadata over live ductwork on a campus job

The web portal, where zones and models got uploaded

Teams call controls, docked to your palm

Project menu, pinned to the palm

Issue marker spec: colors, x-ray, pointer position, sizing

An issue, opened right where it lives in the model

Checking overhead ductwork before it’s installed

HoloLens 1 · Metadata tags on the bathroom fixtures

Rather than crash, the app gave you a heads-up. Not a great experience, but we knew we were working within limits.

Rendering tests with a framing model

Spectar hard hat with HoloLens 2

Metadata labels over the model

Microsoft Store hero art

Repositioning by snapping to real geometry, step by step

Surface cue: texture spreads out where the model meets a real wall

HoloLens 1 · An early capture: pipes in a test space, 2019

Concept: drag a big prefab unit around at full scale to make sure it clears corridors and everything else on site before install

Planning where QR codes go on a steel beam

Nudge tool: rotate and step the model with your hands

HoloLens 1 · Picking your zone

Testing how light a QR code can print and still scan

Detail view: edge highlights so studs don’t blur together

A zone’s layers, with what’s saved offline

Focus view: fading out what’s far away

Auto-aligning, prototyped in ShapesXR

Loading a zone, as a flowchart

Filtering issues without a keyboard

Plan view with a north arrow, so you know which way you’re facing

Choosing which layers to load

The Visor Down one-pager

Tool tracking concept: directions to a gangbox

A real foreman using Spectar on site

The Spectar color palette

HoloLens 1 · Jesse and I on one of our first days of site testing

Notification states: success, neutral, error and safety

Use case map for installing backing: today’s steps and pain points on the left, the same job with AR on the right

Signing in on HoloLens 2

Issue markers in place, x-rayed when something’s in the way

On site with HoloLens 2, checking the model against a tape measure

Repositioning by snapping to real geometry, step by step

Creating an issue, step two: add a photo or video

Concept: drag a big prefab unit around at full scale to make sure it clears corridors and everything else on site before install

Dictation built into the keyboard

HoloLens 1 · Picking your zone

Wireframe with solid faces, one of many visibility tests

A zone’s layers, with what’s saved offline

Anchor controls: manual, auto, lock, delete

Loading a zone, as a flowchart

Metadata over live ductwork on a campus job

Choosing which layers to load

Project menu, pinned to the palm

A real foreman using Spectar on site

Checking overhead ductwork before it’s installed

Notification states: success, neutral, error and safety

Rendering tests with a framing model

Issue markers in place, x-rayed when something’s in the way

Microsoft Store hero art

Point at a stud, get its name and what you can do with it

HoloLens 1 · An early capture: pipes in a test space, 2019

Nudge tool, free move mode

Nudge tool: rotate and step the model with your hands

Darkening by distance, so the close stuff reads first

Detail view: edge highlights so studs don’t blur together

Concept: placing the model from a floor plan, mocked up over a site photo

Auto-aligning, prototyped in ShapesXR

Concept: live captions on a Teams call from the field

Plan view with a north arrow, so you know which way you’re facing

Teams call controls, docked to your palm

Tool tracking concept: directions to a gangbox

An issue, opened right where it lives in the model

HoloLens 1 · Jesse and I on one of our first days of site testing

Rather than crash, the app gave you a heads-up. Not a great experience, but we knew we were working within limits.

Signing in on HoloLens 2

Metadata labels over the model

Tap a duct to see what it is, with a shortcut to create an issue on it

Surface cue: texture spreads out where the model meets a real wall

Far interaction: pointing at a pipe from across the room

Planning where QR codes go on a steel beam

Object properties, with pins for the ones you check every time

Testing how light a QR code can print and still scan

Picking a HoloTarget off the floor plan

Focus view: fading out what’s far away

Inside a dense model

Filtering issues without a keyboard

The web portal, where zones and models got uploaded

The Visor Down one-pager

Issue marker spec: colors, x-ray, pointer position, sizing

The Spectar color palette

HoloLens 1 · Metadata tags on the bathroom fixtures

Use case map for installing backing: today’s steps and pain points on the left, the same job with AR on the right

Spectar hard hat with HoloLens 2