Apple meets Palantir.
MEZURA is a Decentralised National Utility pioneering the D-IaaS model. The website must reflect the gravity, security, and scale of a multi-billion Rand national infrastructure project — and function as a Digital Grand Central Station.
UX Goal — Instant Self-Segmentation: A homeowner, a solar installer, and an institutional investor all land on the same homepage. Within 3 seconds, they must know exactly which path to take.
UI/UX Design Team
Responsible for every micro-interaction, scroll-trigger, and visual hierarchy decision.
Front-End Developers
Build the cinematic experience. Performance-first. Mobile-first. Accessibility baked in.
Back-End Integration
CRM routing, secure form handling, headless CMS integration, analytics pipelines.
The Vibe
Authoritative · Highly Secure · Cinematic · Frictionless · Premium
Dark-mode defaults or high-contrast deep blues/blacks with vibrant, energetic accent colours representing electricity and solar energy. Every interaction should feel sovereign-grade.
Performance, compliance, trust.
Foundational requirements that apply across every page of the platform — non-negotiable across both design and engineering.
Instantaneous Load
The site must load instantaneously. Lazy-load all heavy assets — videos, animations, 3D renders. Critical CSS inlined. Above-the-fold content prioritised.
Mobile-First, 100%
Most homeowners and EPCs will access via mobile. Mobile-first design — desktop is the enhancement. Touch targets, performance budgets, gesture awareness.
POPIA · Watertight
Strict adherence to POPIA (South Africa). Localised cookie consent. Forms protected by invisible reCAPTCHA and end-to-end encryption.
Sticky · Transparent → Solid
Persistent header transitioning from transparent to solid on scroll. Right-aligned PORTAL LOGIN dropdown looks like a secure gateway (UMA Web · NNOC EPC Portal · Fund Dashboard).
Tech Stack
Cinematic landing. Instant routing.
A high-impact cinematic landing page. Minimal scrolling required to understand what MEZURA does. Self-segmentation in three seconds.
I · Stakeholder Matrix
Crucial dev component. Layout: 2×2 grid (desktop) or 1×4 stack (mobile) of interactive cards.
II · Hover Interaction
CSS transitions · focus-by-dim. On hover, the card expands seamlessly using CSS transitions, revealing its short value proposition and CTA button. Other cards slightly dim to focus attention. No layout jank — pre-allocate space.
III · Trust & Social Proof Strip
Above the fold on scroll. Anchor logos: ARM Cortex-A76 · Infineon TPM 2.0 · NIST & POPIA Compliant. Subtle entrance animation; no carousel.
Hero Section Development
Background looping video — heavily compressed. Grid → Glowing Solar Roofs. Show the transition from a traditional grid to glowing solar roofs. Must not distract from the text. The primary CTA [ GET ENERGY FREEDOM ] must pulse or have a micro-interaction to draw the eye.
Reassuring consumer. Corporate HoA.
Two distinct consumer audiences. The Homes page leans modern and reassuring. The Estates page leans professional and corporate.
Page 2 — For Homes
Reassuring · Modern · Financial Relief. High-fidelity 3D renders or crisp mockups of the UMA mobile app. Use scroll-triggered animations — as the user scrolls, the app mockup slides in highlighting the Digital Wallet feature. Eskom-vs-MEZURA price chart must be an animated chart that draws itself as it enters the viewport. Form auto-completes the Address/Pin field via Google Maps API (restricted to South Africa).
Page 3 — For Estates & HoAs
Professional · Corporate · Trustee-Ready. Geared toward decision-makers and body corporates. Use clean iconography to represent the multi-utility aspect (Electricity, Water, Gas, Security). Include a dropdown for "Number of Units in Estate" (10–50, 51–200, 200+) to immediately qualify the lead in the CRM backend.
Territorial map. Premium banking feel.
Exciting and lucrative for installers. Ultra-premium and analytical for institutional capital. Two very different audiences — both B2B, both high-stakes.
Page 5 — For Institutional Capital
Ultra-Premium · Analytical · Highly Secure. Heavy use of numbers, large bold percentages (24%+ IRR), and strict grid layouts. Should feel like a secure banking portal. Primary CTA [ REQUEST DATA ROOM ACCESS ] triggers a rigorous lead-capture form — routes to the executive team, who manually vet the institution before granting access to the financial models.
Page 4 — Major Dev Requirement
The Interactive Zone Map — Mapbox GL JS
Centred on South Africa. Stylised 10×10 km grid overlay. Pan/zoom enabled. Claimed zones — muted/locked colour. Available zones — pulse animation. Click an available zone → modal with lead-capture form to "Apply for this Zone". For V1, a hardcoded stylistic representation is acceptable if a live database hookup is too complex — but it must look interactive.
Cyber-physical UI. Headless backend.
The technology page is dark-mode and highly technical. The backend is invisible to the user but mission-critical to operations.
Page 6 — The Technology (Dark Mode)
Exploded 3D View · Scroll-Linked Annotations. An exploded 3D view (or high-res schematic overlay) of the MEZURA UMS unit. As the user scrolls, text boxes draw lines to specific hardware components — the ARM Cortex chip, the TPM 2.0 silicon, the tamper sensors. The [ DOWNLOAD MASTER TECHNICAL DD ] button must track analytics so we know who is pulling the heavy documentation.
I · CRM Lead Routing
HubSpot · Salesforce. All forms across the four stakeholder pages are tagged with their source and routed to specific funnels in the MEZURA CRM. An EPC lead must not end up in the Homeowner sales queue.
II · Headless Architecture
Next.js · Sanity or Contentful. Front-end built in Next.js or React, pulling content from a headless CMS. Marketing site stays blindingly fast while non-technical staff can update copy easily.
Delivery — Build the digital grand central station. This SOW is the source of truth for v1.0 of the MEZURA platform. Version, ticket, and deploy against this brief.