The National College

Brief

🧩 Project Summary

The National College needed a responsive, modern website to support educators with accessible training and certification tools. I was brought on by Synergi Tech to translate their in-house design concepts into clean, scalable front-end code—ensuring brand consistency, device responsiveness, and WCAG accessibility throughout the experience.

🎯 The Challenge

The goal was to deliver a fast, frictionless learning portal that felt both welcoming and professional—supporting busy teachers across a variety of devices and browsers. Designs were visually well-considered but needed front-end precision and accessibility implementation to ensure the site performed as reliably as it looked.

Additionally, the site needed to be lightweight and performant, using a static-site generator (11ty) and utility-first styling (TailwindCSS) to keep delivery fast and maintainable.

🛠️ My Approach

1. Front-End Architecture with Reusability in Mind
   Using 11ty and TailwindCSS, I built out modular, responsive components that could be reused across page templates—minimising duplication and easing future iteration.
2. Pixel-Perfect Translation of Figma Designs
   Working closely with the client’s designer, I recreated visual layouts with accuracy, ensuring spacing, typography, and hierarchy matched the intended tone and voice of the brand.
3. Accessibility by Design
   Every component was designed to meet WCAG AA standards. Semantic HTML, focus states, colour contrast, and keyboard navigation were baked in from the start—helping create an inclusive experience for all users.
4. Stakeholder Feedback LoopsI collaborated weekly with stakeholders to gather feedback and refine features. This agile feedback process helped us resolve usability snags early, particularly around mobile breakpoints and interaction patterns.

📱 Outcomes

• Fully responsive UI that performs seamlessly across devices
• Accessible, inclusive markup built to WCAG AA standards
• Lightweight static site built with performance-first architecture
• Clean, component-based design system for long-term maintainability
• Positive stakeholder feedback on delivery quality and turnaround

💡 Why This Matters

In fast-paced, time-poor industries—whether it’s education or banking—users don’t have the luxury to “figure things out.” They need clarity, simplicity, and confidence in the tools they rely on.

This project reflects the kind of work I enjoy most: taking strong visual ideas and turning them into intuitive, accessible, and performance-optimised digital products.

Juan’s work not only elevated the usability of our platform, but also made it more inclusive and future-proof. His attention to detail and clear communication made collaboration effortless.

Client feedback via Synergi Tech

Details