SicPama CRM + Diner QR Ordering

Designing MVP for Loyalty System

Reducing cognitive friction in a multi-user checkout flow
Designing MVP for Loyalty System
#Product Design, #MVP Loyalty Design, #CRM Design
#Product Design, #MVP Loyalty Design,
#CRM Design
#Product Design, #MVP Loyalty Design, #CRM Design

SicPama develops services that help restaurants improve performance and enable customers to place group orders at the table. Our key merchants requested a loyalty program that supports membership vouchers and stored-value top-ups integrated into merchant CRM and customer QR ordering.

My Role:

Product Designer (solo end-to-end)

Product Designer (solo end-to-end)

Challenge context

Introduction

Our key merchants in Singapore and Malaysia needed a loyalty program to encourage repeat visits and higher spend. They had no existing loyalty systems before, and marketing promotions were manually handled through social media. To replace the manual chaos, they wanted a modern loyalty system with tiered membership levels, vouchers, stored-value credits, and easy campaign setup.

Under tight demo pressure, we needed a Phase-1 loyalty experience that merchants could use and that we could scale across other merchants.

My Responsibility:

Loyalty MVP scoping across customer QR ordering + merchant CRM, defining functional requirements, system & flow design, information architecture, UI/UX design, design system, development handoff & alignment.

Loyalty MVP scoping across customer QR ordering + merchant CRM, defining functional requirements, system & flow design, information architecture, UI/UX design, design system, development handoff & alignment.

Company:

SicPama

SicPama

Timeline:

2 months

2 months

Discovery

Discovering the problem
We had two urgent problems:
1
Merchants couldn't run promotions efficiently

No tool existed to create and manage promotions. Setup was manual, slow, and easy to misconfigure.

2
Customers couldn't redeem promotions in QR ordering

Redemption depended on staff assistance, so promotions weren’t self-serve or clearly visible to users.

The first proposal tried to solve these with membership tiers based on stored-value credits (e.g.: top up $300 → get $350 = Level 1). On paper it looked like an effective loyalty system, but when I mapped the logic and edge cases, it didn’t hold:

Progression was purely payment-based

Benefit differences between levels were small and hard to feel

There were no meaningful perks or engagement drivers for users

Tiers would require extra rules, UI for level tracking and progress, edge cases, and a lot of time to develop

Meanwhile, the real needs were clearer:

Merchants need a simple and easy-to-use way to create and manage promotions

Customers need clear visibility: what benefits they can get, what they have, and how to redeem

SicPama and our business partners need a reusable system that works across merchants and can expand later

Aha moment!

After reviewing constraints and the actual business goal, I realized tiers would slow delivery and add complexity without changing core behavior. What we actually needed was: repeat visits + higher upfront payment.
A Turning Point: Changing the Vision
A Turning Point: Changing the Vision

I discussed my findings with engineers, stakeholders and our business partners. These findings led us pivot the strategy to two mechanics with high impact and significantly lower complexity:

Phase 1 MVP features:
Flexible stored-value top-up deals

Pre-pay and get bonus credits → supports upfront cashflow for merchants + strong “deal” perception for customers.

Membership vouchers

Welcome and birthday vouchers with rules like expiration, min-spend, category restrictions

The pivot satisfied every requirement:

Shippable under tight timelines

Directly aligned with business goals (repeat visits + higher spend)

Scalable foundation for Phase 2 and reusable for other merchants rollout

Synthesis

Requirements and Wireframes

To define Phase-1 patterns, I studied mature restaurant loyalty programs, focusing on stored-value & vouchers: rule sets, redemption flows, UI patterns, and trust building. From those findings, I defined the Phase-1 baseline requirements: promotion entities (top-ups + vouchers), rules (expiration, min-spend, category restrictions), and how promotions should surface in both CRM and ordering.


Then I created wireframes to validate system logic and integration into the existing CRM and ordering app. The goal was robustness and scalability, a framework that could survive real operations.

Review

First Feedback:
Our experience VS Singapore reality

Our stakeholder discussion validated the overall direction, but revealed a market mismatch:

As-is (first wireframes)
As-is (first wireframes)

We assumed the simplest experience was redeeming top-ups and vouchers directly inside QR ordering.

We assumed the simplest experience was redeeming top-ups and vouchers directly inside QR ordering.

Feedback from stakeholders:
Feedback from stakeholders:

Some merchants in Singapore required redemption at the via POS, not fully self-serve. The reason was operational trust and risk:

  • Staff-controlled redemption matches existing mental models

  • Merchants want to prevent “walk-away” risk without verification

  • POS is the trusted checkpoint in their workflow

To-be

Instead of forcing one approach, we prepared two versions:

  1. POC controlled redemption (Raptor POS)

  2. Online redemption handled in QR ordering

This reduced rollout risk and matched real merchant expectations:

  • Fast online redemption for self-service merchants

  • POS controlled redemption to prevent "walk away" scenarios

This reduced rollout risk and matched real merchant expectations:

  • Fast online redemption for self-service merchants

  • POS controlled redemption to prevent "walk away" scenarios

Synthesis

Scope After Iteration (Phase-1 MVP)

Supporting both realities changed the scope in a specific way: the system needed to work in two redemption models while staying Phase-1 shippable.

Merchant CRM
Top-up deals management

Create offers + table view

Membership vouchers management

Create welcome & birthday offers with rules (expiration/min-spend/menu restrictions) + table view

Customer side QR ordering:
Top-up deals

Offers, balance visibility, transaction history, redemption instructions (for POS flow)

Membership vouchers

Active offers, activity history, redemption instructions (for POS flow)

User profile page

Personal benefits management and anytime access

Online redemption version

Select vouchers and choose how much stored value to apply during payment

Out of scope:
POS benefits redemption flow

Handled by POS partner

Membership tier levels

Dropped due to complexity and value mismatch in Phase-1

Ideation

User Flows and Functional Requirements

After discussing all the details again with the stakeholders, I defined functional requirements and created detailed customer-side user flows. This diagram became our single source of truth for building consistently across CRM + ordering + partner constraints.

Information Architecture:
Low-fidelity wireframes:

Design

Building the CRM UI

Under tight deadlines, I intentionally used existing CRM patterns to reduce design and dev time and keep the interface familiar. The goal wasn’t “new design”, but it was operational usability: clear tables, quick scanning, safe creation, and low error rates.

1. Top-up deals creation and management
1. Top-up deals creation and management

I designed a scannable table + creation modal optimized for staff’s day-to-day questions:

  • What the customer pays?

  • What bonus they receive?

  • Are there any bonus vouchers?


In the Add New Top-Up Deal modal, the intent was error-prevention: show the credit exchange rate up front, require only minimum inputs (amount to pay + bonus money), and calculate total live so staff can confirm the deal value before saving. Optional offer voucher keeps campaigns flexible (e.g., add a free-drink voucher) without introducing tier logic complexity.

I designed a scannable table + creation modal optimized for staff’s day-to-day questions:

  • What the customer pays?

  • What bonus they receive?

  • Are there any bonus vouchers?


In the Add New Top-Up Deal modal, the intent was error-prevention: show the credit exchange rate up front, require only minimum inputs (amount to pay + bonus money), and calculate total live so staff can confirm the deal value before saving. Optional offer voucher keeps campaigns flexible (e.g., add a free-drink voucher) without introducing tier logic complexity.

2. Vouchers creation and management

Vouchers followed the same approach: staff should run this weekly without misconfiguring rules. The table surfaces the most decision-critical fields:

  • Voucher type (welcome/birthday/top-up related)

  • Applicable menu scope

  • Minimum spend and expiration rules

  • Target customers (all members or with promo code only).


In the creation modal, I constrained choices into a simple sequence that matches how restaurant teams think: choose target customers, define the offer and its rules. Also, quick validity presets (1 day / 7 days / 30 days / 1 year) keep setup fast and consistent, while still supporting real campaigns.

Vouchers followed the same approach: staff should run this weekly without misconfiguring rules. The table surfaces the most decision-critical fields:

  • Voucher type (welcome/birthday/top-up related)

  • Applicable menu scope

  • Minimum spend and expiration rules

  • Target customers (all members or with promo code only).


In the creation modal, I constrained choices into a simple sequence that matches how restaurant teams think: choose target customers, define the offer and its rules. Also, quick validity presets (1 day / 7 days / 30 days / 1 year) keep setup fast and consistent, while still supporting real campaigns.

Design

Design System Preview

The mobile ordering app lacked a consistent design system, which slowed delivery and created inconsistency. That's why I built a new scalable design system that covered SicPama's foundational components and new loyalty features. My goal was to ensure that the new system should be fast to develop, efficient for fast QR ordering, and reusable for any type of SicPama's merchants. This included creating tokens for colors, typography, and spacing for design consistency. The new design system helped to speed up the delivery and prepare SicPama's web app for future updates.

Design

QR Ordering UI
1. Receiving vouchers
1. Receiving vouchers

I designed the Welcome / Top up / Birthday cards right on the main menu so rewards are discoverable without digging into settings. The cards are designed simple and universal, so merchants can launch rewards without custom UI per restaurant type.

I designed the Welcome / Top up / Birthday cards right on the main menu so rewards are discoverable without digging into settings. The cards are designed simple and universal, so merchants can launch rewards without custom UI per restaurant type.

After signup, useers see a reward modal with the vouchers and key rules (type, value, min spend, expiry), then a single CTA to continue ordering, making rewards feel real without blocking the main ordering flow. The Birthday voucher is designed similarly, but it's provided automatically when members visit merchants on their birthday.

After signup, useers see a reward modal with the vouchers and key rules (type, value, min spend, expiry), then a single CTA to continue ordering, making rewards feel real without blocking the main ordering flow. The Birthday voucher is designed similarly, but it's provided automatically when members visit merchants on their birthday.

  1. Top up deals purchase

Top-up is designed as a “choose a package” decision:

  • balance first

  • large, scannable deal cards (top up X for Y)

  • price clearly separated to keep stored-value trust

  • clear redemption explanation (“Where/How to redeem”) and additional benefits (bonus voucher).

    Checkout keeps clarity: a simple breakdown and familiar payment options, with lightweight T&C access.

Top-up is designed as a “choose a package” decision:

  • balance first

  • large, scannable deal cards (top up X for Y)

  • price clearly separated to keep stored-value trust

  • clear redemption explanation (“Where/How to redeem”) and additional benefits (bonus voucher).

    Checkout keeps clarity: a simple breakdown and familiar payment options, with lightweight T&C access.

  1. Redeem benefits at counter (POS controlled)

Because SG partners required staff-controlled redemption, I treated redemption as guidance + verification, not an in-app “apply discount” moment. After an order is received, users see a “Use your rewards” card showing the two things customers understand: Balance and Vouchers, with a single “Redeem at counter” CTA. The next screen is a 4-step timeline that sets expectations and supports staff control. Balance/voucher detail remains accessible so users can confidently show what they have without bypassing verification.

Because SG partners required staff-controlled redemption, I treated redemption as guidance + verification, not an in-app “apply discount” moment. After an order is received, users see a “Use your rewards” card showing the two things customers understand: Balance and Vouchers, with a single “Redeem at counter” CTA. The next screen is a 4-step timeline that sets expectations and supports staff control. Balance/voucher detail remains accessible so users can confidently show what they have without bypassing verification.

  1. Redeem benefits for pay online

On the online checkout, I designed rewards as optional add-ons: customers can open Vouchers to pick one, and apply stored value via a dedicated “enter amount to use” modal without breaking the payment flow. After applying benefits, the order summary shows exact deductions before payment. The final “Order received” state reinforces completion while keeping top-up discovery visible for the next visit.

On the online checkout, I designed rewards as optional add-ons: customers can open Vouchers to pick one, and apply stored value via a dedicated “enter amount to use” modal without breaking the payment flow. After applying benefits, the order summary shows exact deductions before payment. The final “Order received” state reinforces completion while keeping top-up discovery visible for the next visit.

  1. My account (balance, vouchers, transaction history)

My Account is a lightweight benefits hub: a single card shows balance and vouchers count, and then routes into deeper views only when needed. The Voucher Center is organized by Available / Used / Expired tabs to reduce “where did my voucher go?” confusion. For balance transparency, Activity History mirrors banking logic: a big balance header + All / Added / Spent / Expired filters so users can quickly verify top-ups, spending, and expiration events. This structure kept the MVP fast to build while still making rewards feel trustworthy and easy to manage.

My Account is a lightweight benefits hub: a single card shows balance and vouchers count, and then routes into deeper views only when needed. The Voucher Center is organized by Available / Used / Expired tabs to reduce “where did my voucher go?” confusion. For balance transparency, Activity History mirrors banking logic: a big balance header + All / Added / Spent / Expired filters so users can quickly verify top-ups, spending, and expiration events. This structure kept the MVP fast to build while still making rewards feel trustworthy and easy to manage.

Conclusion

Impact

I delivered a Phase-1 loyalty MVP design that turned a broad “full loyalty system” request into a buildable, partner-aligned foundation for rollout in Singapore and Malaysia. Instead of shipping tiers with high rule complexity, we focused on two mechanics that directly support repeat visits and higher spend: stored-value top-ups + vouchers, designed across merchant CRM + customer QR ordering, with both POS controlled and online redemption supported.

My impact:
Scoped the MVP that is faster to implement

Dropped membership tiers (high complexity, low differentiation) and aligned stakeholders on a Phase-1 MVP centered on top-ups + vouchers

Made promotions runnable for merchants

Staff can quickly and easily manage top-up deals and vouchers

Designed two redemption modes on customers side QR ordering

Customers can easily find all active promotions and redeem them at any SicPama merchant, with POS verification or with online payment system.

Created a scalable foundation for Phase 2 and multi merchant use

Used simple, universal, and reusable components. Also, defined a consistent structure that can be rolled out to new merchants without redesign

Conclusion

Reflection

Designing this loyalty MVP was a practical exercise in product design under real constraints: limited time and high expectations for a demo. What started as a request for “tiers + everything” became a focused loyalty foundation built around top-ups and vouchers, shaped by partner constraints and redemption realities in Singapore. By staying close to partner feedback and designing both POS-controlled and online redemption, we reduced rollout risk while keeping the experience simple for customers and runnable for staff.


This project strengthened my ability to challenge early assumptions, align stakeholders around a pivot, and design an end-to-end system across CRM + customer ordering under tight timelines.

Lesson Learned:

Sometimes product design isn't about fulfilling every request,

it's about finding the real need and shipping the simplest foundation that delivers the best value.

Combining two decision tasks into one screen is a common design pattern for speed. However, it increases cognitive load and failure rates in group contexts. That's why it's important to design for one primary cognitive task per screen.