Case Study: Trulawn Website Development
Project Overview
Trulawn, a leading artificial grass supplier, needed a new website that would attract more clients with a faster, modern design while improving the management of their nationwide franchise network. The previous system assigned franchises based on towns, which lacked the flexibility needed for accurate lead distribution. Additionally, the client wanted a highly customizable content management system to reduce dependency on developers for updates.
Solution & Key Features
The new website was developed on WordPress with a fully bespoke theme and a custom Gutenberg blocks plugin, allowing Trulawn to create and update pages effortlessly while maintaining brand consistency. Key features include:
Custom Gutenberg Blocks Plugin
- Built a page and block builder to provide flexibility while maintaining design standards.
- Implemented structural blocks (container & cell) based on CSS Flexbox for fluid layouts.
- Integrated sliders, accordions, and dynamic content blocks.
- Enabled custom animations (fade-in effects, different animation styles) on structural blocks.
- Designed for three breakpoints, allowing admins to customize layouts for different screen sizes.
- Uses React.js in the editor for a smooth and interactive editing experience.
Lead Manager & Franchise Assignation System
- Integrated a postcode lookup function that dynamically assigns leads to the correct franchise team.
- Automated email notifications to assigned team members based on multiple criteria:
- Customer’s postcode.
- Type of property (school/home).
- Garden size.
- Pipedrive CRM integration, automatically syncing customer inquiries to reduce manual work and response times.
Performance & SEO Enhancements
The new site was optimized for speed and search engine visibility:
- Performance optimizations:
- Lazy loading and responsive images.
- Fetch priority adjustments.
- Minification and deferred loading of scripts.
- Removal of unused CSS/JS.
- Varnish cache implementation for faster page loads.
- SEO improvements:
- Schema.org markup for locations, products, and pages.
- Improved page structure for better discoverability.
- Trustpilot reviews integrated via Trustpilot embeds.
Content Migration & Scalability
- Migrated 1600+ location pages, each capable of unique layouts and content.
- Transferred 650+ portfolio articles with descriptions, before/after images, and Trulawn product details.
- Migrated hundreds of blog posts from the previous site.
- Manual database cleanup, removing unnecessary data while keeping essential content for better performance.
Results & Impact
The new website significantly improved usability, speed, and lead management efficiency.
PageSpeed Insights Scores:
- Mobile:
- 89 Performance
- 97 Accessibility
- 100 Best Practices
- 100 SEO
- Desktop:
- 97 Performance
- 97 Accessibility
- 100 Best Practices
- 100 SEO
Client Feedback & Business Impact
- Simplified UI: Removed unnecessary WordPress elements (e.g., comments) for a cleaner admin experience.
- Easier content management: Custom blocks provide flexibility without relying on developers.
- More leads generated: Around six months post-launch, the client observed an increase in inquiries.
- Better performance: Improved load times and smoother navigation compared to the previous site.
Conclusion
By developing a fast, flexible, and scalable WordPress site, I helped Trulawn enhance their online presence, optimize internal processes, and attract more potential customers. The bespoke theme, custom Gutenberg blocks, and automation features have provided long-term value, reducing workload while improving lead management and customer engagement.