SITE Map Design System

Design System · Mapping · Data Visualization · Enterprise UX · AI-Driven Workflows

Product: Commercial Property Mapping & Intelligence Platform

Role: Senior Director / Head of UX & AI-Driven Design

Company: SITE Technologies

Timeline: 2 years

Team: UX, Product, Engineering & Data

Contributions: UX Strategy · Design System · Interaction Design · Mapping UX · Data Visualization · Photo Library · Dashboards · Prototyping

Platforms: Desktop / Web · GIS Mapping · Drone Imagery

Overview

SITE Technologies is a commercial property intelligence platform that helps organizations manage and assess large property portfolios. The platform combines mapping, property data, drone imagery, assessments, repairs, historical analysis, and AI-driven insights in a single desktop experience. I designed and helped establish the UX design system and interaction model supporting these experiences.

The challenge was making a highly technical, data-rich application feel simple, focused, and easy to navigate across pavement, roofing, facade, landscape, solar, and HVAC workflows.

The Problem

Commercial property management generates enormous amounts of visual and structured data:

• Properties and geographic information

• Historical assessments and imagery

• Drone photography

• Measurements and boundaries

• Condition ratings

• Repairs and budgets

• Assessment workflows

• Map annotations

The platform needed a consistent design language that could scale across these workflows without becoming complicated or visually overwhelming.

The design challenge

How do you make a sophisticated property intelligence platform feel as approachable as a modern productivity application?

My approach was to organize the experience around context, progressive disclosure, and the map as the primary workspace.

My Role

I worked across the product to define the UX architecture, interaction patterns, visual language, and reusable component system.

My contributions

• UX strategy and product architecture

• Design system development

• Interaction design

• Map-based UX

• Contextual panel behavior

• Data visualization

• Photo library experience

• Prototyping and design reviews

• Cross-functional collaboration

Design

The map became the primary canvas rather than simply another application component.

The system supports:

• Pan, zoom and rotate

• 2D / 3D views

• Drawing and property boundaries

• Measurements

• Custom map pins

• Color-coded annotations

• Layers and comments

• Historical imagery

Principle: The map is the workspace. Panels provide context.

Contextual Panels

A key design-system decision was establishing a consistent model for floating contextual panels.

Left = Navigation & property context
Center = Map / primary workspace
Right = Information & editing
Bottom = Tools, imagery controls and tables

Panels could be shown, hidden, expanded, or collapsed depending on the task.

This allowed one interaction framework to support multiple workflows without creating unnecessary screens.

Progressive disclosure

Instead of showing every available control at once, the system exposes functionality based on the user's current context.

The interface adapts to the task rather than forcing users into a fixed layout.

Property Experience

The property workspace demonstrates the design system most directly.

A property can contain multiple assessment disciplines:

Surface · Roof · Facade · Landscape · Solar · HVAC

Rather than creating completely different interfaces for each discipline, the system uses a shared structure and component language.

For example, the Surface experience combines:

• Property imagery

• Surface Condition Index

• Property metadata

• Measurements

• Inspection information

• Repair budget

• Map annotations

• Location and layout controls

This provides consistency while allowing each discipline to introduce domain-specific information.

Dashboard

The dashboard turns the platform's underlying data into a high-level operational view.

The design uses modular information cards rather than decorative charts.

Key dashboard modules

• Total Properties

• Properties by Condition

• Surface & Roof Assessments Over Time

• Outgoing Assessments

• Assessment Status

• Assessment Type

• Workflow

• Repairs

• Top Repairs

Different visualization patterns communicate different information:

Donut charts → composition
Bar charts → activity over time
Metric cards → status
Lists → operational detail

The card framework was designed to be reusable as new metrics and capabilities were introduced.

Photo Library

Drone imagery is fundamental to the SITE workflow, creating a need for a dedicated image-management experience.

The Photo Library connects imagery to geography.

Users can view:

• Property location and map pins

• Drone imagery

• Capture date

• Image metadata

• Camera information

• Heading and altitude

• Resolution and file size

The thumbnail grid supports rapid visual scanning, while contextual information provides deeper metadata for selected images.

Visual browsing stays simple while detailed information remains one interaction away.

Mapping & Annotation System

The mapping experience required a reusable vocabulary for drawing and annotating properties.

The system supports:

• Points

• Lines

• Shapes

• Boundaries

• Measurements

• Custom pins

• Colors

• Categories

• Labels

• Notes

The annotation model provides a consistent way to define what something is, where it is, and how it should be represented.

This pattern can be reused across pavement, roofing, landscape, and other assessment workflows.

Design System

The component library was organized around the actual behaviors required by the application.

Foundations

• Color

• Typography

• Spacing

• Elevation

• Icons

Core Components

• Buttons

• Inputs

• Select fields

• Tabs

• Cards

• Tables

• Status indicators

• Charts

Mapping Components

• Map toolbar

• Drawing tools

• Shape controls

• Pins

• Layers

• Measurements

• 2D / 3D controls

Patterns

• Contextual panels

• Toolbars

• Filters

• Property information

• Annotation workflows

• Dashboard cards

• Photo grids

This created a foundation that could scale without reinventing the interface for every new feature.

Visual Language

The visual system was intentionally restrained.

Primary CTA

SITE Green — #25A738

Green is primarily used for:

• Primary actions

• Active selections

• Positive status

• Important feedback

Secondary controls use dark neutrals so primary actions remain visually prominent.

Dark Interface

The dark interface reduces visual competition with aerial imagery and keeps the map as the visual focus.

Panels use:

• Translucent dark surfaces

• Subtle borders

• Blur

• Layered elevation

• High-contrast typography

• Minimal decoration

The result is a professional command-center aesthetic without unnecessary visual complexity.

Takeaway

The core challenge was not simply displaying more information. It was making complexity manageable.

The design system organized the experience around:

Maps → Panels → Tools → Data → Imagery → Actions

By establishing reusable patterns for contextual panels, mapping tools, annotations, dashboards, tables, and imagery, the product could expand while maintaining a consistent experience.

Result

A scalable UX foundation that allowed a technically sophisticated commercial property platform to feel focused, visual, and approachable while supporting the depth of information required by property professionals.