Back to versions
Version comparison

What changed from the live site

A detailed breakdown of every structural, visual, and technical change introduced in V1 and V2 compared to the current live prospero.systems (Squarespace, scored 6.2/10 in the UX audit).

Current live site — baseline

UX audit score
6.2 / 10
UX audit, April 2026
Platform
Squarespace
Mega-menus as separate pages, no static export
Typeface
System UI / Segoe UI
Not brand-specified (brand manual: Messina Sans)
Known P1 issues
9 issues
Scroll voids, LCP >3 s, broken English default, hidden solutions, etc.
V1Small
V1 · Small intervention

Iteration & fixes

The same prospero.systems — polished, de-bugged, and running as a fast static site. Every P1 UX issue resolved. Stakeholders should read V1 as "our site, but it works now", not as a new brand.

IA unchanged — same navigation structure and URL slugs
9
P1 bugs fixed
1
New page added
83
Pages built
0
IA changes
ℹ V1 deliberately does not apply any IA restructure. Navigation labels, URL slugs, and information hierarchy are kept identical to the live site. Only bugs are fixed and the typeface is corrected.
⚡

Performance

  • Particle background removed. The animated SVG particle cloud caused forced reflows on every frame. Replaced with a static hero — no JavaScript, no animation cost.
  • Autoplay video dropped. Hero video loaded simultaneously with the particle script, pushing LCP above 3 s. Eliminated entirely.
  • Fonts self-hosted. Messina Sans TTF served from /assets/fonts/ — no Google Fonts round-trip, no FOUT.
  • No third-party trackers. Analytics placeholder left in HTML but empty — no external scripts blocking rendering.
Performance Bug fix
📐

Scroll & layout bugs

  • Scroll-animation voids eliminated. Three large content blocks on the homepage were set to opacity:0 until in-view and never triggered reliably. All content is visible on load.
  • No prefers-reduced-motion bypass. All remaining transitions respect the system motion preference.
  • Consistent section heights. Hero and solution sections now have predictable padding (fluid clamp()) with no viewport-height units that caused scroll dead-zones on mobile.
Bug fix
🗺

Navigation

  • Added "Why DetectX" page. A dedicated differentiation narrative page — previously missing entirely. Now the first item in primary nav.
  • Removed /cart. Vestigial Squarespace Commerce link appeared in the header. DetectX is not a product customers can add to a cart.
  • English default route. The live site auto-redirects / to /de. V1 serves English at root; German is out of scope for this workbench.
  • Real dropdown menus. Squarespace renders mega-menus as separate pages (/detectx-industries, /detectx-solutions, etc.). V1 replaces these with semantic <ul> dropdowns built into the header partial.
Bug fix New page
🔤

Brand & typography

  • Messina Sans applied. The brand manual (April 2021) specifies Messina Sans for all web and PDF use. The live site uses system UI / Segoe UI. V1 self-hosts the correct typeface.
  • H1 weight corrected to Bold (700). Brand manual maps "Headings / distinction" to Bold. The live site renders all headings at Semibold (600). V1 corrects H1.
  • Brand red exact match. Live site uses #e63946. Brand manual specifies #E42C2F. V1 uses the exact hex from the manual across all tokens.
  • Fluid type scale. Viewport-responsive sizes replace fixed px values — text scales smoothly from 360 px to 1280 px wide.
  • Focus rings. Added visible :focus-visible outlines in brand red on all interactive elements — absent on the live site.
Brand Bug fix
📋

Content & proof

  • Consistent solution page layout. Every solution page now follows a 3-section structure: header → capabilities → cross-links to Platform. The live site has no consistent template.
  • Case study rail on solution pages. Each solution page surfaces the relevant customer case study inline. On the live site, case studies are only reachable from Resources.
  • Stock imagery replaced. AI-generated stock photos on solution cards replaced with geometric SVG illustrations — more appropriate for a compliance brand.
  • Quantified stats surfaced. The 98% false-alert reduction and other key metrics are treated as headline copy throughout, not footnotes.
New Fix
⚙

Technical

  • Static HTML — no Squarespace dependency. All 83 pages are hand-authored HTML files. No CMS, no JavaScript framework, no build tool required.
  • Header & footer via JS injection. A single main.js injects shared partials at runtime — one place to update nav across all pages.
  • 4-file CSS architecture. tokens.css → base.css → layout.css → components.css. All design decisions live in tokens.css; nothing hardcoded elsewhere.
  • No dark mode (intentional). Matches the current live site. Dark mode tokens are defined but disabled — flagged for re-evaluation in a future phase.
  • Visual-only forms. <form> elements are present with correct markup but have no backend. Comments in HTML explain how to wire a real endpoint.
Technical
Enter V1 View styleguide
V2Medium
V2 · Medium intervention

Selective redesign

Same structure, new skin. V2 includes every V1 fix, then adds a structural IA overhaul and a completely new visual system. Swiss editorial direction — sharp borders, generous whitespace, strong typographic hierarchy. Designed to read as visually confident and deliberately distinct from hawk.ai's navy-and-coral corporate look.

Cumulative — includes all V1 changes plus the additions below
+6
Hidden solutions surfaced
3
Nav sections renamed
12-col
Explicit grid
85+
Pages in scope
ℹ V2 applies all V1 fixes first, then layers the IA restructure and new visual system on top. If you see a change listed in V1, it is also present in V2.
🏗

Information architecture — restructured

  • "Case Studies" renamed to "Customers" and promoted from Resources sub-menu to top-level primary nav. Active word, higher discoverability
  • Solutions regrouped into 3 semantic clusters: FSI Compliance (AML, KYC, Name Screening, Adverse Media, Asset Screening, Credit Risk, Fraud) / Risk & Identity (Digital Identity, Risk-Based Profiling, Customer Risk Score) / Business Intelligence (Customer Retention, Sales Optimisation, Sales Forecasting, Demand Forecasting, Supply Chain). Previously one flat mega-menu list
  • 6 hidden solutions surfaced. Customer Retention, Sales Optimisation, Demand Forecasting, Supply Chain Optimisation, Sales Forecasting, and Customer Risk Score were not in the live site's mega-menu at all. V2 promotes them under the Business Intelligence cluster.
  • "Other Industries" renamed to "Third-Party Risk & Due Diligence." More specific, searchable, matches how buyers actually search for this capability.
  • Platform split into two groups: Universal Capabilities (Alert Management, Business Rules Designer, Enhanced AI Search, Link Analysis, Transaction Monitoring) / Analytics Engines (Behavioural Analysis, Clustering & Modelling, Evolutionary Learning, NLP, Pattern Recognition, Profiling & Scoring). Previously one flat list
  • Unified DetectX® product menu in header. Header now has one primary CTA ("Request Trial") and one secondary CTA ("Talk to Us") — replaces multiple competing CTAs from the live site.
  • Insights elevated alongside Customers. Both editorial channels (blog + proof) now sit at the same nav level, not buried under Resources.
IA change New structure
🎨

Visual system

  • Swiss editorial direction. Thin horizontal rules replace colour-fill section dividers. Publication-like typography-led hierarchy.
  • Sharp border radii. Cards at 4 px (vs V1's 12 px), buttons at 4 px (vs V1's pill/999 px). Deliberately austere.
  • Generous section padding. Sections max at 8 rem vertical padding (vs V1's 6 rem). More whitespace, less clutter.
  • Minimal hover effects. Cards respond with border-color change only — no lift, no shadow. Interactive without being distracting.
  • Softer shadows. Box shadows are 20–30 % lighter than V1. Elevation is suggested, not stated.
Design
🔤

Typography

  • H1 Bold (700), tighter tracking. Letter-spacing −0.025 em (vs V1's −0.02 em) — stronger editorial pull.
  • H4 & H5 corrected to Semibold (600). V1 left these at Medium (500) — not a weight defined in the brand manual. Now aligned to the Semibold / subtitle role.
  • Tighter line-height on headings. 1.1 (vs V1's 1.15) for more compact, confident headings.
  • Light weight (300) added. Messina Sans Light loaded for future display use — not used in body copy.
  • Editorial utility classes. .section-num, .eyebrow, .accent-rule added as first-class typographic tools.
  • Display font slot reserved. --font-display token defined — architecture ready for a serif accent if the direction evolves.
Brand Design
⬜

Layout & grid

  • 12-column explicit grid. V1 uses auto-fit / minmax() flex-wrap. V2 uses a named 12-column CSS grid — predictable, precise column placement on every section.
  • Asymmetric hero layout. Title column at 7 fr, lede/CTA column at 5 fr — deliberate visual tension, not centered symmetry.
  • Responsive gutter token. --gutter: clamp(1rem, 3vw, 2rem) — gutters grow with the viewport rather than being fixed.
  • Tighter-compact section variant. --section-py-tight added for sections that follow immediately after another — avoids double spacing.
Layout
🎛

Colour tokens

  • Brand red unchanged. #E42C2F — same exact hex as V1 and the brand manual.
  • Border grays strengthened. --color-border: #e0e0e0 (vs V1's #e5e7eb) and --color-border-strong: #bbbbbb (vs V1's #d1d5db). Crisper rules on white.
  • Focus ring uses deeper red. rgba(139, 30, 43, 0.28) at 28 % opacity (vs V1's brand red at 35 %). Same visual weight, darker source.
  • Semantic rule aliases. --color-rule and --color-rule-strong added — intent-named tokens for horizontal section dividers.
Brand Design
🧩

Components

  • Buttons square-cornered. 4 px radius, medium weight (500), small letter-spacing (0.04 em), 1.5 px border — more formal, less playful than V1's pill buttons.
  • Cards sharp. 4 px radius (vs V1's 12 px), hover = border-color shift only. Publication card aesthetic.
  • Snappier animation. --duration-med: 200 ms (vs V1's 220 ms). Small change, perceptibly more responsive.
  • Stat display scale. --step-stat: clamp(4rem, 3rem + 5vw, 8rem) — large numeral values can render at up to 128 px without a separate display font.
Components New tokens
Enter V2 View styleguide
← All versions Styleguide Brand manual ↗ UX audit ↗