Elcorps Member
Services
SaaS / Web App
Website
Client
PT Bersama Zatta Jaya Tbk (Elcorps)
Year
My Roles
UI / UX Designer
Duration
1 Month
Project Overview
Key Impact / Metric: A dual-surface loyalty system shipped to 137,000+ members, with every verification and redemption state designed
Elcorps is not one brand it is an ecosystem of Muslim-lifestyle brands sharing a single membership. The loyalty program had to work for a member buying a scarf on a phone at a mall, and for the operations team reconciling thousands of redemptions on a desktop console. The hard part was never the visual style. It was keeping one truth consistent across two very different surfaces, at a scale where a single confusing screen reaches tens of thousands of people.
The Problem
Initial Assumption:
The brief arrived as a content problem: "Members aren't redeeming because the rewards aren't exciting enough. Give us a flashier catalog and more vouchers." On paper, sensible.
The Real Problem:
Auditing the existing flow told a different story, and the screens above are the evidence. Two friction clusters were silently suppressing redemption. First, verification: the moment a member mistyped an OTP, the old flow offered no recovery they were stuck, and many simply left. Second, redemption felt like a black box: members could not see how many points a reward would cost against their balance before committing, so they hesitated at the exact step that mattered. The catalog was not the problem. Clarity and control were.
Discovery Insights:
Using a UX Traceability & User Flow framework that I developed, I re-mapped every touchpoint from login to redemption.
• Insight 1 (The Clutter): An overload of information on the main page leads to decision fatigue (Miller's Law), leaving users unsure of what to click.
• Insight 2 (The Invisible Progress): Users remain unaware of how close they are to reaching the next tier, resulting in a lack of psychological motivation to make further purchases.
Key Decisions:
Verification that forgives a typo. Why: Error Prevention + Help users recover (Nielsen #9). Every OTP screen carries an inline error state, a clear "resend" path, and a confirmation modal before any destructive action. Benefit: A mistyped code no longer ends the session members recover in place instead of abandoning.
A redemption flow with no black box. Why: Visibility of System Status + Commitment & Consistency. The exchange screen shows a breakdown points required versus points remaining inside a confirmation modal before the member commits. Benefit: It removes the "will I waste my points?" hesitation that was quietly killing redemptions.
Rewards as real things, not abstract numbers. Why: Concrete over abstract + Miller's Law (chunking). Points live beside a categorized merchant catalog, a voucher detail with its own code, and a "My Vouchers" shelf. Benefit: Balance gains emotional weight members can finally see what they are working toward.
One system, two surfaces. Why: Consistency + Single Source of Truth. The member app and the web console share the same state model and the same semantic colors teal for success, red for error, orange for the redeem action. Benefit: Members and staff never see conflicting data, and the handover leaves no room for guesswork
Outcome
The system serves 137,000+ members across mobile and web, and every verification and redemption state is designed. What I am proudest of is structural: the same truth now lives on both surfaces, so a member's points and an operator's reports finally agree.
Reflection
The loudest request was "make the rewards prettier." The data said the opposite members did not need shinier prizes, they needed a flow that told them the truth at the moment of commitment. It is a reminder I relearn on every enterprise project: when a system serves 137,000 people, clarity is not a nicety. One unhandled error state is a thousand small betrayals, and one honest breakdown is a thousand small trusts. Designing at scale is really designing with consequences in mind.
