Payback – CMS & Loyalty Systems (B2B)

Senior Frontend Developer · 2018 · 4 months · 6 people · 5 min read

Delivered a B2B loyalty management CMS for partner retailers — with white-label theming, responsive device support, and a modular dashboard for running vouchers, loyalty plans, and campaign activity.

Overview

Built Payback's B2B loyalty platform — a polished CMS that helped partner brands manage their reward programs, voucher campaigns, and loyalty operations from a single responsive interface. The product was designed for business users and field staff, with a customisable UI built in Angular by a six-person frontend team.

Problem

Payback's partners lacked a single place to manage loyalty programs across their different networks. Existing tools were too rigid or too manual, forcing them to rely on internal support for every change. The platform needed to feel like each partner's own system, support multiple brands, and work smoothly on both desktop and tablet devices.

Constraints

  • Platform needed white-label theming so each partner could present its own brand identity
  • Multi-partner support required isolated client views and configurable dashboard layouts
  • Responsive design had to work for desktop marketing teams and tablet-based retail staff
  • The delivery window was four months with six frontend developers and limited backend API changes
  • The interface had to be straightforward for business users while supporting complex loyalty workflows

Approach

Worked within a six-person Angular frontend team, focusing on flexible UI patterns and consistent behaviour across devices. We built a runtime theming system with CSS custom properties so partners could change the look of the platform without new builds. The interface was designed to adapt smoothly across desktop, tablet, and mobile. Regular sprint demos with the product owner kept the team aligned and let us adjust direction quickly as we learned more about partner needs.

Key Decisions

CSS custom properties for runtime multi-theme support

Reasoning:

Each partner wanted a platform that felt like their own. Using CSS custom properties let us swap colors and visual styles at runtime for every client, without rebuilding the application for each one.

Alternatives considered:
  • SCSS variables with separate builds for each partner
  • Angular Material themes with limited custom branding
  • Inline style overrides at runtime

Responsive-first layout using Angular Flex Layout and SCSS breakpoints

Reasoning:

The platform was used by desktop marketing teams and tablet-based retail staff. A responsive-first design meant one app could serve both groups without duplicate code or separate interfaces, and it helped keep the experience consistent as users moved between devices.

Alternatives considered:
  • Desktop-only interface with a companion mobile app
  • Fixed-width layout with horizontal scroll on smaller screens
  • PWA with offline-first behaviour

Component-driven dashboard with configurable widgets per client

Reasoning:

Different partners wanted different things from the dashboard. Building it from composable widgets let us shape each client’s view without custom development work for every partner.

Alternatives considered:
  • A single fixed dashboard layout for all clients
  • Separate dashboard builds per partner
  • Third-party embedded dashboard tools

Tech Stack

  • Angular
  • TypeScript
  • RxJS
  • SCSS
  • CSS Custom Properties
  • Angular Material
  • Karma
  • Jasmine

Result & Impact

  • Multi-brand rollout
    Partner Deployment
  • White-label configurations
    Theme Variants
  • Desktop, tablet & mobile
    Device Support
  • 6 frontend developers
    Team Delivered

The Payback CMS gave partner brands a platform they could actually own. Campaign managers could launch vouchers, check loyalty point balances, and manage loyalty tasks from one place. White-label theming made the product feel native to each partner and helped it fit into their existing brand experience.

Learnings

  • White-label theming works best at the CSS layer — runtime custom properties are far more flexible than compile-time theme builds
  • Configurable dashboards need clear contracts between frontend and backend to stay maintainable
  • Regular product demos help surface misaligned assumptions early, before they become expensive to fix
  • Making responsive layout decisions early saves rework when mobile or tablet needs appear late in the project
  • For non-technical business users, clarity and ease of use matter more than technical elegance
  • Separating client-specific configuration from shared app logic is essential for long-term maintainability

Multi-Theme & White-Label Architecture

Built a flexible theming system that let each B2B partner feel at home in the platform:

  • CSS custom properties theming enabling brand customisation — colors, typography, and visual treatments — applied at runtime without recompilation
  • White-label configuration allowing each partner to use the platform under their own brand with zero code changes
  • Consistent component behaviour across themes, ensuring the interface felt familiar regardless of branding
  • Theme switching without page reload keeping the experience smooth for clients managing multiple partners

Loyalty & Voucher Management Dashboard

Delivered a practical interface for loyalty teams to manage their programs:

  • Loyalty points overview showing point issuance, redemption activity, and member balances
  • Voucher campaign builder for creating, scheduling, and reviewing promotional offers across partner networks
  • Campaign status panels showing active, pending, and completed campaigns at a glance
  • Customer segments highlighting priority groups and loyalty behaviours
  • Redemption workflow support making it easier to spot where members were dropping out of reward journeys

Partner Marketing Tools

Empowered partner teams to run promotions directly:

  • Campaign creation for conditional voucher rules and reward structures
  • Target audience selection using loyalty history, purchase patterns, and client-defined segments
  • Automated lifecycle triggers for welcome rewards, birthday offers, and retention messages
  • Campaign summaries showing launch status and response in a simple format

Responsive, Cross-Device Interface

Designed to serve both office and field users across the partner network:

  • Fully responsive layout working for desktop marketing teams and tablet-based retail staff
  • Touch-friendly controls and data lists for smaller screens
  • Adaptive navigation that collapses cleanly without losing functionality
  • Cross-browser compatibility to support the enterprise environments used by partner teams
All projects