Skip to content
← All projects
Business Websitecompleted

WMG Group

Corporate website for WMG Group, showcasing their services and expertise in waste management.

Client
WMG Group
Role
Frontend Developer
Duration
3 months
Date
2023-10
  • Next.js
  • Tailwind
  • Supabase
  • Framer Motion
Open the live app ↗

WMG Group Website

Project Overview

A modern, responsive corporate website for WMG Group, a leading waste management company. The website serves as their digital presence, showcasing their services, sustainability initiatives, and industry expertise while providing an intuitive interface for client interactions.

Key Features

  • Multilingual support (English, Russian)
  • Interactive service showcase
  • Case studies portfolio
  • Contact form with location integration
  • News and blog section
  • Career opportunities portal
  • Environmental impact calculator
  • Client testimonials

Technical Implementation

Frontend

  • Next.js 13 with App Router
  • TailwindCSS for styling
  • Framer Motion for animations
  • Internationalization with next-i18next
  • SEO optimization
  • Responsive images with Next/Image
  • Custom animations and transitions

Backend

  • Supabase for database and authentication
  • Serverless functions with Next.js API routes
  • Email integration with SendGrid
  • File storage with Supabase Storage
  • Analytics integration

Performance Optimizations

  • Static site generation for core pages
  • Dynamic imports for heavy components
  • Image optimization
  • Lazy loading
  • Code splitting
  • Performance monitoring

Design Philosophy

The design focuses on:

  1. Modern Aesthetics

    • Clean, minimalist design
    • Professional color scheme
    • Typography hierarchy
    • Whitespace utilization

  2. User Experience

    • Intuitive navigation
    • Clear call-to-actions
    • Fast page loads
    • Smooth transitions

  3. Brand Identity

    • Consistent visual language
    • Professional imagery
    • Corporate messaging
    • Trust indicators

Challenges & Solutions

1. Performance

  • Implemented image optimization
  • Used static generation where possible
  • Optimized third-party scripts
  • Implemented caching strategies

2. Multilingual Support

  • Created flexible content structure
  • Implemented language switching without page reload
  • Maintained SEO for all languages
  • Ensured consistent layouts

3. Content Management

  • Developed custom CMS integration
  • Created efficient content workflow
  • Implemented version control for content
  • Added preview functionality

Impact & Results

  • 40% increase in lead generation, measured over 6 months post-launch via contact form submissions and inquiry calls attributed to the website, compared to the same period pre-launch (baseline: word-of-mouth and trade show leads only)
  • 25% improvement in page load times compared to their previous WordPress site (3.2s → 2.4s average on mobile, measured via Google PageSpeed Insights)
  • 60% increase in mobile engagement, mobile bounce rate dropped from 68% to 27% after launch, indicating the responsive design was significantly more usable than the previous non-responsive site
  • 4.9/5 client satisfaction score from WMG's internal review
  • 30% reduction in bounce rate site-wide (measured via Google Analytics, comparing 3 months pre/post launch)
  • Zero maintenance incidents, the static generation approach has required no server maintenance since deployment

Lessons Learned

  • Multilingual sites need content-first architecture: We initially treated i18n as a frontend concern (swap text strings). But Russian and English copy have different lengths, line breaks, and reading patterns. We refactored to a content-first approach where each language version was authored independently, not translated word-for-word.
  • Static generation is underrated for corporate sites. WMG's content changes quarterly at most. SSG meant near-instant page loads with zero server costs, which mattered because the client had no DevOps team to maintain infrastructure. The site has run maintenance-free since deployment.
  • Environmental calculators need real data to be credible. The impact calculator was initially powered by industry averages. The client pushed back, their actual waste processing metrics told a more compelling story. Using real operational data instead of estimates made the calculator a genuine sales tool rather than a gimmick.
  • B2B clients judge you on speed of delivery, not code quality: WMG didn't care about my component architecture or Lighthouse scores. They cared that the site launched before their industry conference. Shipping a polished MVP on time built more trust than a perfect product delivered late.

Future Developments

  • Interactive 3D visualizations
  • Virtual facility tours
  • Real-time chat support
  • Advanced analytics dashboard
  • Integration with CRM
  • Enhanced mobile experience
  • Progressive Web App implementation

Technical Architecture

The website follows a JAMstack architecture with:

  1. Frontend Layer

    • Next.js components
    • TailwindCSS utilities
    • Animation system
    • State management

  2. API Layer

    • REST endpoints
    • Authentication
    • Form handling
    • Data fetching

  3. Content Layer

    • Markdown processing
    • Image optimization
    • Localization
    • SEO management