LE Platform · Stage 1 wireframes
01 Workspace
02 New site
03 Site canvas
04 Footprint trace
05 Zone editor
06 Tag palette
07 Tag drop
08 Tag — boiler
09 Tag — PV array
10 Tag — observation
11 Tag list + filters
12 Photo modal
13 Document attach
14 Audit readiness
15 Import / export
Stage 2 →
Stage 1 — Site Tool wireframes
Low-fidelity sketches of every data-entry flow for the Site Tool. Layout, hierarchy, and field shape only — no visual design, no real geometry, no copy-polish. Annotations on the right capture intent and edge cases worth deciding before any pixels get pushed.
Read top-to-bottom in screen order — the flows assume a fresh workspace, then a fresh site, then incremental tagging. Where a screen has multiple states (e.g. tag editor for different subtypes), they're shown as separate screens for clarity.
01
Workspace · Site list
— landing screen when a consultant logs in
app.leisure-energy/workspace Jamie Harris ▾
Sandwell MBC
9 sites · 3 PSDS applications in flight
Switch workspace ▾
+ New site
All sites
PSDS-ready
Survey pending
In delivery
Site Type GIA Audit ready Tags Last visit
Grantham Meres Leisure Centre Lincolnshire · NG31 Wet + dry ~5,400 m² 62% 34 —
Open →
Haden Hill Leisure Centre Wet + dry 5,081 m² 91% 57 14 May
Open →
Hadley Stadium Dry only 6,567 m² 88% 22 09 May
Open →
Tipton Leisure Centre Wet + dry 2,424 m² 76% 41 02 May
Open →
… 5 more
Why multi-site from day one
LE engagements are portfolio-scale (Sandwell = 9, WD = 2).
A workspace = a council / operator. PSDS applications bundle sites within it.
"Audit readiness %" surfaces here so it's the headline metric for sales conversations.
Search + filter chips lazy for v1 — wire them up only when site count > 8.
02
New site · Wizard
— single scrollable form, not a multi-step stepper
workspace / new-site Step: site metadata
Add a new site
Cancel Save & open canvas
Facilities present
Main pool Learner pool Spa / flume
Sports hall ×1 Squash Indoor tennis
Gym Studio ×2 Multipurpose
Sauna / steam Changing village Reception / café
Soft play Athletics track 3G pitches
Outdoor courts Treatment room Meeting rooms
Opening hours
Mon–Fri · 06:30–22:00
Sat–Sun · 08:00–20:00
+ Holiday closures
Planning & documentary history (optional)
Drag PDFs here · or browse · supports planning packs, DEC certs, prior audits
Single form, not a stepper
Most fields are optional for v1. Only name + postcode required.
Facilities chips drive the canonical 21-item zone vocabulary. Cardinality is inline (×1, ×2).
DEC band field bridges to Stage 2 benchmarks (CIBSE TM46 overlay).
Operator field matters later for Stage 4 (different operators have different contract levers).
Document drop on this screen is a shortcut — full doc management lives in screen 13.
03
Site canvas · default state
— main work surface; 3D model centre, tag palette left, tag list right
Sandwell MBC ›
Grantham Meres Leisure Centre
· Stage 1 · Audit readiness 62%
Site info
Export
+ Add tag
Tag palette
▸ Asset / plant 12
▸ Generation 3
▸ Meter 4
▸ Sensor 6
▸ Fabric 2
▸ Operational 1
▸ Planning ref 2
▸ Observation 4
▸ Photo —
Modes
Explore
Tag drop
Walk-through
Layers
☑ Zones ☑ Tags ☐ Roof ☑ Solar PV
☐ Heat readouts ☐ Interior detail
Pool hall · 25m + learner
Sports hall
Gym
Studio ×2
Changing
Reception / café
Boiler 1 (assumed)
Roof 1 · PV (S24-1467)
drag · scroll · click a pin
Tags (34)
All
Assumed
Documented
Verified
… 26 more
Single screen, three rails
Left rail = input palette ; right rail = list / filter ; centre = 3D context .
Pin colour encodes category at-a-glance; confidence is encoded in the right-rail chip.
"Audit readiness 62%" is the headline KPI in the top bar — it's what gets quoted to sales prospects.
Modes are mutually exclusive radio buttons (Explore / Tag drop / Walk-through).
Footer is the persistent provenance strip — last saved, tag-by-confidence breakdown.
04
Footprint trace tool
— one-off engineer task; trace outer envelope from a backdrop PDF
Grantham Meres › Setup ›
Trace footprint
Cancel
Undo last point
Save footprint
Backdrop
S24-2106 · ExternalPodLocationPlan.pdf · pg 2
Change PDF
+ Replace
Scale calibration
Drag along a known dimension on the plan, type metres
10 m = 82 px
Backdrop opacity
Tools
Polygon
Rectangle
Edit vertex
click to add vertex · double-click to close
Footprint
Vertices: 6
Area: ~5,420 m²
Perimeter: ~310 m
Closed: yes
Vertex list
1 · (-35.0, -21.0)
2 · ( 35.0, -21.0)
3 · ( 35.0, -1.5)
4 · ( 35.0, 21.0)
5 · (-35.0, 21.0)
6 · (-35.0, -21.0)
Calibration is the trap
Backdrop must be scale-calibrated before tracing — drag along a known dimension, type metres.
Vertex list mirrors the canvas; either is editable. Power-users prefer the list for clean polygons.
For v1, only one footprint per site. Multi-building campuses (e.g. Hadley Stadium + 3G pitches) come later.
Save writes footprint: Vec2[] straight into the site record.
05
Zone editor
— add zones inside the footprint, one per facility from the chip list
Grantham Meres › Setup ›
Zones (5 of ~9 expected)
Skip — finish later
Done with zones
Add zone
Kind
Pool hall (wet) Sports hall Gym Studio … Count
Optional water bodies inside
25m main pool
Learner pool
Spa / hot tub
Flume splash
Height (m)
Draw polygon Rectangle
Pool hall (drawing…)
Sports hall
Gym
Studio ×2
Changing village
main pool 21×11
learner 8×6
drawing pool hall · 3 of 4 vertices
Zones so far
Pool hall · 25m + learner · 7.5m h
Sports hall · ×1 · 9m h
Gym · 3.8m h
Studio ×2 · 3.5m h
Changing village · 3.2m h
Expected · not yet drawn
Reception / café
Sauna / steam
Plant room
External pod (S24-2106)
Zone editor = "fill in the blanks"
The "Expected · not yet drawn" list is generated from the facilities chips on screen 02. It's how a consultant knows what's still missing.
Wet zones get a water-body sub-chip set (main / learner / spa / flume) so each pool is an addressable object for Stage 4 ECMs.
Cardinality (Studio ×2) keeps the model honest — one zone record with count: 2, not two duplicates.
External structures (pod, athletics track) are valid zones — they live outside the footprint outline.
06
Tag palette · category expanded
— pick a subtype before dropping
Grantham Meres › Tag drop ·
Category: Asset / plant
Cancel
Tag palette
▾ Asset / plant
Gas boiler
Pool AHU / dehumidifier
Pool plate HX
Pool circ pump
LTHW pump
DHW calorifier
CHP unit
BEMS
Lighting circuit
Andrews water heater
HRU
Pool cover
+ custom asset…
▸ Generation
▸ Meter
▸ Sensor
▸ Fabric
▸ Operational
▸ Planning ref
▸ Observation
▸ Photo
Pool hall
Sports hall
Gym
Studio ×2
Changing
Reception
Plant room
click anywhere to drop Gas boiler · esc to cancel
About: Gas boiler
Recommended fields:
Make · Model
Capacity kW
Fuel · NG / LPG / oil
Install year
Serial
Condition 1–5
Photos: nameplate, plant-room shot
Triggers Stage-4 applicability for: ASHP , Insulation: plant room , BEMS upgrade .
Palette teaches the user what to capture
Right rail flips from tag-list to "About this subtype" the moment the user picks one — shows expected fields and what Stage-4 ECMs the tag unlocks.
Subtypes match LE's actual vocabulary (boiler, AHU, plate HX, calorifier, CHP, HRU, plus brand-specific Andrews water heater).
"+ custom asset…" is the escape hatch so we don't have to be exhaustive on day one.
07
Tag drop · active
— click in scene; raycast picks zone; ghost preview
Tag drop · Asset · Gas boiler
Esc to cancel
Palette (dimmed while dropping)
Plant room
Pool hall
Sports hall
Gym
Studio ×2
Changing
Reception
+ Gas boiler · in Plant room
Pre-fill
Label · "Gas boiler 1"
Zone · Plant room (auto)
Confidence · Assumed
Status · Active
Click to drop. The editor (screen 08) opens immediately on the right with these defaults.
Defaults > forms
The moment you click, zone is auto-resolved, label is auto-numbered ("Gas boiler 1" → next click is "Gas boiler 2"), confidence defaults to assumed.
This is the difference between "10 clicks to add a boiler" and "1 click + skip everything sensible". Consultants need the second.
Free-place modifier (⌥) for things that don't snap to any zone (e.g. external meters).
08
Tag editor · gas boiler (asset)
— inline side panel; per-subtype recommended fields, free-form bag still allowed
Gas boiler · in Plant room edited · unsaved
Confidence · Assumed ▾
Status · Active ▾
Photos
+ nameplate
+ visual
+ thermal
Relationships
supplies → Pool hall LTHW manifold ✕
measured by → Gas MPRN (main) ✕
references → + link a tag or document…
Notes
Stage-4 hints (read-only)
This tag unlocks ECM applicability for: ASHP , Insulation: plant room , BEMS upgrade . If install year < 2010, also End-of-life replacement .
One form per subtype, but the bag is open
Recommended fields are the most-asked questions per subtype — not a schema lock.
Confidence chip is the first thing the surveyor changes on a site visit: "Assumed → Verified".
Relationships are first-class — boiler → supplies what, measured by which meter. Stage 2 needs the measured by link to allocate kWh.
The "Stage-4 hints" disclosure shows the consultant why they're capturing this — a small visible payoff.
09
Tag editor · PV array (generation)
— captures Grantham's three approved roof arrays from S24-1467
PV Roof 1 · external (above Pool hall) edited · unsaved
Confidence · Documented ▾ from S24-1467
Status · Proposed ▾
Linked planning reference
S24-1467 · Solar PV (approved Oct 2024)
StringDesignReport.pdf
Roof1_PanelLayout.pdf
DecisionNotice.pdf
+ link another doc
Notes
Planning packs are gold dust
Confidence auto-sets to documented because the source is a planning approval pack — not a guess.
The "linked planning reference" surfaces all PDFs in S24-1467 so the consultant can drill in instantly during a sales call.
Status defaults to proposed for newly-approved-but-not-yet-installed PV; flips to active after commissioning.
Three of these tags (Roof 1/2/3) get pre-seeded automatically when the user drops the S24-1467 planning ref onto the site.
10
Tag editor · observation + thermal photo
— free-form note; becomes a Stage-4 ECM seed
Observation · in Pool hall new
Confidence · Verified-on-site ▾
Status · Active ▾
Severity · Medium ▾
Notes
Photos
visual
visual
+ add photo
Suggested ECM seeds
→ Insulation: plant room / fabric sealing Promote to project
→ Thermal bridge treatment Promote to project
Observations bleed into Stage 4
Observation tags are the lightweight way to capture "needs attention" without committing to a project yet.
"Suggested ECM seeds" is the bridge to Stage 4 — promote button creates a draft ECMProject linked to this tag.
Thermal photo type renders with a coloured thumbnail and captures ambient °C — needed for accurate read of the thermal scale.
Severity chip helps the consultant triage which observations to surface in the audit-readiness exports.
11
Tag list · filters & bulk ops
— power-user view; alternative to scrolling the 3D model
Tags · 34 of 34 Filter / bulk-edit view
All
Asset
Generation
Meter
Sensor
Fabric
Operational
Planning ref
Observation
2 selected →
Bulk edit
Delete
Confidence · any ▾
Status · any ▾
Zone · any ▾
Has photos
Linked to planning ref
☐ Label Category Subtype
Zone Conf. Photos Last updated
☑
Asset gas-boiler
Plant room Assumed 0 2 min ago
☑
Asset gas-boiler
Plant room Assumed 0 1 min ago
☐
Generation pv-array
External Documented 2 14 May
☐
Meter mprn-main
Plant room Assumed 0 14 May
☐
Observation fabric-defect
Pool hall Verified 3 just now
☐
Sensor rh-sensor
Pool hall Documented 1 14 May
… 28 more
Two views of the same data
3D canvas is for spatial reasoning; this table is for housekeeping — bulk re-classify, find missing photos, change confidence en masse after a site visit.
Filter chips compose. "Asset + Assumed + no photos" is the typical pre-visit checklist a surveyor pulls.
Selecting rows highlights the corresponding pins back in the 3D canvas (cross-view linking).
12
Photo upload modal
— attach to a tag; supports thermal type with ambient temp
Add photos to "Thermal bridging at pool roof beams"
✕
Drag photos here · or browse filesJPG / PNG / HEIC · multi-select supported
Per-photo metadata
Cancel
Attach 2 photos
Thermal photo capture
"Type" selector is the only thing that matters: thermal photos render with their colour scale preserved and an ambient °C label in reports.
EXIF capture timestamp auto-fills; ambient temp is manual (the camera doesn't know).
Storage: DataURL in localStorage for v1 (fine up to ~50 photos / site). Upgrade path: IndexedDB → Supabase storage at Stage 2/3 boundary.
13
Document attach & planning-ref linker
— drop a planning pack; auto-detect refs; pin to site or tag
Documents · Grantham Meres 12 attached
Drag PDFs / folders here · or browse
Recently attached
File Detected ref Linked to Pages
S24-1467 / DecisionNotice.pdf
S24-1467 planning approvalSite · Roof 2
Open
S24-1467 / StringDesignReport.pdf
S24-1467 PV Roof 1, 2, 3 34
Open
S24-1467 / Roof1_PanelLayout.pdf
S24-1467 PV Roof 1 1
Open
S24-2106 / ExternalPodLocationPlan.pdf
S24-2106 external podExternal pod 1
Open
DEC_2023.pdf
DEC certificate Site metadata 4
Open
⚠ MEP_Drawings_2008.dwg
—
—
—
Unsupported
Bulk link to tag
Pick a tag… Link selected (3)
Doc store with smart routing
Drop a whole planning folder; the platform infers the application ref from filenames + auto-suggests links to existing tags.
DEC certificate routes to site metadata rather than a tag — it's a site-level artefact.
Unsupported formats (.dwg) are flagged but stored, not rejected. Useful for "we have the CAD somewhere".
Linking N docs to a tag is bulk-able from this view.
14
Audit readiness & printable surveyor checklist
— the "is the model complete?" view and its paper-fallback export
Audit readiness · Grantham Meres Download printable checklist (PDF)
62%
site model complete
Zones 9 of 10 · 90%
Assets / plant 11 of 20 · 55%
Generation 3 of 3 · 100%
Meters 3 of 4 · 75%
Sensors 2 of 6 · 30%
Fabric 1 of 5 · 20%
Operational 1 of 4 · 25%
Missing — high priority
Surveyor checklist preview
Surveyor checklist · Grantham Meres Leisure Centre
Generated 21 May 2026 · 34 tags · 8 expected items pending
Plant room — confirm or correct
Pool hall — fabric & sensors
Lighting
Meters
Single number, but show the working
"62%" is the sales-meeting number; the breakdown beneath is the work-planning number.
Expected-tag counts are templated per facility type — a wet site expects pool plate HX, dehum AHU, pool water sensor; a dry site doesn't.
Printable checklist is the surveyor's paper fallback when the tablet dies in the plant room. Groups by zone, then by category — same order they'll walk through.
PDF export uses LE house style (header + footer with Banbury Road / "Sustainable savings" wordmark).
15
JSON import / export
— hand the site to a surveyor's device; receive it back updated
Move site between devices
✕
Export
Import
What to include
☑ Site metadata (name, address, facilities, hours)
☑ Zones (5)
☑ Tags (34)
☑ Documents (12 PDFs · 31 MB)
☑ Photos inline as DataURLs (8 · 2.4 MB)
Format
● Single .json file (recommended)
○ .zip bundle (json + photos + linked PDFs as separate files)
{
Copy to clipboard
Download grantham-meres.json
The handoff format
JSON is the universal handoff — surveyor's tablet imports, edits offline, exports back, consultant merges.
v1 includes photos inline (DataURLs). Past ~50 photos / site the zip-bundle option kicks in.
schemaVersion: 1 is non-negotiable — version every export from day one so future schema changes can be migrated.Documents are referenced by path, not embedded by default — the consultant maintains the doc store separately.
Stage 1 wireframes · 15 screens · low-fidelity · for review & markup