UI/UX CASE STUDY
PREMIER Bankcard
Mobile App Design
PREMIER Bankcard, the 12th largest issuer of Mastercard credit cards in North America, specializes in serving individuals with low credit scores. For over 25 years, they have provided credit card opportunities to those who might otherwise face rejection from other lenders.
Programs Used /
Figma
Illustrator
Photoshop
Miro
Jira
Confluence
Zeplin
Powerpoint
Responsibilities /
Design Lead
Task Delegation
User Research
Competitive Analysis
Heuristics & Accessibility
Design System Maintenance
User Experience Design
User Interface Design
Client Presentations
Delivery Reviews
Role /
Lead Product Designer
(UX/UI)
Platforms /
iOS / Android
Date /
Mar 2022 - Apr 2024
Design Context
With its release to the app store in 2022, Concentrix Tigerspike and Concentrix Catalyst created a mobile banking app to serve PREMIER Bankcard cardholders.
The app allows users with subprime credit to effectively manage their credit cards and improve their credit scores.
New features are designed to empower customers to take greater ownership of their financial management, reducing their need to call customer support.
Quarterly Feature List
Features and achievements on a quarterly basis
Q2 2022
-
Biometrics Log In
-
Design System Overhaul
-
UI Reviews
Q3 2022
-
Digital Wallets
-
Upload Documents
-
Passcode Log In
Q4 2022
-
Card Switcher Hub
-
Lock/Unlock Card
-
Text Message Alerts V1
Q1 2023
-
Report Lost or Stolen
-
Report Fraud
-
Custom Icons
Q2 2023
-
Dispute Single Charge
-
Dispute Recurring Charge
Q3 2023
-
Profile Settings
-
Text Message Alerts V2
-
Jargon Review
Q4 2023
-
Make a Payment
-
Pending Account
-
Info Alerts
Q1 2024
-
Quick Actions
-
Enriched Transactions
-
Notifications Center
Case Study Overview
Throughout this 2-year contract, more than fifteen features were designed.
Instead of detailing a similar design process fifteen times, this case study will highlight key points of interest, a series of atypical scenarios, and the impact achieved.
Long Term Organization
When tackling a project lasting over a year, staying organized and communicating effectively are essential to keep things running smoothly.
Over the past two years, ample time for experimentation in Figma has led to some valuable insights:
1. Large Title Blocks
Large title blocks offer a quick way to locate a certain flow while zoomed out.
2. Dotted Dividers
The purpose of this divider is to separate different states of the same flow. Error state from empty state for example.
3. Design Statuses
Design statuses are a quick way to provide context for a screen or a flow, whether it's the designer, the client, the business analyst, or the developer.
4. Context
Notes and Jira Ticket Links serve as quick reminders for everyone involved, especially when revisiting a feature last worked on several months ago.
Design Approach
Initially, design topics were reactive, driven by client preferences rather than user research.
Each feature followed a standard process of competitor and market research to swiftly establish a starting point.
Design efforts focused on reusing existing components to reduce developer effort.
New design elements are reviewed by the Tech Lead for implementability before client presentation.
1. Screenshot Collection
Explore its execution in larger banks such as Chase and AMEX, financial apps like Credit Karma and RocketMoney, and other well-designed apps like Duolingo, Spotify, and Airbnb.
2. Analyze Client Requirements
The assessment involves checking for existing artifacts, identifying minimum requirements, determining department involvement, and evaluating the current API's capabilities.
3. Optimal Concept Selection
Three is an ideal number for concept options, providing a solid foundation for discussion. Typically, the PBC product owner reviews the designs internally and leaves comments in Figma for the next Feature Discovery meeting.
Atypical Scenarios
This section highlights unique challenges and atypical scenarios encountered, showcasing the necessity for innovative solutions and adaptability to unconventional circumstances.
3. Double Negatives
There were a few instances that initially seemed simple, but became progressively more confusing as we delved deeper into it. Even references from competitors failed to provide a unanimous solution.
Lock/Unlock Card:
Toggle + Status Text
Logically, if the feature is for card locking, 'Unlock' represents 'off', while 'Lock' signifies 'on', as seen in Bank of America and AMEX designs.
Locking a card is a destructive action, akin to deactivating it. Therefore, it would make more sense for the toggle to start green and turn red when locked.
For full accessibility, these toggles require accompanying text. For instance, Chase Bank utilizes 'Unlocked' and 'Locked'.
Unfortunately, 'Unlocked' was too lengthy to be displayed on smaller devices without crowding the card number. Therefore, we rephrased it using entirely different words.
Cancel Dialogs:
Cancel the Cancel?
Typically, a dialog displays 'Cancel' and 'OK'. However, what if the dialog was triggered by a 'Cancel' call-to-action (CTA)?
UX best practice guidelines state the actionable item should reflect the intended action.
Therefore, 'cancel the dispute' = 'Cancel'
Can't have Cancel as both options, so left side is replaced with 'No'
Following the same guideline, the 'No' option should be replaced with the opposite action to 'Continue' the dispute.
But now it looks like 'continue to cancel' and 'cancel the cancel'
After many discussions and ten variations, it was decided to display "Continue Dispute' and 'Cancel Dispute'
4. Not So Smart Designs
These instances typically involve the need for backend work to track something, leading to a temporary "bandaid" solution. This approach is adopted due to the extensive time required for backend implementation, which may take several years to materialize.
Dispute Single Charge
Case Tracking
Currently, PREMIER does not have a system in place to track disputes digitally. Instead, customer service agents review notes when customers call.
Text Message Alerts
Enrollment Text
Users must text "Y" to 62465 to begin receiving alerts.
Currently, PREMIER cannot detect enrollment confirmation texts until the customer logs out and logs back in. In the future, the app will be equipped to detect these texts in real-time.
Pending Account
Document Requirements
While their credit card application is pending and the program fee has been paid, certain customers may need to upload supporting documents. However, they must wait for instructions via mail.
The 'Upload Documents' call-to-action (CTA) is always visible because backend work is needed to display the CTA only to customers who require it.
1. Digital Wallets
Apple Pay provided the smoothest integration for iOS devices; however, Samsung Pay + Samsung Wallet and Google Pay + Google Wallet presented niche integration challenges and required distinct CTA styling.
The toughest part of digital wallet design is accessing official assets. While Apple and Samsung assets required website navigation, Google's were restricted to the primary company's developers. Our Concentrix team had to be added as contingent employees in PREMIER to gain access via a PREMIER email address.
Apple Pay - Add to Apple Pay
Google Pay - Add to Google Wallet
Samsung Wallet - Add to Samsung Pay
Google mandated a Review Deck, covering the entire flow from app launch to Google Pay, with each step depicted on a single slide. Additionally, it required a test build from our development team for Google developers to run through scenarios, alongside a set of scenarios for our own developers to test.
Moreover, devices may display either Samsung Wallet, Samsung Pay, Google Wallet, or Google Pay, depending on factors such as firmware, device age, and country.
2. Card Switcher
Currently, users can switch to a different credit card in the middle of eight flows. This experience is unconventional compared to other banking apps and leads to numerous bugs and messy code for developers.
Setting aside contrast and accessibility concerns, the overlay component utilized for switching cards would overlap with a toggle directly beneath it, leading to accidental toggling.
Short Term Solution:
Bottom Sheet Card Switcher
(Current Solution)
Card Switch Icon
Long Term Solution:
Card Selection Hub (Futurestate)
Impact
Customer app-store ratings are steadily improving, with reviews positively acknowledging the app's latest feature improvements.
The monthly login rate is steadily increasing compared to previous versions of the app, improving by 5% every 6 months on average.
1. Customer Rating Improvements
The iOS App Store rating remains at 4.7, the same as two years ago, despite an increase in ratings by 120,000. Meanwhile, the rating on the Google Play Store increased from 4.5 to 4.6.
