Brand Identity / Web Platform / MEA Market Research
4BC Global
Clarity Where Data is Opaque
Premium digital platform for a specialist MEA market research and advisory firm — full brand identity, multi-route site, WebGL hero, and a filterable 30+ case study library.
Role
Lead Designer & Frontend Engineer
Stack
Next.js 14
TypeScript
Tailwind
Framer Motion
GSAPOGL/WebGLClient
4BC Global — MEA Market Research & Advisory
Deliverables
Brand Identity · Multi-Route Site · WebGL Hero · Case Study Library
01 — Business Overview
Born from the leadership team that built Kantar MENA's fastest-growing research unit
4BC Global was founded in 2020 by the leadership team that built Kantar MENA's fastest-growing research unit between 2007 and 2020. When the founding partners stepped out as an independent firm, they brought with them 100+ years of combined regional expertise, established client relationships, proven methodologies, and deep institutional knowledge.
The firm's thesis: MEA markets are complex, data-scarce, and frequently misunderstood by outsiders. Generic research firms apply templated, Western-biased approaches that fail to capture ground-level nuance. 4BC Global fills this gap with method-neutral, bespoke, director-led research built specifically for how these markets actually work.
The Brief
When the 4BC partners stepped out of Kantar MENA in 2020, they carried 100+ years of combined expertise, established enterprise client relationships, and a track record of building the fastest-growing research unit in the region. What they didn't carry was a digital presence. Their website was a placeholder — no case studies, no visual identity, no proposition that matched who they actually were. Enterprise clients Googling the firm before a pitch found nothing that reflected the calibre inside the room.
The task: build a full digital platform and brand identity that made the firm's credibility visible before the first meeting — not after.
450+
Completed engagements
40+
Countries served
100+
Years combined team experience
10+
Sectors covered
Five Differentiation Pillars
Method Neutral
No preferred methodology. The approach is designed around the question, not around available tools.
Ground-Level
Fieldwork and analysis conducted with genuine regional presence, not proxied through offshore teams.
Bespoke
Every engagement is custom-designed. No off-the-shelf reports or templated surveys.
AI-Integrated
Modern analytical tools layered over traditional research rigour for faster and deeper insights.
Senior-Led
Every project is led by a director with 15+ years of experience. No junior-only engagements.
02 — Service Architecture
Services structured around the client's stage in their business lifecycle
Rather than a flat list of research services, the IA frames everything around a Business Lifecycle Advisory model — a deliberate positioning choice that communicates long-term partnership rather than transactional vendor relationships. Every prospect can immediately locate where they are in the journey.
Stage 1
Inception
Enter with Confidence
- —Go-to-Market Strategy
- —Market Feasibility Assessment
- —Business Plan Development
- —Market Entry Strategy
- —Go/No-Go Decision Support
- —Partner Identification & Evaluation
Stage 2
Growth
Scale Smart. Outpace Your Rivals
- —Product Strategy
- —Customer Growth Intelligence
- —Pricing Strategy
- —Distribution Strategy
- —Network Planning
- —Partner Evaluation
Stage 3
Maturity
Defend Position. Optimise Returns
- —Network Optimisation Strategy
- —Customer Retention Programs
- —Brand Health Tracking
- —Channel Efficiency Review
- —Competitive Response Planning
Stage 4
Renewal
Pivot. Diversify. Grow Again
- —Diversification Strategy
- —Portfolio Rebalancing
- —Feasibility Studies
- —New Market Assessment
Three Proprietary Platforms
4BC InfUSE
Secondary Research Intelligence Platform
Delivers structured MEA market intelligence in as little as 5 working days — bypassing months of primary research where secondary data suffices.
Pan-MEA, sector-specific databases, regulatory environments, competitive landscapes
4BC Landscape
Geo-Mapping & Network Expansion Tool
Combines thousands of GPS data points with cluster mapping and format optimisation to identify optimal expansion locations.
Mall catchment, fuel station networks, branch optimisation, pedestrian flow studies
4BC ImpactIQ
Socio-Economic Impact Measurement Framework
Provides defensible, structured impact data for government, development, and corporate clients who need to demonstrate economic or social contribution.
Economic impact, social impact, environmental impact, event performance
03 — Design System
Navy, amber, and plum — a palette with a clear point of view
The visual language communicates three things simultaneously: premium quality, regional expertise, and intellectual rigour. The design avoids the bland corporate grey common in consulting websites — instead using a distinctive, confident palette that signals a firm with conviction.
Navy/amber is the strategic pairing: navy grounds the brand in authority while amber drives action. Deep plum provides visual separation without coldness — used selectively for maximum effect.
Colour System
Navy Blue
#2B4A8C
Navigation, headings, authority surfaces
Golden Amber
#E8A020
CTAs, highlights, pill buttons, active states
Deep Plum
#7D2B5E
Section separation, selective visual contrast
Light Navy Tint
#EEF3FF
Subtle section backgrounds, card tints
Dark Charcoal
#1A1A2E
All body copy and secondary headings
Warm Grey
#E2DEDE
Card borders, dividers, input outlines
Typography — Plus Jakarta Sans
Plus Jakarta Sans
Single-font system across all elements. Tight negative tracking on large headings creates a premium, editorial feel. Generous line-height (1.55–1.65) on body copy ensures readability across long-form service descriptions.
Type Scale
Hero H1
88px / 2.75rem
800
−0.04em
Section H2
44–56px
700
−0.02em
Card H3
18–22px
600
−0.01em
Eyebrow labels
14px
600
+0.1em (uppercase)
Body copy
15–16px
400
0
Signature Visual Elements
Grainient (WebGL)
OGL · Custom Component
Hero background built on a custom OGL-based WebGL component. Layers multiple colour stops (navy, plum, amber) with warp/distortion, grain texture overlay, and subtle animation — a living, textured background impossible to replicate in CSS alone.
Gradient Text Animation
CSS · Interactive
Key headline words use a CSS gradient effect that shifts on hover, reinforcing brand energy on the most-read copy on the site. Interactive and purposeful.
SVG Ring Geometry
SVG · Decorative
Ring elements placed in the hero at 7% opacity, providing compositional balance without competing with content. Combined with a layered MEA skyline silhouette, they ground the hero in regional identity.
Wave Section Dividers
SVG · Layout
Subtle SVG wave transitions between sections soften hard-edge colour changes — a detail that contributes to the premium, considered feel without relying on decorative imagery.
04 — UX & Navigation
Five routes. Four buyer journeys. Every path ends at a contact action.
The IA is flat and task-oriented. Five primary destinations serve distinct user intents — from the senior stakeholder vetting the firm to the analyst exploring platform capability. All pages lead back to a contact action via a persistent navbar CTA, inline service CTAs, or the footer contact block.
Route
Intent
Primary Audience
About Us
Who we are, our story, our team
Senior stakeholders vetting the firm
Services
What we do, organised by lifecycle stage
New business prospects
Sectors
Where we have depth, by industry
Prospects self-qualifying by sector
Tools
Our proprietary platforms
Analysts and platform assessors
Case Studies
Proof of work, filterable by sector
Returning clients and evaluators
Interaction Patterns
Card hover
Lift effect (translateY −4px, shadow increase), icon scale, text colour shift
Team card click
Animated bio expansion in-place — no page navigation
Case study card click
Full-screen modal with challenge / approach / outcome
Sector filter
Instant client-side filter with fade transition
Navbar on scroll
Background transitions from transparent to white with shadow
Mobile menu open
GSAP-animated hamburger — lines rotate 45°/−45°, menu slides down
Form submission
Spinner state → success confirmation with same-day response messaging
Scroll animations use Framer Motion's whileInView with staggered child delays (60–80ms intervals). Fade + 20px translateY, 500ms ease-out. Creates controlled reveal rather than information dumping.
05 — Technical Architecture
Modern stack with deliberate architectural decisions at every layer
Next.js App Router enables hybrid rendering — static generation for content-heavy pages (case studies, sectors) and server components where appropriate. Two animation libraries, a custom WebGL component, and a global React Context for the contact modal all operate without friction.
Layer
Technology
Version
Framework
Next.js (App Router)
14.2.3
Language
TypeScript
5
Styling
Tailwind CSS
3.4.1
Animation
Framer Motion
11.0.0
Animation (advanced)
GSAP
3.14.2
WebGL
OGL
1.0.11
Icons
Lucide React
0.379.0
React
React 18
18
Architecture Decisions
Custom WebGL Grainient
Rather than CSS gradients or third-party animation libraries, a custom OGL-based WebGL component handles the hero background. This provides finer artistic control over the animated gradient and grain texture — a deliberate investment in visual differentiation.
Framer Motion + GSAP Dual Strategy
Framer Motion handles declarative scroll-triggered animations (section reveals, staggered cards). GSAP handles imperative animations requiring precise timeline control (hamburger rotation, complex entrance sequences). The two libraries complement rather than compete.
React Context for Contact Modal
A ContactModalProvider wraps the entire application, enabling any component to trigger the contact modal without prop drilling. The modal pre-fills the service area when opened from a specific service page.
No Headless CMS
Content maintained directly in TypeScript data files (/lib/case-studies-data.ts, /lib/sectors-data.ts). Prioritises developer velocity and eliminates CMS overhead for a team that updates content infrequently.
06 — Resolution
Every design decision mapped to a business conversion rationale
The website's primary commercial objective: convert senior decision-makers with a credible, premium digital presence. Nothing decorative — every choice has a reason.
Director bios with full credentials
Reduces 'who will actually work on this?' anxiety in high-trust B2B sales
450+ engagements stat prominent in hero
Establishes scale credibility immediately, before a prospect reads a word
Case studies filterable by sector
Lets prospects self-qualify — if their sector is covered, trust rises rapidly
Same-day response on contact form
Reduces friction at the critical inquiry moment
No junior team members listed
Reinforces senior-led positioning; the team shown is the team deployed
Lifecycle-framed services
Positions the firm as a long-term partner, not a transactional vendor
Brand Narrative
Born From Excellence. Built For What's Next. — converting a founding backstory into a competitive signal, across every page.