Overview
The Rewards4 platform powers a group of sports-focused loyalty websites, including:
- Rewards4Racing
- Rewards4Golf
- Rewards4RugbyLeague
- Rewards4Sport
These platforms allow 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 also 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 and Bootstrap
- Heavy reliance on jQuery and CMS-driven rendering
Key Issues
- Performance limitations: Pages were slow due to server-heavy rendering and inefficient front-end behaviour.
- Inconsistent user experience: Each brand site had variations in layout, spacing, and components, leading to fragmentation.
- Complex multi-brand structure: Updating styles and features across sites required duplicated effort.
- Slow development workflow: Lack of reusable components made development time-consuming and harder to scale.
The Goal
- Modernise the front-end architecture
- Improve performance and scalability
- Standardise UX across multiple brands
- Enable faster and more efficient development
- Improve usability without redesigning 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 system
- Improving mobile usability and UI consistency
- Collaborating with backend developers on API integration
Approach
Incremental Migration Strategy
Rather than rebuilding everything at once, I implemented a phased approach:
- Identified high-impact areas for refactoring
- Rebuilt features using Vue components
- Gradually replaced legacy functionality
This ensured the platform remained stable while evolving.
Component-Based Architecture
I introduced a reusable component system to replace duplicated logic across sites.
This enabled:
- Consistent UI patterns
- Faster development
- Easier maintenance
Tenant-Based Multi-Brand System
I helped implement a tenant-based structure where:
- All brands shared a core platform
- Styling and configuration were applied per brand
This allowed us to scale efficiently without duplicating effort.
Performance Optimisation
- Reduced reliance on CMS-rendered content
- Shifted to API-driven data loading
- Loaded only necessary content per page
- Utilised Cloudflare for caching and performance
Before vs After
Before
- jQuery-driven interactions
- Server-rendered pages
- Duplicated styles across brands
- Slower development cycles
After
- Vue 3 component-based architecture
- API-driven front-end
- Shared system with configurable branding
- Faster, more scalable development
UX Improvements Within Constraints
Due to brand consistency requirements, a full redesign wasn't possible. Instead, I focused on incremental UX improvements that enhanced usability while preserving the core look and feel.
1. Improving Visual Consistency
Before
- Inconsistent spacing, typography, and UI patterns
- Similar components behaved differently across pages
After
- Standardised spacing, typography, and reusable components
- Unified UI patterns across all sites
Impact
- More cohesive and professional experience
- Reduced cognitive load for users
- Easier system-wide updates
2. Enhancing Mobile Usability
Before
- Layouts not fully optimised for mobile
- Dense content and harder-to-access interactions
After
- Mobile-first layout improvements
- Better spacing and prioritisation of key actions
Impact
- Improved usability on mobile devices
- Reduced friction in browsing and interaction
3. Simplifying Key Interactions
Before
- Some flows included unnecessary steps
- Call-to-actions lacked clarity or consistency
After
- Simplified user flows
- Improved CTA clarity and visibility
Impact
- Easier navigation and task completion
- More intuitive user journeys
4. Improving Readability & Hierarchy
Before
- Dense layouts with weak visual hierarchy
- Important information not clearly prioritised
After
- Clearer hierarchy using spacing and typography
- Better content grouping and structure
Impact
- Improved scanability and readability
- More modern and user-friendly interface
Impact
This project resulted in:
- Improved performance across all platforms
- A consistent UI and UX across multiple brands
- Reduced development time through reusable components
- A scalable architecture for future growth
- Enhanced usability without requiring a full redesign
Reflection
This project strengthened my ability to:
- Modernise legacy systems while maintaining live products
- Design and implement scalable multi-brand architectures
- Deliver UX improvements within real-world constraints
- Balance technical decisions with user experience needs
It also reinforced the importance of incremental improvement, showing that meaningful UX gains can be achieved without large-scale redesigns.