01 Case Study

Rewards4
Platform

Modernising a multi-brand rewards ecosystem to a scalable, high-performance architecture.

Vue.js TypeScript Sass Bootstrap
Overview

The Rewards4 platform powers a group of sports-focused loyalty websites — Rewards4Racing, Rewards4Golf, Rewards4RugbyLeague, and Rewards4Sport — allowing users to earn points through online shopping and redeem them with their favourite sports brands.

I led the front-end modernisation of these sites, migrating them from a legacy architecture to a scalable, component-based system using Vue 3 and TypeScript, while improving usability across the platform through incremental UX enhancements.

The Challenge

The existing platform was built on a legacy stack that had become difficult to scale and maintain — C#, .NET Core Razor Pages, SCSS, Bootstrap, and heavy reliance on jQuery and CMS-driven rendering.

Key Issues

  • Performance limitations caused by server-heavy rendering
  • Inconsistent user experiences across multiple brand sites
  • Duplicated effort when updating styles and features
  • Slow development workflows due to limited component reuse

Goals

  • Modernise the front-end architecture
  • Improve scalability and performance
  • Standardise UX across brands
  • Enable faster development workflows
  • Improve usability without redesigning the core brand identity
My Role

I worked across both UX and front-end development, focusing on:

  • Leading the migration to Vue 3 and TypeScript
  • Refactoring legacy jQuery-based patterns
  • Designing a scalable multi-brand architecture
  • Improving mobile usability and UI consistency
  • Collaborating with backend developers on API integration
Approach

Incremental Migration

Rather than rebuilding the platform all at once, I introduced a phased migration strategy focused on stability and continuous improvement — identifying high-impact areas for refactoring, rebuilding features as Vue components, and gradually replacing legacy functionality.

Component-Based Architecture

I introduced reusable UI components to replace duplicated logic across sites, enabling consistent UI patterns, faster development, and easier maintenance.

Tenant-Based Multi-Brand System

I helped implement a tenant-based structure where all brands shared a common platform while supporting brand-specific styling and configuration, reducing duplication across projects.

Performance Optimisation

  • Reduced reliance on CMS-rendered content
  • Shifted to API-driven data loading
  • Loaded only required content per page
  • Used Cloudflare for caching and delivery optimisation
UX Improvements

Due to brand consistency requirements, a full redesign was not possible. Instead, I focused on incremental UX improvements that improved usability while preserving the existing visual identity.

  • Standardised spacing, typography, and reusable components across all sites
  • Introduced mobile-first layout improvements and improved key action visibility
  • Simplified user flows and reduced friction in browsing and interaction
  • Improved content grouping, hierarchy, and readability across devices
Impact
  • Improved performance across all platforms
  • Created a more consistent UX across multiple brands
  • Reduced development time through reusable components
  • Established a scalable architecture for future growth
  • Improved usability without requiring a full redesign
Reflection

This project strengthened my ability to modernise legacy systems while maintaining live products, design scalable multi-brand architectures, and deliver UX improvements within real-world constraints.

It reinforced the importance of incremental improvement — showing that meaningful UX gains can be achieved without large-scale redesigns.

← Back to Projects