Adding a Bill Savings Feature
Role
UX research
Product Design
Concept and Prototype Design
Concept Testing
Timeline
November- December 2024
Project Type
Responsive web design, app design, add a feature, fintech, MVP
Deliverable
A new feature that allows users to set aside money specifically for upcoming bills by creating designated "wallets" for each bill or expense. Users can automatically save for their bills over time, ensuring they have enough funds when the due date arrives. Once the bills are due, the system will automatically pay them from the designated wallet. This feature expands the existing bill pay feature with an intuitive layout, personalized and customizable content, and planning features making it easier to manage finances and avoid late payments.
Impact
Additional feature expanding budgeting and bill pay options, leading to successful performance by all 6 participants in evaluation tests. Users showed high satisfaction rates from usability testing.
This app improved financial management for users, enhanced customization in personalized banking, encouraged financial discipline while setting users up for success in their financial goals, and reduced overdraft and late fee risk incre stronger bank loyalty.
or continue scrolling to read the full project journey
00. Project Background
-
The goal of this project was to enhance the usability and the overall user experience of digital banking with the National Bank of Indianapolis, while fostering long- term trust and loyalty among its users. The National Bank of Indianapolis balances traditional banking values with modern financial solutions, so it was important to balance simplicity and functionality in the design- ensuring regulatory compliance, security and privacy concerns while remaining easily accessible.
-
The National Bank of Indianapolis is the largest locally-owned bank headquartered in greater Indianapolis. Established in 1993 with a focus on providing personalized banking services to families, and businesses in the greater Indianapolis area. The bank positions itself as a customer-oriented institution, offering a high level of service with a focus on building long-term relationships. They are known for their commitment to local economic growth and for supporting small businesses in the community. In addition to its banking services, the National Bank of Indianapolis is involved in various community initiatives, contributing to local development and charitable causes. Their commitment to customer service and local engagement has helped them carve out a niche in Indianapolis’ banking landscape.
-
Target users fall into two categories.
Retail banking users- adults aged 18-65+ with a focus on working professionals, young families, and retirees. They are middle to upper-middle-income brackets with some users being tech-savvy, others prefer simple, straightforward interfaces. Users need to access basic banking services, mobile and online banking functions for everyday financial activities, and educational resources on managing personal finances.
Retirees and older adults- age 55-80+ often retirees or nearing retirement, with a focus on managing fixed income, pensions, and savings. These users need financial tools for budgeting and planning as well as tracking income like easy- to use online bill pay, transferring funds between accounts, and managing regular tasks.
01. Preliminary Research & Discovery
1. Heuristic Evaluation
Because I was designing an integrated feature, understanding National Bank of Indianapolis’ guidelines and content hierarchy was crucial. I evaluated core screens using Jacob Nielsen’s 10 Usability Heuristics to familiarize myself with the website and app’s usability.
2. Qualitative Interviews
I engaged with users, asking open-ended questions to better understand their online banking and budgeting habits and values.
3. Quantitative Surveys
To gather quantitative data on bill paying and budgeting, I sent out a survey asking participants about their bill pay and budgeting habits. I received 6 responses, all residing in the United States.
Key Insights
National Bank of Indianapolis’ existing bill pay feature was incredibly basic and required a lot of manual effort from users for minimal benefits.
All users interviewed are digitally paying bills
Most users currently set money aside for upcoming bills
Most users would like the ability to designate money for specific purposes within their bank accounts for upcoming bills or other short term savings
02. Conceptualization
During conceptualization, I used the insights from my primary research to shape my design goals and help drive feature prioritization. This new feature focused on three main capabilities:
1. Creating savings plans and tracking ongoing progress
2. Customizable features to meet individual user needs
3. Integrating automatic bill pay function to avoid imposing unnecessary mental load on users
Design Goal
To create an intuitive and personal experience to allow clients to efficiently manage their short term savings goals and bill pay. I aim to achieve this by expanding the features available in the existing bill pay function and create additional “bill savings” to simplify usage for clients.
Mapping Out User Flows
I started sketching out 2 main task flows for how a user would interact with the bill savings feature- creating a new savings wallet, and navigating to existing bill savings.
Defining Personas
I formulated three usable personas based in information gathered from participants I previously interviewed to keep my design decisions focused.
03. Development
After defining the design goal and testable targets, I began by brainstorming ideas, creating wireframes, and testing low-fidelity prototypes, selecting and integrating the ideas that best aligned with the design goal but remained consistent with the existing designs. Mid-fidelity prototypes were again run through user testing to confirm design decisions or identify pain points that would require changes or modifications.
Add a new bill savings wallet
Maintaining the same options from the existing bill pay functions for continuity and expanding the prompts to integrate the new feature, reducing the cognitive load for the user.
Wireframe
Creating bill savings feature
This page needed to include a snapshot of all current savings wallets for quick reference, transaction history and upcoming payments for all bill savings, calendar for visual reference of all payments associated with bill savings wallets, and previous statements to make usability functional for users.
Wireframe
Creating the individual wallets
Individual bill savings wallets should be more specific, with quick references to overall savings and upcoming payments. Transaction history for that specific bills, and previous information all related to that one particular wallet.
04. Concept & Usability Testing
Previous participants were used for another round of user testing to evaluate how simply and accurately users could complete each task flow. Ideally the user would be able to successfully complete each task flow with minimal errors.
Success metrics:
80% completion rate of task within 4 minutes
Fewer than 2 users encounter significant difficulty (errors, major navigation issues, etc)
Achieve an average user satisfaction score of 6 or higher (out of a total of 10)
Usability Test Findings:
UI was simple and intuitive- most participants enjoyed the features and felt they were easy to use
Need to enable some familiar patterns to help with clarity- hover and select states would help some users determine how to further expand information they are looking for
A few users were unfamiliar with mockups and this contributed to less direct results from user error and misunderstanding
Areas of Improvement:
Clarity in some CTA’s and minor simplification to design
Add hover and select states to schedule savings pages for increased interactivity
Increase prototype functionality
Testable Targets
I formulated testable targets to assess how effectively I achieved my design goals, using a combination of both qualitative and quantitative evaluation methods during user tests.
-
Users were encouraged to think aloud and also vocalize their reasoning when moving through each task. Taking notes as participants used the prototype and continuously vocalize their thoughts provided feedback that was used to support quantitative data.
-
During usability testing asking participants open-ended questions about their experiences, preferences, and possible challenges to better understand their needs and wants. These responses were used to support quantitative data.
-
While users moved through the tasks their actions were studied and documented as well as screen recorded to better understand how they were navigating through tasks, and where they may have been experiencing friction.
-
A predefined set of statements was prepared and corresponds to the testable targets. Participants were given these statements and asked to rate their feelings based on their experience completing each task through the usability test.
05. Iterations
Initial usability testing helped pinpoint user errors, why they happened, and solutions to iterate on. I enjoyed this process of understanding more about “why” users were choosing specific pathways and brainstorming ways to reduce user difficulty. I iterated on my designs and created high-fidelity mock ups and a working prototype to give this round of user testing more of a realistic feel and mimic real flows. I conducted this round of user testing to validate the changes made in iterations and get more specific UI questions answered.
Before
After
Outlines and drop shadows were added with hover states to help users better understand how to interact with buttons and functions.
Before
After
Download buttons were added for simplicity and to minimize the amount of clicks required to complete common tasks
What I learned from this round:
Users were very excited about this feature and some wondered why something like this doesn’t exist in other banking functions
Accessing the feature is intuitive- while some participants took some time to familiarize themselves with certain steps, they adapted quickly and explained that it was due to their initial unfamiliarity with the product and something that would be isolated to their first time use.
What users said about the new feature…
“The location of the feature is front and center, and the placement is great”
-A
“It was fairly straightforward- everything felt simple”
-J
06. Deliverables
The final design proposal includes a new feature called “Bill Savings” located in the menu options and shortcuts integrated in the existing website and app. With this new feature, users are now able to plan and save for specific expenses on their own schedule and autopay directly from the allocated savings on the date scheduled.
Personalized content- customizable savings plans with automatic scheduled savings and auto-pay function on specified date
Clear layout- consistent design continued from the existing product to seamlessly integrate new tools