SITE Map Design System
SITE Map Design System
A scalable mapping system for property intelligence, imagery, data, and AI-driven workflows.
A scalable mapping system for property intelligence, imagery, data, and AI-driven workflows.
Embedded Files
Product: Commercial Property Mapping & Intelligence Platform
Role: Lead 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
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.
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.
“I designed the system around how users work with property data—not around individual screens.”
“I designed the system around how users work with property data—not around individual screens.”
The Problem
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
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
My Role
I worked across the product to define the UX architecture, interaction patterns, visual language, and reusable component system.
My contributions
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
“The map isn't a feature—it is the workspace.”
“The map isn't a feature—it is the workspace.”
Design
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
Contextual Panels
A key design-system decision was establishing a consistent model for floating contextual panels.
Top: Tools, Notifications
Left : Navigation & property context
Center: Map / primary workspace
Right: Information & editing
Bottom: imagery controls and tables
Top: Tools, Notifications
Left : Navigation & property context
Center: Map / primary workspace
Right: Information & editing
Bottom: 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
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.
“The goal was to make a technically sophisticated platform feel simple, visual, and approachable.”
“The goal was to make a technically sophisticated platform feel simple, visual, and approachable.”
Property Experience
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
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
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
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
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
Design System
The component library was organized around the actual behaviors required by the application.
Color
Color
Brand & UI
Semantic
Grayscale
Charts
Typography
Typography
Page titles
Section headers
Body copy
Labels
Form fields
Error and status messaging
Component Library
Component Library
Buttons
Inputs
Select fields
Tabs
Cards
Tables
Status indicators
Charts
Mapping Components
Mapping Components
Map toolbar
Drawing tools
Shape controls
Pins
Layers
Measurements
2D / 3D controls
This created a foundation that could scale without reinventing the interface for every new feature.
“The strongest design decisions were often about what we chose not to show.”
“The strongest design decisions were often about what we chose not to show.”
Visual Language
Visual Language
The visual system was intentionally restrained.
Primary CTA
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
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.
“A good enterprise design system doesn't hide complexity; it organizes it.”
“A good enterprise design system doesn't hide complexity; it organizes it.”
Takeaway
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
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.
Google Sites
Report abuse