How I’m Approaching UX Design

21 May, 2025

A friendly brain-dump with footnotes, fit for planners and design nerds.

Designing planning software is like hosting a town-hall meeting on a moving bus: everyone’s arguing, the scenery keeps changing, and nobody can find the microphone. Good interface design hands out seatbelts, a map, and a working PA system before anyone crashes.

Below is the backbone behind the nine modes in The Planner’s Assistant—an attempt to weld solid UX craft to public-law realities without making either unreadable.

1 Keep brains above water → Cognitive-Load Theory

Planning officers juggle statute, spatial data, local politics, and a deadline that says “yesterday.” Sweller (1988) reminds us working memory is tiny; every extra click or half-hidden panel burns it. Design move: One mode per mental task. No split-screen scavenger hunts.

2 Show cause & effect → Direct Manipulation

Shneiderman (1982): users trust what they can poke and instantly see change. Design move: tweak a policy threshold → see goal bars nudge; drag a site out of Scenario A → risk flags update live. The tool feels less like a black box, more like a drafting table with built-in electricity.

3 Let clues do the steering → Information Scent

Pirolli & Card (1999) say good labels act like “bread-crumb pheromones.” Design move: policy chips carry refs (“DM11, Flood Risk”), conflict icons use colour + shape, hover cards preview impact. Officers know where the next useful click lives.

4 Reveal depth, don’t dump it → Progressive Disclosure

Cooper et al. (2007): first the summary, then the fine print. Design move: a site opens with big green/red badges; click for constraint layers; expand again for raw flood-zone polygons. Complexity on tap, not in your lap.

5 Make it obvious what’s editable → Affordances & Signifiers

Norman (2013): if something can be changed, signal it; if it can break things, warn first. Design move: AI text sits in a dashed outline labelled “Suggested—edit or ignore.” Legal musts wear lock icons; soft nudges wear pencils. Less panic, fewer accidents.

6 Tie it to planning reality → Discretion & Procedural Justice

Tyler (1990) and Forester (1989) show people swallow tough calls if they can trace the logic. English planning law adds “structured discretion” (Booth 2003): officers may balance policies—must explain how. Design move: every recommendation carries a clickable chain: policy → constraint → weighting → outcome. No invisible judgement calls.

7 Respect how bodies think → Phenomenology

Merleau-Ponty (1962) + Dreyfus (2002): reasoning lives in bodies, screens, post-its, coffee cups. Break the physical flow and you break cognition. Design move: arrange each mode like a real desk setup—central workspace, quick-reach sidebars, no teleporting dialogue boxes.

8 Expose the plumbing before it leaks → Infrastructure Studies

Star & Ruhleder (1996) warn that hidden pipes only show up when they burst. Design move: dataset badges show source + last update; AI calls log model version; offline fallbacks shout when they’re in use. Problems surface early, not in court.

9 Remember interfaces write the house rules → Institutional Theory

March & Olsen (1989): routines script behaviour. UI defaults quietly become policy. Design move: nine modes act as “decision grammars”—each one a bounded stage for a specific judgment (Policy, Site, Scenario, Goal, Document; plus DM modes). Layout nudges practice without dictating it.

Quick map of the modes

So what?

Good UX isn’t lipstick on a planning workflow; it’s part of the regulatory fabric. Blend design craft with public-law ethics, and you get software that helps officers think, applicants understand, and inspectors audit—without anybody drowning in modal windows or academic fog.

Pocket bibliography (in less than 30 words)

Sweller 1988 • Shneiderman 1982 • Pirolli & Card 1999 • Cooper 2007 • Norman 2013 • Tyler 1990 • Forester 1989 • Merleau-Ponty 1962 • Dreyfus 2002 • Simon 1947 • Star & Ruhleder 1996 • March & Olsen 1989 • Booth 2003

This document outlines two primary workspaces within a planning software: one for Plan-Making and another for Development Management (DM). Each workspace is comprised of distinct modes designed to support specific planner workflows and thought processes.

Plan-Making Workspace

This workspace focuses on the creation, review, and assessment of planning policies and site allocations. It encompasses five key modes: Policy Mode, Site Allocation Mode, Scenario Mode, Goal Tracker Mode, and Document Mode.

🧾 MODE 1 — POLICY MODE

This mode is designed for writing or reviewing planning policies, understanding their context within the wider document, their on-the-ground impact, and their legal soundness.

🧠 Planner Thought Process in This Mode:

• "I’ve been asked to rewrite Policy H2 — I need to know what it says, how it fits with H1 and DM15, and what sites it affects."
• "I’m drafting a new energy policy. I need to make sure it doesn’t conflict with our employment allocations."
• "An inspector flagged inconsistency. I need to find which policies relate to this one and rewrite accordingly."

This mode enables planners to write with spatial, strategic, and legal awareness without leaving the drafting context. It functions as a "plan-writing cockpit," providing tools for deliberate, defensible, and impact-aware text creation within a professional setting.

🧱 LAYOUT OVERVIEW (3-Zone Layout)

• 🟨 1. Left Sidebar: Policy Navigator
  • This persistent panel allows policy selection across all planning modes.
  • Primary functions:
    • Browse all policies in the active Local Plan (and optionally linked SPDs).
    • Group policies by section or theme (e.g., Housing, Economy, Environment).
    • Clearly label policies with reference (e.g., H2), status (Draft / Adopted / Consultation), and type (Strategic, DM, SPD).
    • Include a filter/search bar to directly jump to a policy.
    • Allow toggling between documents (e.g., Local Plan, Design Guide).
  • Interaction behaviour:
    • Selecting a policy loads its detail view in the main editor.
    • The current selection is highlighted.
    • Can optionally preview conflicts/impacts on hover or in a popout.
• 🟨 2. Central Panel: Policy Workspace
  • This is the focused drafting and reasoning zone, designed to feel like a drafting desk with clarity and uninterrupted focus.
  • Top section:
    • Displays policy title and reference number.
    • Allows editing of status, version/date, and author notes.
  • Main body:
    • Features a rich text (or structured markdown) editor for policy wording.
    • Includes inline, non-intrusive guidance boxes where AI offers suggestions regarding potential ambiguities, missing thresholds, conflicting policy language, and rephrasing based on precedent or NPPF phrasing.
  • Lower section (beneath editor):
    • Provides an optional, editable "Supporting Text" field.
    • Includes a notes section for internal use (e.g., officer justification, legal concerns).
    • Features a save status indicator (auto-save or manual save with versioning).
• 🟨 3. Right Sidebar: Policy Impact & Integrity Panel
  • This region shows the real-world consequences and interactions of the selected policy. It is divided into three stacked sub-panels.
  • A. Conflict & Linkage Panel:
    • Highlights policies that directly contradict, overlap with (redundant or duplicated content), reference, or are referenced by the current policy.
    • Shows the relationship type (e.g., SUPPORTS, CONFLICTS_WITH, REFERENCES).
    • Clicking a linked policy opens a side preview or navigates to that policy.
  • B. Site Allocation Impact Summary:
    • Lists (or maps) any allocations the policy would affect (e.g., "20 sites require affordable housing contributions," "This policy applies to sites in flood zone 3").
    • Each site name is clickable to view in context (opens in modal or new mode).
    • Shows the impact type (Enables / Restricts / Conditions development).
  • C. Strategic Goal Alignment:
    • Uses visual indicators to show which high-level plan goals are supported (e.g., 🟢 Supports Housing Delivery (Target: 800 dpa), 🟡 Partially aligns with Net Zero (missing standards), 🔴 Undermines Economic Growth Objective).
    • These indicators are read-only in Policy Mode but help frame the policy’s contribution to the overall strategy.

🧭 Summary of Policy Mode Layout

🗺️ MODE 2 — SITE ALLOCATION MODE

This mode is for reviewing or assessing a site for possible allocation in the Local Plan. It helps understand constraints, applicable policies, contribution to goals, and whether the site is sound and deliverable. It is an allocation reasoning environment, not just a mapping tool.

🧠 User Mental Model / Planner Thought Process in This Mode:
This mode supports a site-based evaluation workflow.

• "Is this site suitable for development?"
• "I need to assess this site for potential housing allocation."
• "What constraints apply here?"
• "Does it clash with our flood policies?"
• "Does it meet the requirements of our policies?"
• "Can it deliver enough affordable homes to help meet our target?"
• "What would it deliver toward our plan objectives?"
• "Can I justify including or rejecting this site?"
• "Will the inspector accept it as sound?"
• "What’s the justification if I include (or exclude) it?"

This is a decision-support interface for professionals performing high-stakes inclusion/exclusion work. This mode mirrors physical site assessment sheets but enhances them with live spatial data, linked policy requirements, and cross-checking against strategic objectives in one view.

🧱 LAYOUT OVERVIEW (3-Zone Layout)

• 🟨 1. Left Sidebar: Site Navigator
  • This is the site selection and classification panel.
  • Primary functions:
    • Browse sites under consideration (SHLAA / call-for-sites / strategic proposals).
    • Group sites by type (Housing, Employment, Mixed Use) or by source (submitted, strategic, officer-generated).
    • Label sites with reference (e.g., SA22), status (Considered / Draft Allocation / Rejected), and submission type (Promoted, Previously Allocated, etc.).
    • Filter/search by name or reference, size (hectares), proposed use, or planning history.
  • Interaction behaviour:
    • Selecting a site loads it into the central map/context view.
    • The sidebar updates to show metadata (e.g., area, parish, submission date).
• 🟨 2. Central Panel: Site Context View
  • This is a map-first spatial understanding zone, with optional tabbed overlays.
  • Upper half (map):
    • An interactive map zoomed to the selected site boundary.
    • Layer overlays for key constraints (e.g., Flood Zones, Green Belt, Heritage Assets).
    • The site outline is shown clearly, possibly with submitted boundary vs. modified one.
    • Hovering shows constraint layers; clicking may open details.
  • Lower half (optional tabs beneath map):
    • Policy Requirements Tab:
      • Shows which policies apply to this site (automatically resolved).
      • Each policy shows relevant extracted requirements (e.g., “35% affordable housing”, “zero-carbon construction”).
      • Highlights conflicts or cumulative burden.
    • Allocation Draft Tab:
      • Editable text for officer justification (e.g., reasons for allocation or rejection).
      • Suggested policy references are auto-linked.
      • AI draft justification is optionally provided (e.g., “This site is suitable subject to X, Y, Z…”).
• 🟨 3. Right Sidebar: Deliverability & Soundness Panel
  • This shows whether the site is legally, practically, and politically acceptable.
  • Top section: Strategic Goal Contribution:
    • Badges or bar indicators show how the site contributes to strategic aims: Housing delivery 🏘️, Climate resilience 🌍, Employment land 💼, Social infrastructure 🧑‍🤝‍🧑.
  • Middle section: Deliverability Assessment:
    • Officer-scored or AI-suggested metrics for access to road network, infrastructure readiness, landowner intention, and market demand.
    • Scored 1–10, with an optional confidence indicator.
  • Bottom section: Soundness & Legal Checks:
    • Flags for Reg 18/19/NPPF criteria: Environmental impacts considered? Sustainable development rationale? Not in contradiction with national policy?
    • Traffic light indicators (🟢🟡🔴) with expandable rationale.

🧭 Summary of Site Allocation Mode Layout

🧪 MODE 3 — SCENARIO MODE

This mode allows testing the implications of different site and policy combinations across the whole plan. It helps compare trade-offs, risks, and goal delivery under each scenario. This is not just data modelling, but plan storytelling, trade-off analysis, and inspector preparation. Unlike Policy and Site modes, Scenario Mode is deliberately non-editable. It reflects saved states from earlier work and frames them comparatively to support decision-making and justification.

🧠 User Mental Model / Planner Thought Process in This Mode:
This mode supports strategic testing and iteration.

• "What happens if we include the Green Belt sites?"
• "I want to compare different allocation bundles and policy configurations."
• "Does removing Policy H4 make the plan unsound?"
• "How do our Reg 19 consultation changes affect housing delivery?"
• "Can I show members that Scenario B is more balanced than Scenario A?"
• "Can I get political sign-off on a more ambitious scenario?"
• "Are we technically sound under each option?"
• "What narrative do I present to the inspector or members?"

This mode helps planners balance technical, political, and strategic concerns using clearly surfaced evidence and structured trade-off displays.

🧱 LAYOUT OVERVIEW (3-Zone Layout)

• 🟨 1. Left Sidebar: Scenario Switcher & Controls
  • This panel allows scenario selection and configuration.
  • Top section:
    • List of saved scenarios (e.g., “Baseline”, “Green Belt Release”, “Viability-Adjusted”, “Max Growth”).
    • Options to add a new scenario, duplicate, rename, or delete.
  • Middle section:
    • Summary tags for each scenario: # Allocated sites 🧱, # Active policies 📘, Goals met (e.g., “3/5”) 🎯.
  • Bottom section:
    • “Scenario Diff” toggle to compare to baseline.
    • Save snapshot (for inspection submission or plan review).
  • Selecting a scenario switches the entire central and right panels to reflect its outputs.
• 🟨 2. Central Panel: Scenario Dashboard
  • This is a plan-wide status view, replacing granular detail with a strategic overview. Everything here is read-only; editing is done in Policy or Site modes and reflected here.
  • Top widgets (in responsive grid):
    • Total projected homes delivered 📊.
    • Jobs enabled (sqm of employment land) 💼.
    • Infrastructure need vs capacity 🏗️.
    • Risk flags (number of red/amber warnings) ⚠️.
    • Trade-Off Index (summary score of balance) ⚖️.
  • Middle section: Theme-based heatmaps or diagrams:
    • e.g., Housing vs Heritage vs Biodiversity (venn or stacked bar).
    • Visual trade-off matrix with hover-to-expand details.
  • Lower section (if selected):
    • Sites included/excluded: “This scenario drops 5 sites from East Zone”.
    • Policy changes: “Policy DM14 disabled; H6 threshold lowered to 25%”.
• 🟨 3. Right Sidebar: Goal Evaluation & Risks
  • This region shows plan soundness and strategic performance for the selected scenario.
  • Top section:
    • Each major goal has an icon + status bar (e.g., 🟢 Housing Delivery: 94%, 🟡 Net Zero: partial, 🔴 Employment: undersupply).
  • Middle section: Soundness Flags (linked to Reg 19, NPPF, SEA):
    • Insufficient Gypsy & Traveller provision.
    • Employment strategy not spatially justified.
    • No brownfield-first justification.
  • Bottom section: AI-suggested commentary:
    • “Scenario C reduces risk of legal challenge but may underdeliver housing.”
    • “Consider policy bundling to offset DM12 impact.”

🧭 Summary of Scenario Mode Layout

🎯 MODE 4 — GOAL TRACKER MODE

This mode helps understand how well the draft plan supports strategic objectives and which sites or policies are helping or undermining each one. It shifts attention from units of the plan (site/policy) to the public-good goals the plan is supposed to achieve. This mode provides a structured, live view of strategic alignment, turning the plan from a text document into a system of measurable intent.

🧠 User Mental Model / Planner Thought Process in This Mode:
This mode supports outcome-focused reflection.

• "Are we delivering our housing target?"
• "I need to justify that we’re meeting our key objectives."
• "How far are we from net zero compliance?"
• "What’s blocking our housing target?"
• "Which policies are critical for protecting biodiversity?"
• "Can I trace this biodiversity goal back to actual delivery?"
• "Can I prove to the inspector that our strategy is coherent?"
• "Which policies or sites are helping — and which are harming?"

This mode creates a line of sight from abstract goals to tangible plan content, giving planners tools to report, argue, and defend the plan's logic.

🧱 LAYOUT OVERVIEW (3-Zone Layout)

• 🟨 1. Left Sidebar: Goal List & Filters
  • This panel organises and surfaces all strategic goals defined in the plan.
  • Structure:
    • Categorised goal list (e.g., Housing 🏘️, Climate & Environment 🌍, Economy 💼).
    • Example goals: “Deliver 8,000 homes by 2040”, “35% affordable homes borough-wide”, “Carbon-neutral new builds from 2025”, “Protect SSSIs and Ancient Woodland”, “Enable 15 hectares of B1/B2 employment land”, “Support high street vitality”.
    • Each goal listing includes a status indicator (🟢 On track / 🟡 Partial / 🔴 Failing), quantified metric (e.g., 6,400/8,000 homes), and type (Legal | Policy | Monitoring | Political).
  • Interactions:
    • Selecting a goal loads its detail view into the central panel.
    • Search/filter by keyword or tag (e.g., “net zero”, “transport”).
• 🟨 2. Central Panel: Goal Detail View
  • This panel shows how the goal is being met, with links back to the plan’s content.
  • Top summary:
    • Goal wording, target metric + units, source (e.g., NPPF §60, Corporate Plan 2023, Local Plan Vision), and status breakdown (achieved / projected / remaining).
  • Main body:
    • Contributing Policies: Lists policies that explicitly support the goal, highlighting whether each is adopted, draft, or missing key mechanisms. Conflict indicators show if any undermine the goal.
    • Contributing Sites: Shows allocations that deliver the objective with expected contribution (e.g., 120 homes from SA11), sorted by delivery confidence (soundness, viability, timing).
    • Scenario Comparisons: Compact table or graph showing this goal’s performance across scenarios (e.g., “Scenario A: 88% | Scenario B: 102% | Scenario C: 64%”).
  • Optional add-ons:
    • AI-detected risks (e.g., “Policy DM18 uses weak language — target may be missed”).
    • Past delivery rate trends (if historical data integrated).
• 🟨 3. Right Sidebar: Cross-Cutting Insights
  • This panel helps situate each goal in relation to others and the wider plan structure.
  • Top section:
    • Related goals (e.g., Housing ↔ Infrastructure ↔ Social Inclusion).
    • Optional visual web of connected goals and tensions (interactive graph).
  • Middle section: Potential risks / unresolved dependencies:
    • “Affordable housing contribution undermined by viability assessments”.
    • “Goal conflicts with proposed Green Belt changes”.
  • Bottom section: Exportable summary (for use in plan appendices or consultation reports):
    • “Goal H1 is partially met under current draft. Housing delivery shortfall of 800 units projected under baseline scenario.”

🧭 Summary of Goal Tracker Mode Layout

📄 MODE 5 — DOCUMENT MODE

This mode supports assembling, structuring, and preparing the full Local Plan (and related documents) for consultation, inspection, or publication. The emphasis is on structure, completeness, and clarity, not drafting new policy from scratch. Document Mode is the final stitching layer, ensuring the whole plan reads as one coherent instrument.

🧠 User Mental Model / Planner Thought Process in This Mode:
This mode supports document production and packaging.

• "I want to see the whole Local Plan as one coherent document."
• "Is the structure of our plan clear and logical?"
• "Where does this policy sit within the structure?"
• "Have we completed every section?"
• "Can I export the plan for Reg 19 consultation?"
• "Do all citations and terms link somewhere?"
• "Have I linked all the required sections, appendices, maps, and glossary items?"
• "Can I export this version for consultation or upload to the Planning Portal?"

This mode brings together outputs from all other modes into a public-facing, legally coherent document.

🧱 LAYOUT OVERVIEW (3-Zone Layout)

• 🟨 1. Left Sidebar: Document Navigator
  • Allows navigation through the hierarchical structure of the Local Plan and related documents.
  • Top section:
    • Document selector (e.g., Local Plan 2025, Sustainability Appraisal, Design Code, Proposals Map).
    • Option to create a new document or import from a template.
  • Middle section: Expandable tree view of document structure:
    • Shows chapters, subchapters, policies, maps, appendices (e.g., ▸ 1. Introduction, ▸ 2. Vision & Objectives, ▾ 3. Housing (• H1: Housing Mix, • H2: Affordable Housing), ▸ 4. Employment, ▸ 5. Monitoring & Delivery).
    • Each node shows title + type (chapter, policy, appendix) and an icon/marker for missing content or unresolved issues (⚠️).
  • Bottom section:
    • Search within structure.
    • Drag-and-drop to reorganise sections (if enabled).
• 🟨 2. Central Panel: Document Editor
  • This is the focused display of the selected document section, optimised for clarity and structure.
  • Header:
    • Breadcrumb showing location in hierarchy (e.g., Local Plan > 3. Housing > H2: Affordable Housing).
    • Last modified timestamp and author (for internal tracking).
  • Main body: Rich-text or markdown rendering of the section:
    • Key fields: Section title, Policy ref (if applicable), Full text (policy or narrative), Supporting graphics or images, Linked footnotes, references, legal clauses.
    • Glossary terms and cross-references are underlined and interactive.
  • Editor modes:
    • View / Edit toggle (planner can switch).
    • Comment-only toggle (for team feedback or inspector queries).
• 🟨 3. Right Sidebar: Integrity, References & Export Tools
  • This panel provides meta insight into document status and cross-links, focusing on chapters, completeness, versioning, and public readability.
  • Top section: Unresolved Issues in this section:
    • Missing policy metadata, unlinked site references, undocumented use of glossary terms, policy conflicts not yet resolved.
  • Middle section: Linked Entities:
    • Policies referenced in this section, sites cited or impacted, national policy paragraphs cited (e.g., NPPF §60), related SPDs or maps.
  • Bottom section: Export Options:
    • Generate PDF or DOCX of the full document or section.
    • Export structured XML or JSON for legal submission.
    • Snapshot for consultation portal (Reg 18/19).

🧭 Summary of Document Mode Layout

Summary of Plan-Making Modes

---

🧑‍⚖️ DEVELOPMENT MANAGEMENT (DM) MODES

This workspace shifts emphasis from plan-making to application assessment, precedent analysis, and case reporting. It is designed to help planning officers answer: “Does this proposal comply with our policies and spatial constraints, and how should we justify our decision?”. This structure aligns with how case officers think, focusing on grounded judgement, justification, and documentation.

Four high-impact modes are defined within the DM workspace: Site Assessment Mode, Reasoning Mode, Precedent Review Mode, and Report Generation Mode.

1. 📍 Site Assessment Mode

This mode is used when a planning application is received or a site is selected, to see all constraints and relevant policies that apply.

🧠 Planner Thought Process:

• "What’s the planning context of this site?"
• "Do constraints or designations immediately affect acceptability?"
• "What policies do I need to consider for this assessment?"

🧱 Layout Overview

2. 🤔 Reasoning Mode

This mode helps understand how relevant policies interact in a specific case and how to structure planning judgement.

🧠 Planner Thought Process:

• "What’s the planning balance here?"
• "Where do policies align or contradict?"
• "How do I justify a discretionary decision under competing priorities?"

🧱 Layout Overview

3. 🗂️ Precedent Review Mode

This mode allows checking how similar cases have been handled previously by the user's authority or the Planning Inspectorate.

🧠 Planner Thought Process:

• "Have we allowed similar schemes before?"
• "What did the inspector say in a similar case?"
• "Can I cite this precedent to support/refute the proposal?"

🧱 Layout Overview

4. 📝 Report Generation Mode

This mode is for summarising the assessment and writing a structured officer report.

🧠 Planner Thought Process:

• "How do I clearly document and justify my recommendation?"
• "Can I show that I’ve considered all relevant material?"
• "Will this report stand up to legal challenge or appeal?"

🧱 Layout Overview

✅ Summary: DM Workspace Modes