Dolphin Group
Website Redesign
Executive Intent
Build a modern, elegant corporate website that immediately communicates:
- Manufacturer (not reseller/consultancy)
- UAE-based (Abu Dhabi/UAE credibility)
- The 3 Core Offerings (distinct decision paths)
- Clear "Next Step" for every buyer intent (RFQ / QA Pack / Talk to Engineer)
UX Critique: P0 Critical Issues
Conversion & Credibility Leaks
Above-the-Fold Ambiguity
Current hero reads "general engineering" rather than "UAE Manufacturer + What we build + Next Step". This delays comprehension and reduces inquiry rate as users scan and leave.
Content Hygiene & Trust
Typos, inconsistent phrasing, and "leftover editorial" text dramatically reduce perceived competence. For industrial buyers, trust is the product.
CTA Visibility
Primary action (Request Quote) is not dominant. Users must "hunt" for the next step.
Form Confidence
Errors like "Enable JS" or unreliable form behavior trigger anxiety exactly at the conversion moment.
UX Critique: P1 & P2 Issues
Structure (IA) & Design System
P1: Information Architecture
Under-Hero Clutter
Multiple competing blocks create a "dashboard" feel instead of a guided narrative.
No Clear Decision Paths
Offerings (Thermal, Industrial, EPC) exist but users must self-diagnose where to go.
P2: Modern Corporate Design
Inconsistent Components
Mixed radii, shadows, and spacing signals "template" not "premium corporate".
Motion Risk
Adding GSAP to an unclear hierarchy amplifies confusion. Simplification must come before motion.
Proposed Sitemap & Architecture
Scalable, maintainable, and conversion-focused.
Main Navigation
- Solutions (3 Offerings)
- Industries (Sectors)
- Projects (Case Studies)
- Quality (Certifications + QA Pack)
- R&D
- Company (About, ESG, Careers)
- Request a Quote (Sticky CTA)
Reduces choice overload and improves "information scent".
CMS Collections
- Sectors: Template page per sector
- Solution Categories: Thermal / Industrial / EPC
- Products/Services: Individual item templates
- Projects: Case studies tagged to sectors
- Careers: Job listing + Apply CTA
- Insights: Blog/News
Structured fields so editors don't break the layout.
Homepage Framework
Motion System (GSAP)
Premium Corporate Philosophy: Restraint & Clarity.
Philosophy
- • Motion clarifies structure.
- • Use restraint: short durations.
- • Respect "prefers-reduced-motion".
- • Motion becomes an optional enhancement.
Animation Patterns
- • Hero: Staggered reveal (Opacity + Y).
- • Scroll: Fade-in once (no loops).
- • Micro: Tactile hover states on cards.
- • Forms: Inline validation feedback.
Performance Plan
- • GPU-friendly transforms only.
- • No expensive filters/blur effects.
- • Cap concurrent animations.
- • Lazy-init via ScrollTrigger.
Technical SEO & Analytics
Comprehensive setup for visibility and governance.
Technical Foundation
- Robots.txt: Clean directives blocking admin/thin pages.
- XML Sitemaps: Auto-updating per collection (Sectors, Products).
- Canonicalization: Tags on all pages to prevent duplicate content issues.
- Redirects: 301 mapping for legacy URLs to preserve link equity.
Core Web Vitals (CWV)
- LCP: Optimized hero assets & critical font loading.
- CLS: Reserved dimensions for images to stop layout shifts.
- INP: Minimized JS execution for responsiveness.
Structured Data (Schema)
Rich results eligibility:
- Organization: Brand identity.
- BreadcrumbList: Site hierarchy.
- Article: For Insights/Blog.
- JobPosting: For Careers pages.
- Project/Product: Where content supports it.
On-Page Governance
- Editable Title & Meta Description fields in CMS.
- Strict H1/H2/H3 heading hierarchy.
- Image Alt Text enforcement.
- Open Graph / Social Preview fields.
Submission & Analytics
- Google Search Console: Verification & sitemap submission.
- Bing Webmaster: Setup & submission.
- Google Analytics 4: Tracking setup.
- AI/LLM Submission: Optimization for GEO (Generative Engine Optimization).
Performance Targets
*Heavier motion requests may impact scores. We aim for the optimal trade-off.
Scope of Work Summary
Everything included in the delivery.
UX & UI Design
- • Competitor Review & Intent Mapping
- • IA + User Paths (RFQ Focus)
- • Design System (Typography, Components)
- • Desktop & Mobile Responsive Designs
Development & CMS
- • All core pages & templates implemented
- • CMS Collections (Sectors, Products, etc.)
- • Editor-friendly fields & guardrails
- • Searchable listings & filters
Interactions
- • GSAP Motion System implementation
- • Micro-interactions (Hover, Active)
- • Reduced-Motion handling
- • Performance optimization
SEO & Analytics
- • Full Technical SEO Setup (as detailed)
- • On-page structure in templates
- • GSC, Bing, GA4 Setup
- • Speed optimization pass
Handover & Training
Includes a Launch Checklist and a CMS Handover Guide so your team can manage content without breaking the design.
Commercials & Timeline
Investment for a premium corporate overhaul.
All-inclusive for stated scope (exclusive of taxes)
(Backend security updates)
Timeline
Starts after: 1) All content delivered, 2) Advance received.
*Late approvals will extend timeline.
Deliverables
- Final IA + Copy Deck
- Developed Responsive Website + CMS
- Full Technical SEO, GSC, Bing & Analytics Setup
- Launch Checklist + CMS Handover Guide
- 1 Year Maintenance (Backend Security Updates)
-
Weekly SEO Reports (3 Months) + Suggestions
*Implementation of ranking suggestions (e.g., PR services) costs extra and may involve external firms.
Project Timeline Breakdown
Typically ~21 working days (16-17 days execution window).
Critical dependency
Design and development begins ONLY AFTER: 1) All content is finalized & received in one delivery. 2) Kickoff is confirmed.
Phase 0: Pre-Start
Required before Day 1 begins.
Phase 1: Discovery
Days 1–5 Research & UX- • Confirm manufacturer positioning goals.
- • Competitor & Market Research.
- • Sitemap & User Flows.
- • Wireframing (Home + Templates).
- • CMS Architecture Blueprint.
Phase 2: UI Design
Days 6–10 Visual Direction- • Moodboarding & Style Guide.
- • High-Fidelity UI (Figma).
- • Responsive States (Mobile/Desktop).
- • Component Library creation.
Phase 3: Build
Days 11–17 Dev & Implementation- • CMS Backend Setup.
- • Frontend Template Build.
- • GSAP Motion & Interactions.
- • Technical SEO & Performance.
Phase 4: Launch
Days 18–21 QA & Handover- • Cross-browser QA & Bug fixes.
- • Content Validation.
- • SEO Submission.
- • CMS Training & Handover.
Timelines extend if there are delayed approvals or changes introduced after content finalization.
Design References
Benchmarks for modern industrial design.
Current Work References
Our portfolio: Live, In-Progress, and relevant benchmarks.
Animation Refs (Dolphin)
Live Projects
In Progress
High Load (Not Recommended)
*We differentiate between "Flashy" and "Corporate Performance". The last category is an example of what we avoid for Dolphin.
Video Previews
Visual walkthroughs and animation samples.
Visual Sample 1
Visual Sample 2
Visual Sample 3
Dolphin Group Website Redesign