Project Overview
In partnership with our long-term collaborators at Gray’s Communications, Metadeck delivered a full custom website rebuild for the Loughs Agency. The goal was to create a more intuitive and user-friendly experience for both site visitors and internal administrators, replacing the outdated structure and content management systems of the old website.
The Challenge
Loughs Agency needed:
- A better information architecture to make site navigation easier.
- A faster, more dynamic frontend for a smoother user experience.
- A powerful but easy-to-use CMS for managing a large amount of structured and dynamic data.
- A mapping solution to display and manage over 100 fishing areas interactively.
- An engaging e-learning platform aimed at schoolchildren across key stages, focused on environmental education.
Our Solution
The Loughs Agency project was a collaborative effort. Gray’s Communications led the information architecture and visual design for the main public website, ensuring the content and structure were intuitive and well-aligned with the agency’s goals. Metadeck took on the technical build of the entire platform, and we also led the UX design and front-end implementation for the e-learning section, drawing on our expertise in educational software design.
Metadeck delivered:
- Custom Website Development: Built using Vue 3 and InertiaJS, providing a SPA (Single Page Application) feel with backend-controlled URLs for clean navigation.
- Dynamic Mapping: Integrated Google Maps functionality, allowing users to drill down by region and explore fishing areas visually.
- Custom CMS Builder: Our first project featuring Metadeck’s block-based page builder, enabling flexible content updates without compromising the site’s visual integrity.
- Dynamic Data Integration: Structured storage of team members, fishing areas, and other data types, with front-end blocks dynamically fetching and rendering data as needed.
- Custom E-Learning Platform: Designed a fresh, engaging e-learning module where schoolchildren select friendly animal avatars and complete educational courses on the water cycle, climate change, and related environmental themes. Resources, activities, and assessments are tailored to different key stages.
- Hosting & Ongoing Support: Full hosting solution on our optimised infrastructure, alongside ongoing support and maintenance to ensure long-term stability and updates.
Technical Highlights
- Vue 3 + InertiaJS for modular, scalable frontend components.
- Laravel backend with structured, easy-to-extend architecture.
- Custom form builder integrated into the CMS for dynamic, user-driven interactions.
- Custom quiz module for educational content scoring.
- Performance Optimisation to ensure fast load times without full page reloads.
Results
- Simplified navigation and dramatically improved UX thanks to Gray’s Communications restructuring work and Metadeck’s technical delivery.
- Faster website load times and smoother page transitions.
- Easier content management for the Loughs Agency team, reducing the dependency on technical support for day-to-day updates.
- Successful launch of a fun, engaging e-learning experience for schoolchildren, with themed avatars, activities, and integrated progress tracking.
- Positive feedback from both Gray’s Communication and the Loughs Agency, praising the platform’s usability and ongoing support responsiveness.
What We’re Proud Of
- Collaborating seamlessly with Gray’s Communication to combine great design and technical execution
- Creating an engaging, age-appropriate e-learning experience tailored for schoolchildren
- Building dynamic, map-based tools to help the public understand regulated fishing areas
- Delivering a powerful but user-friendly CMS that empowers site admins without compromising brand standards
- Hosting and maintaining the platform for long-term success and support
We have worked with Metadeck for a number of years, bringing them in to deliver complex and intricate builds on behalf of a wide range of our clients. Their meticulous approach to project delivery is fully aligned with our own and working with them is always a pleasure.
Chris Gray – Director @ Gray’s Communications