Website Architecture & Theme Blueprint
A comprehensive information architecture, design system, and implementation plan for GPM Engineering's new website — informed by competitive research, industry best practices, and the Industrie RSTheme reference.
01 — Research
Current Site Audit: gpm.test
An analysis of GPM's existing website — what it does well, what needs improvement, and the content inventory that will carry forward.
What's Working
- Clear value proposition in hero: water solutions & engineering
- Comprehensive service coverage (14 distinct services)
- Product catalog with good filtering (Pumps, Motors, Blowers, etc.)
- Multiple office locations shown (Dhaka HQ, Chittagong, Uttara)
- Blog with technical SEO content (pump efficiency, wastewater design)
- 24/7 support and WhatsApp quick-contact sidebar
Issues to Address
- Stock imagery misrepresents the brand (generic office/construction photos)
- No case studies, client logos, or project portfolio with real work
- Industry sectors (Power, Petroleum, Oil & Gas, Automotive) lack depth
- Missing: certifications page, team page, partner/brand showcase
- Cyan/sky-blue color feels generic, not premium industrial
- Footer links to "Solutions", "Certifications", "Awards" — pages don't exist
- No product datasheets, specs, or technical documentation downloads
Content Inventory — Existing Pages
| Page | Status | Content Quality | Action |
|---|---|---|---|
| Home | Live | Good structure, needs real imagery | Redesign with new IA |
| About | Live | Mission/vision, capability overview, stats | Expand with team + timeline |
| Services (14 items) | Live | Individual pages exist, vary in depth | Standardize template, add specs |
| Products (filterable grid) | Live | Pump images, basic filtering by category | Add datasheets + specs |
| News/Blog | Live | 3+ technical articles, good SEO | Keep, expand content |
| Gallery | Live | Basic image gallery | Convert to project portfolio |
| Contact | Live | 3 office locations, map, form | Enhance with scheduling |
| Certifications | Missing | — | Create new |
| Case Studies | Missing | — | Create new |
| Industries | Missing | Basic mentions on home | Create dedicated pages |
02 — Research
Competitive Landscape
Key patterns from the world's leading industrial pump companies — Grundfos, Xylem, KSB, Sulzer, Flowserve, Wilo, and ITT.
Hybrid Solutions + Products
All top companies use a dual navigation approach: solutions organized by industry vertical (Water, Energy, Mining, HVAC) alongside products organized by type (centrifugal pumps, submersible, etc.). This serves both decision-makers browsing by need and engineers searching by specification.
Technical Depth + Marketing Polish
Grundfos and Xylem separate marketing content from technical portals. Product pages include performance curves, CAD downloads, datasheets, and selector tools. Case studies are organized by industry and application.
Deep Blue + Industrial Accents
Dominant colors across industry leaders: deep navy (#002B5C to #0052A3), with safety orange or green accents for CTAs. Professional product photography with technical cutaway views. Clean sans-serif typography with strong hierarchy.
Quote-First Conversion
Primary CTA is universally "Request Quote" — appearing in hero, product pages, and sticky headers. Secondary CTAs: "Download Datasheet", "Find a Dealer", "Schedule Consultation". Average 2–3 CTAs per page, strategically placed.
Pump Selectors & Calculators
Top differentiator: Grundfos's pump selector tool drives major conversion. Others offer product comparison tools, head loss calculators, and 3D visualization. These tools build trust and reduce sales friction.
Certifications & Global Presence
All competitors prominently display ISO certifications, industry association memberships, global installation counts, and client logos. Case studies with measurable outcomes (energy savings, uptime improvement) are standard.
GPM's differentiator is being a local, integrated solutions provider (pumps + water treatment + instrumentation + maintenance) — a one-stop shop that global brands can't match at the regional level. The new site should emphasize this "complete lifecycle partner" positioning.
03 — Research
Theme Evaluation & Recommendation
We evaluated themes from ThemeForest and TemplateMonster, alongside the client's preferred Industrie RSTheme reference.
| Theme | Picked Demo | Price | Tech | Fit for GPM | Rating |
|---|---|---|---|---|---|
| Industrie | Manufacturing → | ~$19–29 | HTML5 + Bootstrap 5 | Excellent | ★★★★½ |
| Forgex | Industrial Service → | ~$19 | HTML5 + Bootstrap 5 | Very Good | ★★★★ |
| Induyst | Heavy Industry → | $14 | HTML5 + Bootstrap | Good | ★★★½ |
| Megan Industrial | Manufacturing → | ~$22 | HTML5 + Bootstrap 5 | Good | ★★★★ |
| Industry (DexignZone) | Factory Industrial → | ~$19 | HTML5 + Bootstrap | Good | ★★★½ |
The client's instinct is correct. Industrie offers the best combination of design quality, page variety (32+ layouts), modern aesthetics, and industrial credibility. Its "Manufacturing" demo aligns closely with GPM's positioning. Key sections — services tabs, project portfolio, team grid, testimonials, counters, blog — map directly to GPM's content needs. We recommend using this as the foundation and customizing the color palette, typography, and content architecture for GPM's brand.
Design Patterns Worth Adopting
- Top bar with contact info + office hours
- Sticky header with "Get In Touch" CTA button
- Tab-based services section with industrial imagery
- Work process steps (01, 02, 03 numbering)
- "Why Choose Us" section with icon boxes + contact form
- Team member cards with role titles
- Counter stats section (Projects, Clients, etc.)
- Blog grid with category badges and read time
- Partner/client logo carousel
- Testimonial slider with company logos
Customizations for GPM
- Replace teal-green (#2d6a5a) with GPM's industrial blue
- Add mega-menu for Services and Products (more items than theme default)
- Add dedicated Industry pages (Power, Petroleum, Manufacturing, etc.)
- Build product catalog with filtering + datasheet downloads
- Add WhatsApp + multi-channel floating contact bar
- Localize for Bangladesh market (Bengali language toggle, BDT)
- Add case studies template (not in original theme)
- Enhance footer with 3 office locations
04 — Architecture
Sitemap & Information Architecture
The complete page hierarchy for GPM's new website — organized around four content pillars: Company, Services, Products, and Industries.
- Home Landing
-
About Company
- Company Story & Mission
- Leadership Team
- Certifications & Quality
- Awards & Achievements
- Career Opportunities
-
Services 14 Pages
- Deep Tube Well (DTW) Services
- Water & Pumping Solutions
- Water Treatment Systems
- Plumbing & Sanitary Works
- Fire & Safety Systems
- Energy & Electrical Solutions
- Measurement & Control
- Pipeline & Equipment Erection
- After Sales Services
- Annual Maintenance Service
- Audits & Consultancy
- 24/7 Emergency Services
- Consumable Spares
- Annual Service Programs
-
Products Catalog
- Industrial Pumps (Centrifugal, Submersible, Vertical Turbine, etc.)
- Electric Motors
- Blowers & Diffusers
- Flow Instrumentation
- Drives & Panels
- Fire Systems Equipment
-
Solutions Packages
- DTW — Deep Tube Well Systems
- WTP — Water Treatment Plants
- IRP — Industrial Recirculation Plants
- RO — Reverse Osmosis Plants
- RWH — Rainwater Harvesting
-
Industries Sectors
- Power & Energy
- Petroleum Refinery
- Oil & Gas
- Automotive Manufacturing
- Textile & Garment
- Food & Beverage Processing
- Pharmaceuticals
- Commercial & Infrastructure
-
Projects Portfolio
- Project Gallery (filterable by sector/service)
- Case Studies (detailed project breakdowns)
-
Resources Knowledge
- News & Blog
- Technical Articles
- Product Datasheets (downloads)
- FAQs
-
Contact Conversion
- General Inquiry Form
- Request a Quote
- Schedule Consultation
- Office Locations & Map
8 top-level sections, 14 service pages, 6 product category pages, 5 solution pages, 8 industry pages, plus project portfolio and resources. Each uses a standardized template system for maintainability.
06 — Architecture
Page Specifications
Detailed section-by-section specifications for each major page template.
Sections (in order)
- Hero: Full-width video/slider with tagline + dual CTAs
- Trust Bar: Client logos carousel
- Services Overview: 6 featured services with icon cards
- About Snapshot: Stats + company intro + "Since [year]"
- Industries We Serve: Visual grid of 6–8 sectors
- Featured Products: 4 product cards with "View Catalog" CTA
- Why Choose GPM: 4 differentiators + contact form
- Project Showcase: 3 recent projects with gallery
- Testimonials: Client quotes with company names
- Blog Preview: 3 latest articles
- CTA Banner: "Request a Quote" full-width
- Footer: 3 locations, links, newsletter, social
Standard Layout
- Breadcrumb Banner with service name + hero image
- Service Overview: What it is, who it's for
- Capabilities List: Specific deliverables
- Process Steps: How GPM delivers (numbered)
- Equipment/Products Used: Linked product cards
- Related Industries: Which sectors use this service
- Gallery: 4–8 project images
- Related Services: 3 cards linking to adjacent services
- CTA: Request consultation for this service
Catalog Layout
- Category Banner with product type name
- Filter Bar: By application, flow rate, brand
- Product Grid: Image + name + key specs
- Product Detail: Full specs table + images
- Technical Downloads: PDF datasheet, manual
- Performance Curves: Charts/graphs where applicable
- Related Products: "Also consider" section
- Quote Request: Pre-filled with product name
Sector Landing Page
- Hero Banner: Industry-specific imagery + headline
- Industry Challenges: Pain points GPM addresses
- Solutions Offered: Services relevant to this sector
- Products Used: Equipment for this industry
- Case Study Highlight: 1–2 relevant projects
- Client Logos: Companies in this sector
- CTA: "Discuss your [industry] requirements"
Project Deep Dive
- Project Header: Client, location, sector, date
- Challenge: What the client needed
- Solution: What GPM designed and delivered
- Equipment Used: Products and specs
- Results: Measurable outcomes (efficiency gains, uptime)
- Gallery: Before/after, installation photos
- Client Testimonial: Quote from project stakeholder
- Related Projects: Similar case studies
Multi-Office Layout
- Quick Contact Bar: Phone, Email, WhatsApp
- Inquiry Form: Name, email, phone, service interest, message
- 3 Office Cards: Dhaka HQ, Chittagong, Uttara with maps
- Office Hours Display
- Emergency Hotline Callout (24/7)
- Google Maps Integration (multi-pin)
07 — Design System
Color Palette & Typography
A refined color system and typography scale that moves GPM from generic sky-blue to a premium industrial identity.
Primary Palette
#003366#0072CE#E8532E#1A1A2ENeutral Palette
#F7F8FA#E9ECEF#6C757D#2D3748Semantic Colors
#28A745#DC3545#FFC107Deep Navy (#003366) replaces the current sky-blue as the primary brand color — it conveys authority, engineering precision, and trust. Signal Orange (#E8532E) serves as the action color for all CTAs, replacing the current cyan buttons. This combination mirrors industry leaders like Grundfos and Flowserve while remaining distinctive.
Typography System
| Role | Font | Weights | Usage |
|---|---|---|---|
| Display / Headlines | DM Serif Display | 400 (Regular) | H1, H2, hero text, section titles |
| Body / UI | Outfit | 300, 400, 500, 600, 700 | Paragraphs, navigation, buttons, cards |
| Technical / Data | JetBrains Mono | 400, 500 | Specifications, model numbers, code |
DM Serif Display gives GPM a distinguished, authoritative voice for headlines — it's refined without being ornate, perfect for engineering. Outfit is the workhorse: geometric, highly legible, and modern (far better than the current theme's Roboto/Space Grotesk). JetBrains Mono handles technical specs, model numbers, and data with clarity.
08 — Design System
Component Library
Standardized UI components that will be used across all pages — ensuring visual consistency.
CTA Hierarchy
- Primary: Signal Orange bg, white text, 48px height, rounded 6px
- Secondary: Deep Navy bg, white text, same size
- Outline: White bg, navy border + text
- Ghost: Text + arrow (→), no background
- All buttons: Hover lifts 2px with shadow, 300ms transition
Content Card Variants
- Service Card: Icon + title + excerpt + link
- Product Card: Image + name + key specs + "View" link
- Industry Card: Full-bleed image + overlay title
- Blog Card: Image + category badge + title + date + read time
- Team Card: Photo + name + role + social icons
- Stat Card: Animated counter + label
Reusable Section Patterns
- Page Banner: Breadcrumb + title + background overlay
- CTA Strip: Full-width orange bg + headline + button
- Logo Carousel: Client/partner logos, auto-scroll
- Testimonial Slider: Quote + avatar + company
- Contact Strip: 4 columns (address, email, phone, hours)
- Newsletter Bar: Email input + subscribe button
Header & Footer
- Top Bar: Email, phone, hours, language toggle
- Main Header: Sticky, logo left, nav center, CTA right
- Mega Menu: 3-column dropdown with icons
- Mobile Menu: Full-screen overlay with accordion
- Footer: 4 columns + bottom bar with copyright
- Floating Bar: WhatsApp, phone, email, chat (right side)
09 — Design System
Homepage Wireframe
ASCII wireframe showing the section flow and content placement for the redesigned homepage.
10 — Execution
Theme Recommendation
Final recommendation with customization roadmap for the Industrie theme.
Industrie by RSTheme — "Manufacturing" Demo
Purchase the WordPress + Elementor version from ThemeForest (~$59). This gives you the full Elementor page builder ecosystem, 32+ pre-built pages, and the ability to create custom page templates without writing code. The "Manufacturing" demo is the best starting point.
- Why WordPress: GPM's team can update content, blog posts, and products without developer help
- Why Elementor: Visual drag-and-drop editing for non-technical staff
- Why this demo: Manufacturing-specific layout matches GPM's positioning perfectly
- Customization effort: Medium — color swap, content replacement, 3–4 new templates needed
Required Theme Customizations
| Customization | Complexity | Priority | Description |
|---|---|---|---|
| Color palette swap | Easy | P0 | Replace theme teal with Deep Navy + Signal Orange |
| Typography update | Easy | P0 | Install DM Serif Display + Outfit via theme settings |
| Mega-menu build | Medium | P0 | Services (14 items) and Products need mega-menu columns |
| Product catalog | Medium | P1 | Custom post type with filtering, specs table, PDF downloads |
| Industry pages | Easy | P1 | 8 new pages using existing section templates |
| Case study template | Medium | P1 | Custom template: challenge → solution → results format |
| Floating contact bar | Easy | P1 | WhatsApp, phone, email sidebar (existing in current site) |
| Multi-location footer | Easy | P0 | 3 offices in footer with addresses and maps |
| Bengali language support | Complex | P2 | WPML or Polylang plugin for bilingual content |
| Quote request system | Medium | P1 | WPForms or Gravity Forms with product pre-selection |
11 — Execution
Implementation Roadmap
A phased approach to launching the new GPM website, from theme setup to full deployment.
Phase 1 — Foundation (Weeks 1–3)
Purchase and install Industrie theme. Set up WordPress with Elementor. Configure color palette, typography, and global styles. Build header/footer with mega-menu. Create Homepage using new wireframe. Set up Contact page with 3 office locations.
Phase 2 — Core Content (Weeks 4–6)
Build About page (team, mission, certifications). Create all 14 service page templates with real content. Set up product catalog custom post type with categories and filtering. Build 5 Solution package pages (DTW, WTP, IRP, RO, RWH).
Phase 3 — Depth & Trust (Weeks 7–9)
Create 8 Industry sector pages. Build case study template and publish 3–5 initial projects. Set up blog with migrated articles. Add client testimonials. Implement quote request forms. Add floating contact sidebar.
Phase 4 — Polish & Launch (Weeks 10–12)
SEO optimization (meta tags, schema markup, sitemap). Performance optimization (image compression, caching, CDN). Mobile responsiveness testing across devices. Browser compatibility testing. Analytics setup (Google Analytics, Tag Manager). Staging review and final content proofing. DNS migration and launch.
Phase 5 — Post-Launch Enhancements (Ongoing)
Bengali language support (Phase 2 priority). Product datasheet PDF generation. Pump selector tool (if budget allows). Customer portal for service tracking. Regular blog content (2 articles/month). Performance monitoring and iteration.
With the Industrie theme as the foundation, the bulk of development is content creation and template customization rather than building from scratch. The phased approach ensures a solid MVP launches quickly, with depth added progressively.
Real photography is the single biggest factor in quality. Stock images will undermine the entire redesign. Budget for a professional photographer to shoot GPM's offices, equipment, team, and 3–5 active project sites before Phase 2 begins. Client logos, testimonials, and case study data also need to be gathered from the sales team early.