Credit Card Reward App
App Design
Project Overview
We designed a revamp project for credit card rewards by coordination with stakeholders and users to design the gamification banking app. Users could effortlessly redeem points, track spending levels, applied campaigns and checked the latest news with the one-stop app subject to user spending and task completion to win badges and/or coins. In view of society’s growing digitalization and the need for constant innovation, BEA Mall was established to provide effortless banking services to meet customers’ lifestyles and financial needs.
Role
UX and UI Designer
Type
Banking
Year
2021
Design Process
Research > Interview > User Stories > Competitive Analysis > Wireframe > Design System > User Flow > Design Critique > UI Design > Usability Test
Challenge
Reward redemptions took a long time to process (e.g. counted quarterly) rather than providing real-time updates.
When redeeming rewards within the app, users had to access the partner's website, causing issues with leaving the app. This indicated the app lacked an integrated redemption system.
There was no way for users to track their progress in registered marketing campaigns.
Spending data was not being effectively utilised or presented back to users.
The rewards section lacked clear organisation, consisting of only a few pages without structure.
COVID-19 was significantly impacting customer behaviours and needs, requiring changes to meet evolving demands.
Guiding Question
How could we organise all features in a clear navigational structure?
What information/features should be prioritised on the homepage?
What are the most important new features users want?
How has COVID-19 impacted customer behaviours and needs?
How to visualise the data well to present users' rewards and spending progress?
How to encourage users to continuously engage with the app?
Project Management
We followed an Agile methodology using tools like JIRA and Trello. Figma was used for designing user experience and interface. The timeline required an iterative design process with regular critique sessions to catch issues early.
Design System
We came up with a design system to maintain consistency, structure and communication across the system. We chose a logo colour palette that was trendy and looked exciting. This is a business-to-customer product so we concentrated on defining the style and typography. We chose a groovy design with 3D graphics and icons.
The Solution
The basic credit card functions were originally only accessible through the main banking application. Customers had to visit a partner website to redeem bonus points. Interviews with marketing, credit card, and innovation teams revealed opportunities to improve engagement through gamification and usability enhancements. User and department interviews found that the current system was outdated and inefficient, requiring an updated design. Apps from competitors like HSBC Reward+, CITI ThankYou Rewards, SCB 360 Reward, and DBS OMNI were analysed. Competitor analysis, interviews, and persona creation provided insights into optimising features like reward tracking, campaign registration, and redemption journeys. The research highlighted the need for gamification, one-stop access to features, and behavioural data utilisation.
We conducted usability testing and follow-up interviews to evaluate the app's effectiveness. Clear guides and explanatory copy ensured that customers could easily navigate to desired pages. Feedback from app stores exceeded expectations, praising BEA Mall's one-stop platform for promoting, registering for campaigns, and viewing reward spending progress. This attracted potential customers from social media while fostering loyalty among existing customers. The positive results validated our user-centred design approach to meeting diverse needs through an engaging digital experience.
Related Media
Banking Tech 2020 - Silver Award - Credit Card Gamification
Awarded by The Institute of Financial Technologists of Asia (IFTA)
Achievement
Apple iOS Store
309 Rating, 4.4, No. 133 Finance Chart
BEA Customer