Overview
The B-Infinite app bridges loyalty rewards and payment functionalities by combining B-Loyalty and B-Pay. The app leveraged Sweetspot’s SaaS platform for its core functionality and an LMS (Loyalty Management System) to manage the rewards program. This project enhanced the thrill of discovery and user engagement by aligning design, marketing, and branding efforts.
©2020
My Role
As the Product – UI/UX Designer with a focus on UX, I was responsible for:
- Designing intuitive interfaces and user flows for loyalty and payment functionalities.
- Collaborating with marketing to create visually engaging campaigns that embodied the brand’s key visual.
- Ensuring all design elements aligned with the brand’s identity and user expectations.
- Conducting internal usability testing to refine the design based on user and business needs.
Team Involved
- AGM (Decision Maker)
- User Researcher
- Marketing Team
- Developers
- Stakeholder
Problem
The existing app lacked cohesion between loyalty and payment features resulting in user confusion and limited engagement. Users faced difficulties redeeming points and making payments, additionally, the app’s interface didn’t effectively convey the brand’s promise of delivering a thrilling and rewarding experience
Challenges
- Aligning the app’s user interface with the brand’s core identity of thrill and reward.
- Communicating clearly which merchants accepted B-Loyalty, B-Pay, or both.
- Simplifying complex navigation for earning, redeeming, and paying within a single platform.
Pain Points
- The loyalty redemption process was unclear, leading to missed opportunities for rewards.
- Simplifying complex navigation for earning, redeeming, and paying within a single platform.
01.
Action
Research & Planning
Conducted competitive research into loyalty programs (BonusLink & Mesra) and e-wallet platforms (Boost, Touch ‘n Go & MAE), identifying features that could amplify the user’s sense of thrill and satisfaction.
User Flows & Wireframes
Created user flows for every phase or sprint, including sign-up, wallet top-ups, loyalty redemption, and coupon engagement. Designed wireframes to map out the flow, focusing on clarity and simplicity.
Testing & Refinement
Compiled early-stage UI designs into PDF notes to collect stakeholder feedback.
Shared interactive prototypes via Adobe XD to gather feedback from the team for design iteration.
02.
Solution
- Redesigned the app to integrate loyalty and payment features into a single interface that reflects the brand identity while ensuring a user-friendly experience.
- Incorporated eye-catching visuals and vibrant elements into the UI to reflect the brand’s exciting personality.
Dynamic Merchant Indicators
Icons to show which merchants accept B-Pay, B-Loyalty, or both, enhancing clarity for users.
Secure Payment Flow
A simple yet secure PIN-based payment flow for B-Pay.
01. Visit Merchant / Checkout
User Action: User decides to pay with BPay, user opens the B Infinite app and selects the BPay icon
Touchpoints: In-store cashier counter → App home screen → B Infinite Pay
App Response: App opens payment module with QR scanner & scan merchant displays BPay QR
02. Enter Payment Amount
User Action: User enters the total amount to pay (in RM).
Touchpoints: Payment input screen.
App Response: App retrieves merchant info and displays payment input screen.
03. Confirm Payment & Verify PIN
User Action: User enters 6-digit BPay PIN for security verification.
Touchpoints: PIN entry screen.
App Response: App verifies PIN, processes transaction securely.
04. Transaction Complete
User Action: Payment successful.
Touchpoints: App confirmation screen → Push notification → Receipt (#confirmpaid).
App Response: Displays merchant name, amount paid, date & time.
Simplified Burn (BPoints) / Buying Process (BPay)
Allow users to burn BPoints or buy using B Infinite Pay seamlessly through in-app offers and vouchers.
01. Discover Offer
User Action: User browses In-App Promo or Voucher section.
Touchpoints: App homepage → Promo/Voucher listing.
App Response: Displays available promotions and redemption amount.
02. Choose Payment Option
User Action: User selects Burn BPoints or Burn using BPay (eWallet) at checkout.
Touchpoints: Promo detail page → Payment options screen.
App Response: App calculates total points or the amount required.
03. Confirm Transaction
User Action: User reviews total and confirms redemption.
Touchpoints: Payment confirmation screen.
App Response: Shows transaction summary (amount, merchant name, points used) with next step CTA.
04. Transaction Details Promo/Voucher
User Action: User reviews real-time BPoints & BPay balance before proceeding..
Touchpoints: Transaction Details screen with “Next Step” CTA — ‘Burn Now’.
App Response: App updates and reflects current BPoints & BPay amount instantly.
03.
Impact
- Improved user satisfaction and engagement with both loyalty and payment features.
- Increased user participation in promotional campaigns, boosting both merchant visibility and transaction volume.
- Strengthened the brand’s identity as an exciting and dynamic platform for rewards and payments.
Supporting Visuals
User Flows
Below are the detailed user flows I designed to address the core functionalities of the B-Infinite app, integrating loyalty and payment systems seamlessly
1. Sign-Up & Registration
User onboarding, wallet setup, and eKYC validation.
2. Main Page Navigation
Loyalty features, deals, and wallet integration.
3. MyBInfinite Pay
Navigation and transaction management within the wallet.
4. Coupon Details
Engagement coupons and redeeming coupons.
Onboarding Graphic
A visual adapted from the key visual was tailored for the app’s onboarding flow. This ensured a seamless brand experience from the first interaction.
Visual Design Guide
Visual design is a Content images are designed as part of the marketing and followed the branding.
Thumbnail image:
Display a thumbnail Image for lists of engagement content
Mockup Thumbnail:
How the thumbnail will appear on the list’s contents.
Thumbnail Image:
Thumbnail image for engagement content
Mockup Thumbnail:
How the thumbnail will appear details contents.
Prototype
Early usability testing using a prototype
QA/QC
Be a part of a tester in the QA/QC on designs before User Acceptance Testing
User Acceptance Testing (UAT)
Be a part of a tester in the UAT
Personal Takeaway
This project taught me the importance of infusing brand identity into every element of design. Working to align the UI/UX with the brand’s promise of thrill and reward demonstrated to me the impact of a strong, cohesive UX. While internal testing validated the design, I hope to include more user-centric feedback in future projects to further refine and amplify engagement.