B2B Lead Generation / CRO / Full-Stack Build
Insure First
Multi-route landing platform for a CBUAE-licensed, conflict-free insurance advisory firm — built to convert cold UAE & GCC business audiences into consultation bookings without relying on an existing brand reputation.
Role
Lead Experience Designer & Frontend Engineer
Stack
React 18
Vite
Framer Motion
TailwindReact RouterClient
Insure First Risk Management Consultancies
Deliverables
3-Route Site · Lead Magnets · Form System · Email Nurture
01 — Market Positioning
The only advisor in the room with no incentive to mislead you
The UAE insurance advisory market is dominated by direct brokers who earn commission from placing business with insurers. This creates a structural conflict of interest: the advisor is incentivised to select insurers that pay the highest commission — not the ones that offer the best coverage.
Insure First's differentiator is independence. They charge for advisory, not placement — meaning their recommendations are commercially clean. This is a strong and demonstrable value proposition, but it requires educating the market. The site had to make that positioning legible to a business owner who has never considered the distinction before.
25+
Years principal advisor experience
130+
Businesses served across UAE & GCC
$40M+
Insurance premiums optimised
98%
Client retention rate
Target Audience — Four Buyer Personas
Business Owners & SME Founders
Broad funnel — broadest audience
Finance Directors & CFOs
TCOR and compliance framing
Operations Managers & COOs
Contract coverage and project risk
HNW Individuals & Expat Families
Personal insurance advisory
Insure First — Homepage
02 — Information Architecture
Three routes, one funnel — each page built for a specific buyer stage
The site is not a single scrollable page — it is a three-route architecture where each route serves a distinct point in the consultative sales cycle. Navigation reinforces this hierarchy with dropdowns grouped into three clusters: Who We Help, Solutions, and Insurance Services — matching the three questions every B2B buyer asks before engaging an advisor.
Route
Purpose
Audience
Structure
/
Awareness → Interest
Cold traffic
13-section scrollable brief
/services
Consideration → Intent
Warm, evaluating
Persona-led service grid
/contact
Intent → Action
Ready to convert
Form + FAQ + sticky mobile bar
Homepage — 13-Section Scrollable Brief
The homepage is structured as a long-form scrollable brief — common in high-value B2B services where trust must be earned before a prospect will commit to contact. Each section has a specific role in the narrative arc.
Hero
First impression — sharp card on photo background, above-fold CTA
Trust Bar
Immediate credibility anchoring — answers 'who are these people?' before the first scroll
Problems
Emotional resonance — uses the reader's own pain points as a mirror before any solution is introduced
Industries
Audience recognition — signals relevance across buyer segments
Services
Solution framing — two-pillar advisory model
Claims Deep-Dive
High-anxiety pain point addressed in full — builds authority on the most feared scenario
Testimonials
Social proof
Founder Profile
Personal trust — placed late so credibility reinforces rather than replaces professional credibility
Insights
Authority content hub — SEO and thought leadership
Contact CTA
Conversion endpoint with named advisor and response time promise
03 — UX Design
Navigation as a trust signal. Contact as a personal commitment.
Two UX moments define the site: the navigation communicates legitimacy at three registers simultaneously before a single section is read. The contact page is designed so that the person reviewing the inquiry has a name, not a job title — converting an anonymous form into a personal exchange.
Navigation — Three-Tier Structure
Tier 1
License Bar
CBUAE Licensed · License No. 143
Desktop only
Regulatory credibility
Tier 2
Contact Bar
Phone · Email · Location (Dubai)
Desktop only
Accessibility — direct contact pre-form
Tier 3
Main Nav
Who We Help · Solutions · Insurance Services · Get A Quote
Both — hamburger on mobile
Service discovery + persistent CTA
On mobile, the license bar is hidden to reduce cognitive load — mobile users are more likely to be in contact mode than exploration mode. Core navigation is preserved in a hamburger menu with expandable accordion sections.
Contact Page — Form Architecture
Book a Consultation
Fredrick will review your enquiry
Response within one business day
Full Name
Work Email
Phone Number
Enquiry Type (optional)
Form Validation — Four States
Work Email
DefaultWork Email
FocusWork Email
Valid ✓Work Email
Error ✕Four-state validation (default → focus → valid → error) with live on-blur feedback rather than on-submit. This exceeds the typical two-state implementation and dramatically reduces form abandonment.
Enquiry type is optional
Making it required would increase drop-off for users who don't know which service category fits their need — the right call for a multi-service advisory firm.
Identified UX Gaps — Next Iteration
Social Proof Depth
Testimonials are brief; no company names or photos
→ Add client logos or LinkedIn-attributed quotes
Pricing Anchoring
No pricing information or engagement structure
→ A 'How We Work' section or pricing FAQ would reduce a major B2B objection
Exit Intent
No re-engagement for visitors who scroll without converting
→ Exit-intent popup offering the free Premium Check as a download
Blog / Insights
Preview section exists but links to no content
→ Dead links undermine the authority signal — build out or remove
Insurance Premium Check — Free 3-Step Diagnostic Tool
04 — Design System
Navy and teal. Sharp corners. No border-radius anywhere.
The design system is built around a navy and teal pairing that communicates professional authority (navy) with forward-looking confidence (teal). The teal accent at #00B899 is distinctive enough to function as a brand identifier without departing from sector norms.
Typography pairs Plus Jakarta Sans for headings with Inter for body copy — fluid type scaling via clamp() throughout. Eyebrow labels at 11px / 0.18em letter-spacing in teal establish section hierarchy for scanners.
Colour System
--navy
#0D1B4B
Primary backgrounds, headings, hero
--teal
#00B899
CTAs, highlights, accent lines, links
--teal-pale
#E6FAF7
Badge fills, success backgrounds
--light-bg
#F5F7FA
Alternating section backgrounds
--white
#FFFFFF
Card surfaces, body backgrounds
--text-muted
#6B7280
Secondary copy, metadata
Hero — Card on Photo
Sharp card on photographic background
The hero uses a handshake photograph with a sharp-cornered white overlay card. The card reads as a clean white object against a visual context rather than a flat colored background — a distinctive choice that sets the page apart from the gradient-heavy aesthetic common in InsurTech.
Service Cards — Featured Tag
3px solid teal top border on priority content
The 3px solid teal top border on featured cards functions as a hierarchical signal — marks content as primary without requiring background color changes. "High Demand" and "Most Requested" tags on Claims Advisory and Insurance Audit provide social proof by implication while directing attention in a content-dense grid.
Site Sections — Our Story · IOP Framework · Solutions · Industries
05 — Key Decisions
Five decisions that shaped the conversion architecture
Each decision was made in response to a specific constraint — the purchase context, the buyer psychology, or the UAE market. None were aesthetic preferences.
Sharp Corners Throughout
No border-radius values on any primary surface — cards, hero panels, containers are all rectangular. Corporate financial services audiences associate rounded UI with consumer apps. Sharp corners signal precision, formality, and trustworthiness — appropriate for an advisory brand where the purchase decision involves significant financial or legal exposure.
Named Founder in Conversion Touchpoints
"Fredrick will review your enquiry" replaces every generic "a member of our team" line in the contact flow. B2B advisory is a personal trust sale. Naming the advisor makes the commitment feel personal, increases accountability, and gives the prospect someone to direct their follow-up expectation toward.
Free Consultation as Primary CTA
An insurance audit or risk assessment is an unfamiliar purchase for most SME buyers. The free consultation removes the first financial barrier and lets the advisor demonstrate value before a commercial relationship begins. Secondary CTAs — Free Insurance Premium Check and Free Family Business Readiness Check — qualify visitors by intent at earlier funnel stages.
Two-Pillar Service Model
Insurance consultancy and management consultancy are structured as two distinct pillars rather than a flat service list. This communicates strategic breadth, positions the business as more than an insurance reviewer, creates natural upsell pathways from the risk pillar to the management pillar, and allows different buyer types (CFOs vs. founders) to self-select.
WhatsApp as Parallel Conversion Path
In the UAE, WhatsApp is a primary business communication channel across all segments. The sticky mobile bar offers Call Now and WhatsApp in parallel — not as a consumer concession but as market-appropriate channel design. Visitors who prefer synchronous contact over form submission have an immediately accessible alternative at every scroll depth.
06 — Resolution
A complete lead acquisition platform for a business with a story worth telling
The independence positioning is the product. The site's job was to make that positioning legible — and to convert the moment a prospect recognised it.
Post-Launch Metrics to Track
Consultation form submissions
Form success event → Google Analytics
Free Premium Check CTA clicks
CTA click event
Scroll depth to Founder section
Scroll depth event at 75%
Mobile contact bar taps
CTA click on sticky bar
WhatsApp click-through rate
Outbound link click event
Time on page
Session duration — >2 min target
Key Takeaway
The homepage qualifies and pre-educates before a sales conversation happens — compressing what would otherwise be a first meeting into the pre-click experience.