.png)
At Holobuilder, I designed project management and editing features to help engineers work on 20000+ sites globally.
The product enabled users to track their construction site build-out in 360°.
Currently, this process requires engineers to take 1000s of 2D photos of every curve and crack of a construction site, taking hours on a daily or weekly basis. These photos are then placed in virtual folders, never to be looked at again.
Holobuilder enables construction professionals to take 360° photos of sites and quickly creates virtual walkthroughs, accessible by all stakeholders. In just a few pictures, the entire construction site is linked together.
When I joined the team, Holobuilder was aiming to become a perfect product-market fit, but wasn't properly accommodating the construction documenting workflow.
Users were keeping photos in folders upon folders, never to be looked at again.
Change on construction sites happens often, and Holobuilder's product team was noticing a trend:
In order to serve our users better, and to understand the pattern we were seeing, the product team and I spoke to users and visited the construction sites to learn more about the construction buildout workflow. We spoke to:
They were actively managing a construction project and supervising staff. Their role also included taking photos and evaluating changes.
They were managing resources and making sure the project was completed on time. They also needed to showcase progress to higher-ups.
Our user's needs:
Users wanted to create projects with multiple time-stamps for each location. Thus, they wanted to organize photos according to date and location so that they could see progress of a location over time.
Progress on construction sites was happening quickly, and to keep track of changes, these photos has to be easy to compare.
Construction sites were huge, and users took many photos. Decreasing the time to take, upload, and organize these photos would be key.
To do this, we had two main workstreams:
Uploading progress through the app, organized the way users need:
• Organized by location
• Organized by date
Keeping track of changes using the editor by reviewing:
• Versioning of progress
• Comparing two versions of the same location
Since progress updates was something we decided to tackle later, (through our app) I won't focus on this here. I will rather focus on the how I approached the progress review workflow.
Before exploring any design concepts, there was information I needed to learn more about.
To understand time-oriented documentation in different contexts, I analyzed the interaction model of other time-oriented systems like Apple Time Machine and Youtube.
Defining who we were designing for helped us understand the needs of the power users who regularly post multiple projects and photos.
We worked with the Data team to gain insight on project building on the desktop app. We asked questions like: How often do users upload new photos? How many projects do they upload on average?
While sketching for design solutions, I studied Holobuilder's design system to find existing patterns and UI components to ensure consistency and clarity. Since there were no pre-established patterns, I worked on new ones.
Since there were no pre-established patterns from Holobuilder's design system, I explored a variety of design treatments to find opportunities to make viewing versioning easier.
After loops of feedback with users and consultants, we learned that our users needed the following approach:
• More simple (not finicky at all)
• Highlighting current date
• Minimal screen territory
• A way to ensure photos were easy to compare
Weekly design critiques from the Product Design team and the Engineering team also helped us define that Microsoft's native Fluid Design System components would drive greater efficiency and create a more coherent experience for users.
We also worked closely with the Copy team to shape and polish the product experience. The Copy team played a significant role by crafting clear and directive copy that helped users find the information they are looking for.
We continued to collaborate with teams for feedback. Validating our design solutions through user testing especially helped us become confident in our design decisions.
After defining the concept and validating the experience with all stakeholders, I could move on to creating the specs for all use-cases.
.png)
The user now has multiple time stamps listed inside of each location on his/her floorplan.
Choosing a location
Yellow dots are single time-stamps. Black dots inside are locations with multi-time stamps.
Reviewing a timestamp
A dropdown with progress versions of the location is easily accessible.
It's important for users to know detailed date information while reviewing to stay updated.
Automatically documenting date and time
Correct date and time formatting is automatically applied to uploaded photos.
Highlighting out-of-date time-stamps
A red banner is visible upon collapse to warn users that they are viewing an out-of-date time-stamp.
The UI needed to take up a limited amount of room so the photo could be reviewed properly.
Collapsing the UI
Each element of the UI can be collapsed to show a full range view of the image.
Seeing detailed changes is an important part of reviewing progress.
Selecting two time-stamps & locking
Images can be compared with the dual tile view. This is enabled by selecting a dual-view icon on two images in the time-stamp dropdown.
Locking the view and eviewing the image
Both images can be navigated independently, and selecting the lock icon allows them to be rotated together.
It was possible to upload photos via the editor, but our next project was to quickly create a more streamlined, on the go upload process via the app.
Selecting a location on the floorplan
Selecting a location on the floorplan triggers the 360° camera to take a photo and tie it to that location.
Uploading photos directly
Once all locations are documented, the project can be easily opened and viewed in the editor.
.gif)
The success of this feature was measured in three significant ways:
Really positive feedback from existing clients and new clients.
• +33% increase of projects being documented on Holobuilder
• 84% of users using the versioning feature
This feature (together with the app) improved the way users create and rely on Holobuilder projects.
• 90% of users felt they could work more efficiently
• 60% felt they could use Holobuilder more for their projects
This work resulted in a 2.25-million-dollar investment for the company and is one of HoloBuilder’s most essential features.
Engineers: Marx J. Bievor, Jasper Heuser
Product Managers: Mayra Soto, Christian Klaus
Designer: Allison Kapps
Copy&Marketing: Harry Handorf
