Building a Scalable Customer Engagement Framework
Building a Scalable Customer Engagement Framework
Engage Hub supported multiple campaign mechanics, but each new scheme was being designed as a separate experience.
I redesigned the underlying scheme structure into a reusable framework — keeping the experience consistent while allowing the interaction to change.
Engage Hub supported multiple campaign mechanics, but each new scheme was being designed as a separate experience.
I redesigned the underlying scheme structure into a reusable framework — keeping the experience consistent while allowing the interaction to change.
ROLE
Product Designer
Product Designer
TIMELINE
1 Week
1 Week
PLATFORM
Web & Android
Web & Android
Project Context
&
My Role
Project Context
& My Role
Engage Hub is a white-label engagement platform that enables businesses to run loyalty, promotion and incentive campaigns under their own brands.
I designed scheme experiences while helping bring consistency to a growing set of campaign types.
Engage Hub is a white-label platform used by enterprises to launch consumer-facing promotion and incentive programs across their customer base. Businesses deploy it under their own brand to run loyalty campaigns, scheme-based offers, and reward journeys — all powered by the same underlying platform.
My role was to design new scheme experiences while simplifying the growing UI complexity and maintaining consistency across the platform. As the scheme library grew, so did the design debt — and the need for a systematic solution.
Enterprise SAAS
Enterprise SAAS
White-Labelled
White-Labelled
Gamification
Gamification
01
01
The Challenge
The Challenge
Every new scheme became a new interface.
Every new scheme became a new interface.
As new schemes came in, each scheme was designed separately. But when I compared them, I found that most of the structure was the same — only the main interaction changed.
As new schemes came in, each scheme was designed separately. But when I compared them, I found that most of the structure was the same — only the main interaction changed.
The existing scheme landscape
Each scheme had been designed independently — without a shared template.
Each scheme had been designed independently — without a shared template.
What kept repeating?
Banner · Progress · Scheme information · Reward · Eligibility · History · CTA
Banner · Progress · Scheme information · Reward · Eligibility · History · CTA
The structure was repeating. The mechanic was changing.
The structure was repeating. The mechanic was changing.
Fixed Structure
Fixed Structure
Banner
Progress
Scheme Information
Reward
Eligibility
History
CTA
Banner
Progress
Scheme Information
Reward
Eligibility
History
CTA
Flexible Mechanic
Flexible Mechanic
Scratch Card
Spin the Wheel
Lucky Draw
Differential Time
Goly
Scratch Card
Spin the Wheel
Lucky Draw
Differential Time
Goly
02
02
Design Direction
Design Direction
Separate the structure from the mechanic
Separate the structure from the mechanic
I compared the existing scheme screens to identify what could be shared and what needed to change.
I compared the existing scheme screens to identify what could be shared and what needed to change.
Shared Structure
Keep common sections consistent across every scheme.
Keep common sections consistent across every scheme.
Flexible Mechanic
Let the main interaction change based on the scheme type.
Let the main interaction change based on the scheme type.
Reusable Components
Build common sections once and reuse them across schemes.
Build common sections once and reuse them across schemes.
Easy to Extend
New scheme types can build on the existing structure instead of starting from a new layout.
New scheme types can build on the existing structure instead of starting from a new layout.
03
03
Process
Process
From existing screens to a reusable framework
From existing screens to a reusable framework
1
2
3
4
Map
Map
Compared the existing scheme experiences and broke them into their major sections.
Compared the existing scheme experiences and broke them into their major sections.
Separate
Separate
Identified what stayed consistent and what changed with each scheme mechanic.
Identified what stayed consistent and what changed with each scheme mechanic.
Structure
Structure
Created a shared template for the common sections and a flexible interaction layer.
Created a shared template for the common sections and a flexible interaction layer.
Apply
Apply
Tested the framework across different scheme types to make sure it could support different mechanics.
Tested the framework across different scheme types to make sure it could support different mechanics.
04
04
Framework
Framework
Designing the Framework
Designing the Framework
I created a shared structure for every scheme, while keeping the main interaction flexible for each mechanic.
I created a shared structure for every scheme, while keeping the main interaction flexible for each mechanic.
Banner
Banner
Campaign branding and key information
Campaign branding and key information
Progress
Progress
Participation and completion status
Participation and completion status
Dynamic Interaction Module
Dynamic Interaction Module
The scheme-specific mechanic — this changes
The scheme-specific mechanic — this changes
Reward
Reward
Available and earned rewards
Available and earned rewards
Eligiility
Eligiility
Participation rules and criteria
Participation rules and criteria
History
History
Past participation and rewards
Past participation and rewards
05
05
Final Design
Final Design
Applying the Framework
Applying the Framework
The same framework was applied across different scheme types, while the interaction changed to match each mechanic.
The same framework was applied across different scheme types, while the interaction changed to match each mechanic.
Scratch Card
Spin The Wheel
Lucky Draw
Differential Time
Goly
06
06
Interactions
Interactions
Let the mechanic change
Let the mechanic change
The structure stays familiar, while each scheme gets an interaction suited to its mechanic.
Each animation communicates state change without distraction — aligned to the framework's principle that only the interaction layer should vary.
The structure stays familiar, while each scheme gets an interaction suited to its mechanic.
Each animation communicates state change without distraction — aligned to the framework's principle that only the interaction layer should vary.
Scratch Card ( Progressive reveal)
Each action gradually reveals the reward, building anticipation.
Each action gradually reveals the reward, building anticipation.
Spin The Wheel (Interactive reveal)
The spinning interaction creates anticipation before the reward is revealed.
The spinning interaction creates anticipation before the reward is revealed.
07
07
Comparision
Comparision
Before v/s After
Before v/s After
Before
Before
Separate layouts for each scheme
Repeated UI decisions
Structure varied by scheme
New scheme → new layout
Separate layouts for each scheme
Repeated UI decisions
Structure varied by scheme
New scheme → new layout
After
After
Shared scheme structure
Reusable components
Consistent information hierarchy
New mechanic → adapt the framework
Shared scheme structure
Reusable components
Consistent information hierarchy
New mechanic → adapt the framework
08
08
Ideas
Ideas
Explorations
Explorations
09
09
Impact
Impact
What changed
What changed
Consistent Structure
Common sections now follow the same information hierarchy across scheme types.
Common sections now follow the same information hierarchy across scheme types.
Less Repetition
Shared components reduce the need to solve the same UI patterns repeatedly.
Shared components reduce the need to solve the same UI patterns repeatedly.
Reusable Patterns
The framework creates a common foundation that can be reused across different mechanics.
The framework creates a common foundation that can be reused across different mechanics.
Easier to Extend
New scheme types can build on the existing structure instead of starting from a new layout.
New scheme types can build on the existing structure instead of starting from a new layout.
10
10
Reflection
Reflection
Strategic Takeaways
Strategic Takeaways
This project changed how I approached similar problems. Instead of treating every new requirement as a new screen, I started looking for the structure that could be reused underneath it.
The biggest learning was that consistency doesn't mean making every experience identical. It means creating a familiar structure while leaving room for the parts that genuinely need to change.
This project changed how I approached similar problems. Instead of treating every new requirement as a new screen, I started looking for the structure that could be reused underneath it.
The biggest learning was that consistency doesn't mean making every experience identical. It means creating a familiar structure while leaving room for the parts that genuinely need to change.
“Good systems create consistency without taking away flexibility.”
Next Project
B2B
Admin
Designing AI-Powered Scheme Configuration
Designed an AI-assisted workflow that simplifies enterprise scheme configuration, enabling faster campaign creation with greater accuracy and consistency.
B2B
Admin
Designing AI-Powered Scheme Configuration
Designed an AI-assisted workflow that simplifies enterprise scheme configuration, enabling faster campaign creation with greater accuracy and consistency.
