Loan Payment Mobile App
The problem & background
Problem: Our flagship mobile banking app catered to credit union members, not those seeking loans without membership. This limited a potential revenue stream. I led the design of the Loan Payment Mobile App, a streamlined experience for non-members to manage loans without requiring a full membership. Users can easily log in, view loan details, and make payments.
Impact: This app expands CU*Answers' reach in the lending market, offering a user-friendly solution that addresses a specific business need.
My role
The Loan Payment Mobile App concept existed but lacked a strong user experience. When the project restarted, I took ownership of the UX design. I revamped its look, feel, and functionality, ensuring it integrated seamlessly with the branding and configurations of our 300+ credit union partners. This work brought the app to completion, providing a user-friendly loan management tool for non-members.
Understanding the problem space
I approached the loan management challenge with a user-centric mindset, moving beyond a purely app-focused solution. I considered the entire loan experience: finding loans, comparing rates, and post-approval management. This holistic view informed the app's frictionless design and its potential to integrate with future loan application processes. My strategic thinking aligns with CU*Answers' broader initiatives, maximizing the value of this project.
Learning more about our user goals
I prioritized user insights, interviewing credit union staff to gauge existing member feedback and directly interviewing individuals with loans or who were actively searching for them. These insights informed the app's design, ensuring it addressed real-world user needs and pain points.
Insights
- Easy Account Access: Users must effortlessly locate their specific loan .
- Transparent Payments: Users require clear information on upcoming payment due dates, amounts, and remaining loan balances.
- I prioritized seamless loan management. My design aimed to prevent users from needing to switch to other platforms for loan-related tasks, improving long-term app engagement and user satisfaction.pen_spark
I constructed a comprehensive user journey map to visualize the entirety of the loan process, including emotions and external factors impacting user experience. This holistic view informed the app's design, ensuring it seamlessly addressed user pain points and aligned with the broader loan journey.
Starting with what was already there
I began by auditing the existing app design. Collaborating with development and management, I identified reusable elements and aspects compatible with our frameworks and configurations. This strategic assessment guided subsequent UI and product design decisions.
Existing/Old Mockups
Previous versions of the app Home & Loans screen
- We could ditch the tab bar, the app is simple enough that features didn't need to be divided up into separate pages.
- A landing screen (left screen) was deemed unnecessary because it added another step containing less useful content for a user trying to view their loans.
- Loans accounts (right screen) were displayed as cards in a carousel view that made it difficult to quickly see an overview of all accounts, plus introduced more technical scope.
First iterations
Home & Contextual Menu
A new loan overview with loan options
We used a vertical stack to display loan accounts, tapping on an account card opened a contextual menu with the available actions a user could perform in relation to the account.
The primary focus of this iteration was to establish overall app layout and a new direction we wanted to go with it (card view & contextual menu), so the UI wasn't a main focus at this point.
Wins
A stacked card view of loans afforded a better scanning experience without the need for additional & unnecessary user input.
We moved loan account actions from being displayed on the front of a card to a contextual menu, giving us future room to scale since we weren't limited by how many actions we wanted to include. The contextual menu component is commonly used across all of our apps, so this was familiar to users. Menu links are fully configurable by credit unions so we're able to use the same configurations from the flagship app in here as well.
Losses
Loan cards had a lot of excess white space that could be utilized a bit better to provide more value and visual interest.
The top left title bar button was used for a native view of payment history, but we recently developed a payment history web feature ('Module' is our internal term) that could be embedded as a web view across all web & mobile products we make. This meant we had to remove the left icon and a settings icon remained, which was visually awkward.
All of our products can be branded by credit unions with primary & secondary colors. This design used the credit union primary as the background, but depending on the color a credit union configures the UI could appear overwhelming and introduce accessibility issues.
More iterating
General App Structure
Accessing a loan feature from the home page through a contextual menu
The home page was addressed a bit more with visual changes to typography, more loan data, and the overall app structure was refined.
Wins
Improved typography created a better hierarchy / scanning structure by drawing attention to bold payment due dates and accounts names.
Added a new UI element inside the card to display the remaining balance that was to be paid on the loan account. This provides users with a quick way to see just exactly how much each payment is contributing to the overall loan.
Features like 'Make a Payment' and 'Payment History' were designed to be native features in the app. However, we knew we could dramatically reduce development time by removing these native features and instead use the existing embeddable features (modules) found in other products.
By deciding to use modules, we could include any feature we wanted that existed outside this app since they wouldn't require any development time to implement.
Losses
The background color wasn't addressed since it was the main branding indicator in the app. Credit unions want their brand to be expressed in the products their members use, so this was a challenge to find a fix for.
We ran into app setting issues where users wouldn't be able to manage needed options like app data and other technically challenging settings. A new solution was needed to address these issues.
Final Iterations
Final Design - App Intro
User onboarding, sign-in, & the home screen
A refreshed onboarding process was created, leading to a completely credit union-customizable login page with a banner image & biometric login options. The home page was finalized with improved loan cards, background changes, and an added profile menu.
Wins
Onboarding screens provided users with information about how the app works and how to manage their loans.
Removed the full background color and replaced it with a gray background. The credit union primary color branding was preserved with the header area behind the top loan card.
Anatomy of a loan card
The loan card provides essential information at a glance. Payment deadlines are visually prioritized using intuitive color/icon coding: green for on-time, yellow for upcoming, and red for overdue. This design ensures effortless payment monitoring for users.
Loan Card Anatomy
How a loan card appears and the data it displays
Customize account icons
Custom icons are used for each loan account to add a bit of personalization and make loans feel just a tad friendlier.
Loan Account Icon
Adding app personalization with custom account icons
Adding a profile menu
I streamlined the app by replacing the problematic settings screen with a customizable profile menu. This solution offered enhanced personalization, reduced development and QA time, and leveraged an existing component from our flagship app for design consistency.
Profile Menu
Accessing the profile and its options from the home screen
Push notifications
User interviews revealed a common pain point: forgotten payments. To combat this, I integrated proactive push notifications for both upcoming and overdue payments. This feature proactively addresses a key user concern, potentially improving payment behavior and minimizing negative credit impacts.
Push Notifications
Notification alerts for payments overdue and due soon
Design handoff
I create detailed, flow-based handoff documents for our iOS and Android developers. These documents leverage our OLB Design System for visual consistency and focus on screen designs, interactions, and user flows, streamlining the development process.
State-based Handoff
Indicating different states & edge cases for devs to consider
Flow-based Handoff
The interactions & logic for signing into the Loan Pay app.
Our flow-based handoff document indicates to developers how the app navigation and logic is structured. The example above shows how the app behaves on the first sign-in a user initiates, where it detects if the device uses biometric technology and suggests using Face ID or Touch to sign in.
Future considerations
I design with scalability in mind. For this app, I created both an MVP and a future-facing version outlining potential features. This proactive approach streamlines development, allowing teams to focus on building adaptable components and minimizing the need for future redesigns.
MVP & down the road version
Accessing the profile and its options from the home screen
Results
- Currently the app is in the final stages of development and near launch, ahead of expected schedule since we eliminated many technical roadblocks.
- I created a new revenue stream for CU*Answers. Our Loan Payment Mobile App drives monthly subscription sales and expands our client base, as credit unions can bundle it with the Loan Pay Manager product.
- Improved the design & development communication pipeline with constant collaborating between teams.
- Began the shift towards user-centered design at CU*Answers with our first involvement with user interviews and credit union member feedback.