Voucher Connect
An enterprise-grade SaaS platform serving premium hospitality and retail businesses across Ireland and the UK. As Lead Frontend Developer, I executed a comprehensive, specification-driven technical redesign — overhauling the conversion architecture, enforcing WCAG 2.1 accessibility standards, engineering interactive custom components, and delivering a Google PageSpeed score of 90+ on desktop across all primary acquisition surfaces.
The Corporate Brief.
Voucher Connect is a unified gift card, loyalty, and customer retention engine — powering premium venues including Scholars Townhouse Hotel, Mink, Bresson, and Oliver Dunne Restaurants. Operating on a low-commission (3.6%), no-monthly-fee SaaS model with a live-in-5-minutes onboarding promise, the platform positions itself as the growth partner for hospitality and retail businesses of every scale.
Armed with a rigorous 12-page technical specification document and complete Figma designs, I was tasked with executing a full rebuild of the platform's primary acquisition surfaces: the Homepage, the Sub-Hero Component, and an exhaustive Features Page. The mandate was uncompromising — engineer a modern, conversion-focused architecture that clearly communicates a 7-module product suite across Online, In-Store, and On-POS channels without compromising on performance, accessibility, or design fidelity.
Platform Architecture.
Voucher Connect's full product suite spans seven distinct modules — each targeting a different revenue and retention mechanic for hospitality and retail operators. Communicating this breadth without creating cognitive overload was the central UX challenge of the redesign:
The platform also operates across three sales channels — Online, In-Store, and On-POS — with a native mobile app (iOS and Android) for staff redemptions, and a management dashboard for reporting, product management, and campaign analytics. Structuring all of this into a coherent, navigable website was a content architecture challenge as much as a frontend one.
Component Engineering.
Selling a multifaceted SaaS product to busy hospitality operators requires breaking down complex technical capabilities into instantly legible, conversion-focused interactions. I developed four high-impact custom components using CSS and JavaScript — replacing bloated third-party plugins throughout:
Dynamic Hero Ticker
A continuous smooth-scrolling CSS ticker displaying real client performance cards — "March Sales Report: €12.5k sold, 37% increase", "Easter Campaign: €3,780 generated", "156 Tickets Sold". Engineered to pause on hover, instantly validating platform ROI without requiring a single click.
Integration Marquee
An infinite horizontally-scrolling loop showcasing partner APIs — Flipdish, WooCommerce, Zapier, Phorest. Logos render in greyscale at rest and transition to full colour on hover via a precise CSS filter transition.
Modular Product Grid
A responsive 7-module grid with staggered fade-up reveal delays (80–120ms) and optimised hover states that expand to show full module descriptions — communicating product depth without front-loading every detail.
ARIA-Compliant Demo Modal
A custom "Book a Demo" overlay with a programmed ARIA focus trap — ensuring keyboard navigators remain inside the modal while open, with seamless ESC key closure logic. Fully compliant with WCAG 2.1 keyboard navigation requirements.
Design Systems & Responsive Matrix.
Translating Figma designs into a pixel-perfect WordPress/Elementor environment required strict adherence to the design system spec throughout. I enforced an 8px baseline grid with a maximum content width of 1280px, applying the Inter web font stack across precise heading hierarchies (H1: 56px/ExtraBold down to Badges: 12px/SemiBold). The layout was programmed across a full 5-tier responsive matrix to guarantee flawless cross-device functionality:
- Desktop (1280px+): Full multi-column layouts with complex hover interactions and the complete ticker, marquee, and grid components at full fidelity.
- Large Tablet (1024–1279px): Fluid scaling of the 3-column "Omnichannel" section (Online, In-Store, On POS) with maintained feature grid integrity.
- Tablet (768–1023px): Graceful degradation to 2-column grids; sticky navigation collapses into an animated hamburger overlay.
- Mobile Large (480–767px): Stacked single-column architecture with minimum 44px × 44px touch targets per Apple HIG and Google Material Design standards.
- Mobile Small (320–479px): Full layout reflow with typography scaling and touch-optimised CTAs for the smallest device viewports.
Performance, SEO & Accessibility.
Enterprise SaaS platforms demand enterprise-level performance standards. Every aspect of this build was engineered to hit the following targets and pass rigorous QA protocols:
Core Web Vitals Optimisation
- Google PageSpeed Score 90+ on desktop achieved via a lightweight child theme, WebP image formats, and deferred JavaScript loading.
- LCP under 2.5 seconds — Largest Contentful Paint optimised through self-hosted asset delivery and aggressive image preloading.
- FID under 100ms — First Input Delay minimised by deferring all non-critical scripts and eliminating render-blocking resources.
- CLS below 0.1 — Cumulative Layout Shift controlled through explicit image dimensions and stable layout reservations across all breakpoints.
WCAG 2.1 Level AA Compliance
- 4.5:1 minimum colour contrast ratio enforced across the entire brand palette.
- Programmatic label association for all form inputs — no label/input disconnects throughout.
- No colour-only information — all state changes conveyed through multiple visual cues, not colour alone.
- Reduced-motion compliance — all Intersection Observer scroll animations respect the
prefers-reduced-motionmedia query, ensuring the experience is safe for users with vestibular disorders.
Technical SEO & Analytics
- Canonical URLs correctly implemented across all pages to prevent duplicate content issues.
- Open Graph meta tags configured for social sharing across all primary pages.
- Schema.org structured data for Organisation and Product entities, supporting rich search results.
- Google Tag Manager & GA4 verified post-launch — conversion events and scroll depth tracking confirmed operational with zero JavaScript console errors across Chrome, Safari, and Edge.
Results & Outcomes.
| Metric | Outcome |
|---|---|
| PageSpeed Score | 90+ on desktop across all rebuilt surfaces |
| LCP | Under 2.5 seconds |
| FID | Under 100ms |
| CLS | Below 0.1 |
| Accessibility | WCAG 2.1 Level AA compliant throughout |
| Responsive coverage | 5-tier matrix — 320px to 1280px+ |
| Custom components | 4 built from scratch — ticker, marquee, module grid, ARIA modal |
| Analytics | GA4 & GTM conversion tracking verified across Chrome, Safari, Edge |
Key Observations.
Real Performance Data Converts Better Than Promises
The dynamic hero ticker — displaying real client campaign results like "€12.5k sold, 37% increase" and "1,500 emails collected" — is the most commercially significant component on the page. Rather than claiming platform ROI in marketing copy, it demonstrates it in real time from real customers. This kind of social proof, placed at the point of maximum attention, is more persuasive than any written claim.
Accessibility and Performance are Complementary, Not Competing
A common misconception in SaaS frontend development is that rich interactions and accessibility compliance are in tension. This build demonstrated the opposite — by using CSS-first animations, native HTML semantics, and ARIA patterns implemented correctly from the outset, the site achieved both a 90+ PageSpeed score and full WCAG 2.1 Level AA compliance simultaneously.
Specification-Driven Development Protects Quality at Scale
Working from a 12-page technical specification document with complete Figma designs created a contractual clarity that is rare in agency frontend work. Every spacing decision, breakpoint behaviour, and interaction state was defined before a line of code was written — eliminating scope creep, reducing QA cycles, and ensuring the delivered build matched the agreed design with pixel-level fidelity.