Case Study 01 · AI in Action

MetricHub

Using AI to accelerate product design for project change control.

On a 4-month delivery window for the National Highways MetricHub change-control interface, traditional UI design would have absorbed 3–4 weeks before any code was written. AI compressed early design thinking to 2–3 days — letting stakeholders react to a tangible product before development started, and improving the direction the team built towards.

PowerApps SharePoint Power Automate M365 Copilot

~4 wks → 2–3 days

Design phase compression

4 months

End-to-end delivery window

3 UI variants

Per page · NH brand-aligned

Scope extended

Client expanded engagement

01 · The 30-Second Story

Why This Exists

National Highways needed a real PowerApps change-control interface — not a SharePoint form — inside a 4-month window. The classical design path would have taken weeks. AI was used as a design acceleration partner: rapidly exploring user journeys, screen layouts and stakeholder-facing prototypes so decisions happened on tangible options, not on abstract requirements.

Team

Tim Williams (R) · Ashish Ranjan · Iona Hobbs

Project context

National Highways · MetricHub change-control interface · 4-month delivery window.

Problem

Build a real app, not a form, in 4 months — with stakeholder-grade design clarity before development started.

Users

Project controls · change managers · commercial teams · PMO users · project leadership.

AI role

Concept-to-flow translation · multi-option design generation · brand-consistent styling · contextual build guidance.

Non-AI role

PowerApps configuration · data modelling · workflow logic · approval flows · UAT.

Main value

Faster concept development · earlier stakeholder alignment · reduced rework · scope extended by the client.

Evidence

Design phase ~4 weeks → 2–3 days · 3 UI variants per page · client extended engagement post-delivery. Proven · delivered Time-saving basis to confirm

Status

Delivered. PowerApps app live for change-control workflow. Live

Reusable pattern

AI-assisted product discovery + curation for low-code apps under tight delivery windows.

02 · Project Context

Why This Mattered on National Highways

MetricHub is the National Highways single source of truth for KPIs and PIs. The change-control interface had to feel like a proper application — submit, route, approve a metric change, log everything, and report cleanly to leadership. Inside a 4-month window, that left no margin for slow design.

What the app needed to do

Why it mattered to the client

Submit, route, approve

Full lifecycle for metric change requests against the central MetricHub.

Log every change

SharePoint-based change-control log capturing the full audit trail.

Report automatically

Combine live metric data with historical change logs into stakeholder reports.

Feel like an app

Not a form-based tool — a properly designed UI experience that users would actually use.

Why this is a delivery story, not a tools story

A typical UI/UX design phase using Figma would have taken 3–4 weeks upfront — and still produced multiple revision cycles after development began. Inside a 4-month window, that left no margin for build, test, and stakeholder iteration. The right question wasn't "which design tool?" — it was "how do we get stakeholders reacting to real screens this week?"

03 · The Problem

Time, Capacity, and Stakeholder Confidence

Three constraints compounded — and the standard design path couldn't satisfy all three at once.

Problem 1 — Time

4 months end-to-end. Manual design alone would have eaten a quarter of the window before any working code existed.

Problem 2 — Design capacity

Limited dedicated design resource on the engagement. Specialists couldn't be the bottleneck for every screen.

Problem 3 — Confidence

Stakeholders needed to see the product, not read about it. Abstract requirements wouldn't get the client to "yes" early.

The real question

How do we move stakeholder decisions earlier — onto tangible screens, not abstract descriptions — without spending weeks on manual design?

04 · Why AI Was Appropriate

Design Tools Hit a Speed Ceiling

Manual design and static prototyping can produce beautiful work — they just can't produce it fast enough, in enough variants, to align stakeholders early.

Traditional design tools can

Produce polished, pixel-accurate mockups
Support iteration once a direction is set
Encode brand styles and reusable components

Traditional design tools cannot

Translate raw requirements into UI flows in days
Generate multiple complete design options instantly
Maintain brand discipline across screens without manual effort
Provide contextual guidance during build

The gap AI closes

Speed of generation, breadth of options, and consistency of style — turning the design phase from a serial bottleneck into a parallel exploration that stakeholders can react to in days, not weeks.

05 · What Was Built

AI as a Design Acceleration Layer

AI didn't build the application — it accelerated the design phase that precedes the build. Microsoft 365 Copilot was given full project context, workflows, requirements, and the National Highways brand palette. The actual product was built, tested and approved by humans.

Concept → flow

Translates raw requirements into structured page flows and a complete app architecture.

Multi-option design

3 UI variants per page. Reviewers compare and pick — not a single take-it-or-leave-it draft.

Brand-consistent styling

NH palette and design standards embedded in prompts — consistency by construction, not by review.

Contextual build guidance

Approved designs stored as reference and used contextually during PowerApps development.

Workflow

How AI plugged into the design phase

Input

Project requirements · expected workflows (change-control lifecycle) · UI expectations · NH branding guidelines

Brief Copilot in full context Project context, change-control workflows, requirements, and NH design standards loaded as the working brief.

Generate structure + variants AI produces the full page list, defined user flows, suggested functional architecture, and 3 UI variations per page — packaged into structured deliverables.

Curate with stakeholders Team reviews options, selects preferred designs, incorporates stakeholder feedback. Decisions made early — visually, not abstractly.

Reference during build Approved designs stored as reference and used during PowerApps development via contextual prompting — Copilot stays grounded in the agreed designs.

Output

Fully functional PowerApps change-control interface · SharePoint-based change log · automated stakeholder reports

06 · How the Process Changes

When Decisions Move Earlier, Quality Moves Up

The headline is the time saving. The under-the-hood story is when stakeholder decisions happened, and how confidently the build phase could proceed.

Before · Traditional

After · AI-Enabled

Manual Figma design · 3–4 weeks.

AI-generated designs · 2–3 days.

Late-stage stakeholder feedback.

Early-stage visual validation.

Multiple rework cycles during development.

Minimal revisions, design certainty before build.

Abstract requirements interpreted manually.

Tangible interface concepts to react to.

Product thinking sat with a small number of specialists.

Wider team engaged with the product concept earlier.

Who feels the change

Project manager

Stakeholder buy-in arrives weeks earlier — design decisions stop being a gating risk for the delivery window.

Product owner / SME

Reviewing 3 visual options is faster than imagining a single description. Decisions are visible and traceable.

Change manager / end users

React to actual screens — not Word docs of requirements — and surface UX issues before they're baked in.

Developer

Starts the build with an approved visual reference, not a moving design target. Less rework mid-build.

Stakeholder / sponsor

Sees something real early. Confidence builds before delivery risk concentrates at the end.

Bid / account lead

A differentiated low-code product offer for project controls and PMO functions — quality at speed.

07 · Value Delivered

Each item is labelled by evidence quality so the case study doesn't overclaim — what's proven on National Highways, what's indicative, and what's still to confirm.

Time Proven · design phase

Design phase compressed from ~4 weeks to 2–3 days — roughly 90% reduction in the time between requirements and reviewable UI. Build started against an approved design rather than a moving target.

Quality Proven

Multiple design options forced trade-off conversations early. Brand discipline embedded in prompts — NH palette enforced upstream rather than caught by review.

Cost Indicative · TBC

Reduced design-specialist effort and fewer rework cycles during build. Quantified saving requires confirmation of design hours assumed and dev rework avoided.

Risk Proven · scope absorbed

Risk of late-stage scope changes substantially reduced — stakeholders saw and approved screens before development started. The 4-month window held.

Governance Proven

M365 Copilot inside Arup tenant (EDP). Project context and client requirements stayed inside the controlled boundary. Every design decision human-curated before build.

Commercial Proven · client extended scope

Client extended the engagement on the back of the delivery quality. The pattern is reusable as a low-code PMO product offer — not a one-off win.

08 · Governance & Responsible Use

Why It's Safe on a Live Client Engagement

The audit story behind the design speed — what tool, what data, what controls.

Inside the Arup tenant

M365 Copilot with Enterprise Data Protection — project context and client requirements stay inside the controlled boundary.

Human selection at every step

3 design options per page → 1 chosen by the team. AI proposes, the team and stakeholders decide. No design reaches build without explicit approval.

Brand discipline by design

NH design standards (palette, styling) embedded in the prompt — consistency enforced upstream rather than caught by review.

Auditable design trail

Approved designs stored as reference artefacts and used contextually during build — the design decisions are traceable from concept to delivered screen.

For client conversations

The shape that lets MetricHub be defended on a National Highways engagement is the same shape that scales: AI accelerates a phase that humans still own; brand and requirements flow downstream from approved artefacts; every design decision has a reviewer's name on it.

09 · The Technical Bit

For Specialists — How It's Built

A deeper-dive section for technical readers. The case study is readable without it; this section adds depth on architecture, validation, and what we still need to confirm with the build team.

For technical readers

"AI accelerates a phase that humans still own. Configuration, logic, data and approvals are still engineered."

Build stages

Stage

Activity

Business requirements

Define the change-control workflow, users, data fields and approval stages.

AI-assisted design

Generate user journeys, screen concepts, wording, layout alternatives and review material.

Human review

Select and refine viable options with product owner and SMEs.

PowerApps build

Configure app screens, forms, rules and data connections (humans, not AI).

Workflow & approvals

Power Automate or equivalent workflow logic for routing change requests.

Testing

Validate usability, permissions, data accuracy and process alignment.

Deployment & iteration

Release to users, gather feedback and refine.

To confirm with build team — before publication

Which AI tools were used for design generation (Copilot only, or also third-party).
Whether AI was used for Power Fx / app logic, or only design concepts — to avoid overclaiming.
Which data sources were connected to the PowerApp.
Whether Power Automate workflows were used for approvals.
How designs were validated with users before build (workshop, walkthrough, UAT).
Basis of the ~4 weeks → 2–3 days time-saving figure.
Security and accessibility review status.

10 · What Colleagues Can Reuse

Five Patterns to Lift

The reusable lesson is not "use Copilot for design". It's the underlying delivery patterns — applicable to any low-code app build under a tight delivery window.

Discovery prompt pack

Frame user needs, pains, workflows and design options consistently — the brief format that produced usable designs.

Multi-option design pattern

Always 3 options per page. Forces trade-off conversations and increases confidence in the chosen direction.

Brand-in-prompt

Embed palette, typography and component standards in the brief. Consistency by construction, not by review.

Curate-don't-accept

AI proposes; humans curate. Three options force selection — never ship a single AI design without human review.

Concept-to-prototype sprint

The 4-step Brief → Generate → Curate → Reference pattern works on any low-risk internal product build.

Reusable assets — now available across Arup

Structured prompt packsThe brief format that produced usable designs.

UI generation workflowThe 4-step A → B → C → D pattern, ready to lift.

Design validation approachHow to curate AI-generated options with stakeholders.

11 · Client-Facing Proposition

How This Becomes an Advisory Offer

MetricHub underpins a productisable client offer at the intersection of digital product acceleration, low-code engineering, and PMO/project-controls functions.

Proposition statement

Arup helps clients accelerate digital product delivery by combining AI-assisted product discovery with PowerApps / Power Platform engineering — moving from requirements to a stakeholder-validated working product in days rather than weeks, without compromising governance.

Offer components

Rapid discovery (workflows, users, data, approvals)
AI-assisted prototype design
PowerApps / Power Platform delivery
Power Automate workflow design
SharePoint integration & data modelling
Power BI reporting layer
Governance & adoption support
Reusable PMO product templates

Where this lands in the playbook

Maps to Service Line 02 — Management Consulting (MC) as KPI / change-control consulting tooling, with reuse potential across Service Line 03 — P&PM for project-controls tooling.

12 · What's Next

Toward Semi-Automated App Generation

Each future capability inherits the same approval pattern — AI accelerates, humans approve. Outstanding items to confirm with the build team are listed in the technical section above.

Vibe-coding for PowerApps

Direct generation via native PowerApps capabilities and GitHub Copilot — AI moves from designing the app to scaffolding it.

Design-to-build pipelines

Tighter coupling between approved designs and the PowerApps build — reducing the manual handover step.

Reusable prompt libraries

Codify the brief format that produced usable designs — every project starts from a tested baseline.

Figma MCP server workflows

Closer integration with Figma when high-fidelity design is required — bringing the two tool families together.

Built by Tim Williams (R) Iona Programme National Highways · MetricHub Change Control

Final Takeaway

This wasn't just about speeding up design — it changed when decisions were made, how stakeholders engaged, and how confidently development could proceed.

Design speed + Multi-option exploration + Brand discipline

AI as a design accelerator and alignment engine — enabling a higher-quality outcome inside a constrained timeline.

Continue