ALYA Nexus
Auditing
Building a full-stack compliance lead generation platform — multi-page marketing site, interactive Audit Readiness Checker, and client-side report engine — for UAE's first AI-powered audit firm.
accounting.alyaauditors.com↗Role
Lead Experience Designer & Frontend Engineer
Stack
React 18
TypeScript
Vite
Tailwind
shadcn/uiPlatform
Multi-page Marketing Site + Interactive Lead-Gen Tooling
Deliverables
Full Site Build, Audit Checker, Downloadable Report Engine
01 — The Challenge
UAE compliance is urgent — but most businesses don't know it yet
ALYA Nexus Auditing is a UAE-based financial services firm — statutory audit, internal audit, VAT advisory, Corporate Tax advisory, accounting outsourcing, and business setup. With 30+ years of experience and a Six Sigma-driven 99.99% accuracy rate, their credentials were exceptional.
The problem: UAE businesses are navigating their most complex compliance environment ever — Corporate Tax live since June 2023, tightening VAT enforcement, and mandatory annual audit requirements across most free zones. Most SMEs and mid-market companies remain unaware of their specific gaps until penalties arrive. ALYA needed a digital presence that could capture, educate, qualify, and convert inbound leads before any sales conversation.
Jun 2023
UAE Corp Tax live
Invisible Compliance Gaps
UAE businesses face escalating obligations under Corporate Tax, VAT enforcement, and free zone audit mandates — yet most SMEs are unaware of specific gaps until penalties arrive.
↓ 80%
Avg. post-click retention
High-Friction Lead Capture
Traditional audit firm websites bury CTAs behind dense service listings. Busy finance managers bounce before reaching a consultation request — qualified leads evaporate at the first scroll.
3 sec
Decision window
Generic Trust Signals
Competitor sites list credentials without demonstrating expertise. ALYA needed to prove knowledge before any sales conversation — showing prospects their specific gaps, not generic copy.
02 — Conversion Architecture
A progressive commitment funnel built around one inflection point
The site is not a brochure — it is a funnel. Every section serves a specific role in moving the visitor from awareness to action. The Audit Readiness Checker sits at the exact inflection point where passive readers become active participants. By the time they reach it, they are already qualified. By the time they finish it, they want to act.
No single section converts on its own. The architecture is designed so that each section earns the next one: trust before education, education before activation, activation before conversion.
Site Conversion Funnel
TrustBar + Hero + Service Marquee — immediate authority above the fold before a single scroll.
sub-3-second credibility lockServices, Why ALYA, 4-step Process, Industries — progressive qualification of the prospect.
Zero bounce before checkerAudit Readiness Checker — transforms passive readers into active participants with a personal stake in their result.
Checker completion rateResults CTA + Lead Form + Sticky Mobile Bar — lead capture at peak intent, after value has been delivered.
Lead capture rate03 — The Audit Readiness Checker
An 8-question tool that qualifies leads and proves expertise simultaneously
The checker is the most complex UX component on the site — and the most important. It transforms the site from a passive brochure into an active compliance diagnostic. Visitors who complete it have invested 2 minutes, learned something specific about their situation, and arrived at the conversion point already convinced they need help.
The results screen delivers a 0–100 score with an animated SVG circle, a colour-coded band label (High / Moderate / Low / Not Ready), red and amber gap cards for each failed compliance area, and a dynamic CTA block whose headline and subtext change based on the user's exact score band.
Zero Friction to Start
No sign-up to begin. Lead capture is deferred to the moment of highest motivation — after the user has invested 2 minutes and seen a personalised result they want to act on.
Progressive Disclosure
One question per screen with an animated progress indicator. Each question includes a plain-English context line explaining why it matters — reducing cognitive load while building regulatory awareness.
Personalised Results
Animated SVG score circle (0–100), colour-coded band label, gap cards for each failed area, and a dynamic CTA block with headline and subtext that changes by score band.
Lead Capture at Value Exchange
The lead form appears only when the user requests the downloadable report — a natural, non-coercive exchange. The report downloads automatically on submission.
Lead Popup Strategy
30-Second Idle
User on intro screen, hasn't started
Fires once per session — then never again
Exit Intent
Mouse leaves viewport top edge
Fires once per session — then never again
Download Gate
User clicks Get Full Report
Intentional — gates the lead capture exchange
A hasShownIdlePopup ref gates both automatic triggers — the popup appears at most once per session without user action. On close, it minimises to a sticky green pill at bottom-right that persists and can be reopened at will.
04 — Design System
One accent colour. Zero ambiguity. Total visual control.
The design system is built on Tailwind CSS with a custom token set. The palette is deliberately constrained: Navy (#021F4B) anchors all authority surfaces, a single bright green (#7FFA7B) handles every interactive element. Users never wonder what they can click.
Typography uses PP Neue Montreal (self-hosted) with fluid type scaling via clamp() throughout — headings scale from mobile to desktop without breakpoint jumps. Eyebrow labels at 11px / 0.2em tracking provide consistent section hierarchy.
Colour Tokens
Navy
#021F4B
Primary text, headings, dark section backgrounds
Green Accent
#7FFA7B
All CTAs, eyebrow lines, accent dots, score highlights
Surface
#F4F8FD
Alternate section backgrounds
Panel
#EDF3FB
Card backgrounds, inner panels
Border
#C8DAF2
All borders and dividers
Muted Text
#5A7090
Body copy, captions, secondary labels
Section Background Rhythm
White
Hero · WhyALYA · Process
Surface #F4F8FD
Services · Industries · FAQ · AuditChecker
Navy #021F4B
StatsBar · LeadForm · Footer
05 — Technical Architecture
Custom hooks, a checker state machine, and a serverless report engine
Every interactive layer is backed by purpose-built engineering. Sections that use React hooks inside lists are split into typed sub-components to comply with Rules of Hooks. Blog content is served from a headless WordPress instance via the WP REST API with React Query caching. The downloadable report requires no server — generated entirely client-side.
Custom Hook Architecture
Three purpose-built hooks eliminate repeated imperative logic. useScrollReveal wraps IntersectionObserver with configurable delay and threshold. useCounterAnimation drives requestAnimationFrame counters that trigger only on viewport entry. useParallax links scroll position to a translateY transform for hero depth.
- —useScrollReveal<T> — scroll-triggered fade-in
- —useCounterAnimation — viewport-aware RAF counter
- —useParallax<T> — scroll-linked translate
- —Rules of Hooks compliant sub-component splits
How is your bookkeeping currently handled?
Checker State Machine
Three-phase state machine: intro → questions → results. Answers stored as Record<questionIndex, optionIndex>. Score calculated as raw sum (max 20) mapped to 0–100 display score. Popup state ('hidden' | 'open' | 'minimized') managed separately with a hasShownIdlePopup ref gating automatic triggers.
- —Phase transitions: intro → questions → results
- —rawScore / 20 × 100 display mapping
- —30s idle + exit-intent popup triggers
- —Minimises to sticky pill on close
ALYA Audit Report
Compliance Readiness
72
Moderate Risk
Client-Side Report Generation
Downloadable audit reports generated entirely client-side as self-contained HTML files using Blob + URL.createObjectURL. No server dependency. The report includes the score, band badge, all gap cards with UAE penalty context, and a WhatsApp CTA — print-formatted and ready to forward.
- —Blob + createObjectURL — zero server cost
- —Self-contained HTML with inline styles
- —Gap cards with UAE penalty language
- —WhatsApp CTA embedded in report
Mobile Experience — Three Key Screens
Landing Page Hero
Audit Checker Flow
Score Results Screen
06 — Resolution
Four key decisions that made the difference
Every strategic decision was made to increase lead quality and reduce friction — not to add features.
WhatsApp as Primary CTA
Every major CTA routes to a pre-filled WhatsApp message rather than a form. This matches how UAE B2B buyers prefer to initiate conversations and dramatically reduces friction compared to a standard inquiry form.
Deferred Lead Capture
The checker requires no details to start or view results. Lead capture triggers only when the user requests the downloadable report — the highest-intent moment in the session. This increases both completion rate and lead quality.
Single Accent Colour
One bright green (#7FFA7B) for every interactive element creates an unambiguous visual language. Users always know what they can click. The contrast against navy and white also ensures accessibility.
Score Personalisation Over Generic Messaging
Rather than one CTA for all visitors, the results screen delivers one of three distinct messages based on score band — each with a different tone (confirmatory / supportive / urgent). The CTA feels responsive, not generic.
Performance Targets
>60%
Checker completion rate
of starters
>25%
Lead capture rate
of completers via report download
>40%
WhatsApp CTA clicks
of completers from results screen
<2.5s
Page LCP target
Mobile & desktop
Key Takeaway
A compliance tool that proves expertise before asking for a lead converts better than any form ever will. The checker isn't a gimmick — it's the product.