← Case studiesExplore the story ↓
SiteMap workspace: captured utility lines layered over a real site
GPRS / SITEMAP2023–2024
DESIGN & DIRECTION
JOSH COLE

SiteMap.

What’s below
changes everything.

A MAP-FIRST FIELD PLATFORM
DESKTOP / TABLET / MOBILE
THE CORE INTERACTION

Open the record.
Keep the place.

The map is your workspace.
Utility records on the SiteMap map workspace
Interaction study using actual interface captures.Open a detail. The site stays in view.
THE ENGAGEMENT

Lead UX/UI Designer
2023–2024

One designer.
Two development teams.
Three surfaces.

In brief

Ground Penetrating Radar Systems scans what's underneath a job site (gas, water, electric, sewer, telecom) before anyone digs. SiteMap is the software product where all of that data lives. It's a map-first interface where building owners, contractors, and engineers can see the utilities and features GPRS captured, drill into work orders, manage their properties over time, and trust that what's on screen matches what's in the ground. A high volume of records, scans, and assets flows through the system, across desktop, tablet, and mobile.

MY ROLE

I joined SiteMap as Lead UX/UI Designer in 2023 for the redesign. The new version shipped in late 2024 and continued evolving from there as new functionality came online. I was the only UX/UI designer on the product, and the design director for it. Every interface across desktop, tablet, and mobile came from my desk. The teams around me were product managers, a business analyst, and two development teams, one for web and one for mobile, each with its own dev lead and engineers. I ran a weekly cadence with both to keep what they were building aligned with the UX, and to work through the design implications of decisions they were making.

Rebuild it.
Keep it
running.

SiteMap was already in production when I came on. Customers were using it daily. The product had good ideas everywhere, but it had grown without a design system underneath it, and the work had splintered. Different surfaces handled the same patterns differently. The same data appeared in incompatible ways across the product. Adding new features meant inventing each one almost from scratch, because the foundation to build on was crumbling.

The business wanted more, not less. A richer feature set, more granular permission levels, deeper subscription tiers, more of what users could do with the data. The redesign had to do two things at the same time. Unify what was already there, and make room for everything coming next, without breaking the workflows customers already depended on.

Subscription management and subscription details panels
Subscription management and subscription details panels
THE TENSION

That pull in two directions ran through every decision. A from-scratch redesign would have been easier in some ways. No legacy to honor, no users to protect. This was the harder version. Bring coherence to something that's already working, while adding complexity the product hadn't been built to support, and ship it without anyone feeling the floor shift underneath them.

A few principles emerged from the redesign and held across the suite.

A PLACE TO WORK

Keep your
bearings.

SiteMap map workspace with captured utility lines

The map is the surface. The satellite view of the site, with captured utility lines and feature markers layered over it, is the main workspace. Panels open over the map rather than replacing it, and detail views retain that map context.

Historical utility data layered on the site map with drawing tools
Historical utility data layered on the site map with drawing tools
READ THE SIGNAL

Read
the
rail.

Detail of the pipe condition assessment and its colored rail
Pipe condition assessment with the color-coded rail

Color carries condition. Storm lines run down a vertical rail with their pipe condition color-coded (green for excellent, yellow for fair, red for immediate attention, and so on). The user scanning a sewer system isn't reading words. They're reading the rail. The condition language is consistent across utility types and across surfaces, so a field engineer on a phone and an estimator at a desk see the same colors meaning the same things.

A SYSTEM OF CONNECTIONS

Find it.
Without
the tree.

Tag-based organization, not folder trees. The Plan Room, where CAD files, submittals, building plans, and site documents live, uses tags rather than a deep folder hierarchy. Tags carry color identity, audit metadata, and a description, so a customer can find what they need without remembering whose computer it was filed on. The same tag system surfaces in Folder Details and in the Show in Plan Room cross-reference, so it works everywhere the user might look.

Plan Room file details with tags
Plan Room file details with tags
THE SYSTEM UNDERNEATH

Built for
the job.

Performance is part of the design. A site can have thousands of features on the map at once. The Settings panel includes controls for render scale, feature icon size, hidden removed lines, and low-memory mode. The defaults provide a starting point, and users can adjust those controls for the site and device they're working with.

Same language on every device, not the same product. Desktop, tablet, and mobile share the same data model and the same language, but they don't try to be the same product. Desktop is where the heavy work happens (reviewing inspection videos, managing subscriptions, administering tags). Mobile is where the field happens (pulling up a line detail in the dirt, confirming a work order on site). Tablet sits between them, comfortable in both contexts. The design treats each surface as serious in its own right, not as a downsized version of the next one up.

Across the redesign and the year of feature work that followed, the scope spanned the SiteMap canvas itself, the Plan Room file system, sewer and line detail with embedded inspection video and PACP observation codes, Reality Capture for point clouds and 3D scans, subscription management for the business customers, an admin surface covering tags, user management, training, and messaging, multi-tier permissions, the settings layer that controls map performance, and on-canvas annotation tools.

Tag administration screen
Tag administration screen

All of it on three surfaces, all of it tied to the same data model, all of it designed by one person working with strong dev teams on each platform. The weekly reviews with web and mobile were where the design held. A place for the engineers to surface what they'd built or where they were stuck, and a place to make the calls that kept the surfaces aligned without grinding development to a stop.

A better tomorrow.
Without breaking
yesterday.

Two things came out of this engagement that I've taken with me.

The first is that redesigning a live product is a different discipline than designing a new one. A new product gets to be perfect on day one because nobody is using it yet. A live product has to be better tomorrow than it was today without breaking the work people did yesterday. Every decision is weighted by the people already inside the product. That weight is what makes the work matter.

The second is that design coherence at this scope is mostly an alignment problem, not a drawing problem. The screens come together when the surfaces are reasoning from the same model. Most of the work was making sure that model held, across desktop, tablet, and mobile, across feature areas, across the developers building each piece, so that everything visible on the screen was the visible end of a deeper consistency underneath.