February 2023 - June 2023
NBKC Bank / Product Design, iOS App
Project Overview
My Role
Product Designer
Team
Project Manager
Product Owner
Product Designer
User Researcher
UI Designer
Security Expert
Content Strategist
My Contributions
User Research
Concept Ideation
Wireframing
Prototyping
User Testing
Tools Used
Figma
Concepts & Miro
Fotor
Jira
Timeline
4 month
Overview
The NBKC Bank, a fastest growing financial institution in the Midwest, recognized the need to offer its customers a convenient, secure, and engaging mobile banking experience. As one of the main Product Designers on the project, I played a crucial role in transforming the bank’s vision into a fully-functional mobile app that caters to a diverse clientele. This case study delves into the complete design process of the NBKS Bank mobile app, from the initial research and ideation to the final stages of user testing and implementation. Our focus was to create a user-centric app that not only streamlines banking transactions but also fosters a sense of trust and loyalty among the bank’s customers.
Research: Empathize
Market Research
Embarking on the journey of creating a banking mobile app began with extensive market research. It was crucial to determine our target audience, identify emerging banking trends, and recognize any potential barriers or limitations. This foundation paved the way for a deeper understanding of the users’ needs and aided in crafting well-defined user personas.
1. Digital Banking Revolution
- Consumers are rapidly shifting towards digital-only banking experiences, valuing the convenience of on-the-go transactions.
- The emphasis on real-time banking features, like instant transfers and payment notifications, is growing in demand.
- Security and privacy concerns remain paramount, with users seeking top-tier encryption and protective measures in their banking apps.
2. Demographics
- Predominantly, the age group between 20-40 is most actively using banking mobile apps, driven by their digital nativity and lifestyle needs.
- As digital adoption grows across all age groups, an upward trend is observed even among older demographics, especially in the 40-60 age range.
- Young professionals and tech-savvy individuals prioritize features like budgeting tools, savings goals, and investment integrations within their banking apps.
User Interview
User interviews were conducted to gather insights from individuals who frequently use banking mobile apps. By delving into the challenges and conveniences they experienced with existing apps, the aim was to design an app tailored for an optimal banking experience. We conducted 7 user interviews with individuals ranging from ages 23-45, each lasting 30-40 minutes. The interviews were conducted through Google Meet calls. Here is the script for the Interview Guide employed during this process.
User Persona
Strategy: Define & Ideate
Defining the Problem
To get a clearer picture of the challenges, I developed Point-of-View (POV) statements to understand the underlying issues better, and How Might We (HMW) questions to explore potential solutions.
Insight #1
Users often find the process of reporting lost cards or suspicious activities cumbersome and not immediate on banking apps.
- Needs – A streamlined, intuitive method to quickly secure their accounts in emergencies.
- POV — Users require a rapid-response feature for emergent banking issues.
- HMW — How might we create an easily accessible and efficient process for users to report emergencies or suspicious activities?
Insight #2
Users are sometimes overwhelmed by the cluttered interface, which often prioritizes promotions over fundamental banking functions.
- Needs – An uncluttered interface that emphasizes primary banking operations, ensuring promotions don’t overshadow usability.
- POV – Users need a clear, distraction-free path to accomplish their core banking tasks.
- HMW – How might we design an interface that seamlessly balances user needs with business promotions?
Insight #3
Customers feel anxious about their banking security when using mobile apps, especially concerning data breaches or unauthorized access.
- Needs – Enhanced security features that they can easily activate and manage to feel in control of their data.
- POV – Users need to feel that their banking app is a fortress guarding their financial details.
- HMW – How might we bolster user confidence in the app’s security while offering them easy-to-use security management tools?
Information Architecture
Turning findings to sketches and mockups
Based on the research and data that I had, I began the process with some rough sketches in Concepts, and I shared my ideas with my teammates to get feedback.
Wireframes
I developed low-fidelity wireframes for each screen, focusing on layout, navigation, and usability. The wireframes were iteratively refined through team feedback and user testing, ensuring that the final designs aligned with user needs.
High-Fidelity Wireframes
After several iterations of refining the low-fidelity wireframes, we moved on to creating high-fidelity wireframes. These wireframes included more detailed design elements such as color schemes, typography, and iconography. At this stage, we also incorporated the visual design language developed in accordance with NBKS Bank’s brand guidelines.
Home Page
Transactions
Transaction Details
Card Settings
Loan Calculator
Savings Account
User Testing
01
Determine if users can seamlessly navigate and complete banking tasks using the app.
02
Pinpoint any obstacles or points of confusion users encounter during task execution.
03
Highlight areas with recurring issues to inform necessary iterations for enhancement.
Test Subject
- Method – Remote testing via clickable app prototype link
- Participants – 5
- Age – 25 to 38 years
- Average Time – 7 minutes
- Task Completion Rate – 97%
- Error-Free Rate – 88% (Certain features not fully integrated in the prototype)
Questions
- On a scale of 1 to 10, how easy it was to navigate through the app and find the features you needed? Which features were difficult to locate?
- Did you encounter any issues when trying to check your account balance, view transaction history, or access statements?
- Were there any features or tools that you found particularly useful or innovative? What improvements would you suggest?
- Were you able to locate and use features such as mobile check deposit, budgeting tools, or financial goal tracking? How user-friendly were these features?
- How does this app compare to other banking apps you’ve used in terms of design, usability, and feature set?
- On a scale of 1 to 10, how likely are you to recommend this app to friends or family members? Why did you choose that rating?
Result
Post user testing, I discerned user interaction patterns with the prototype and pinpointed areas ripe for optimization.
Improvement 01
3/5 users expressed a desire for a quicker way to access their most frequently used features, like Transfers or Bill Payments.
- Insight – Users prefer to have their most common banking tasks easily accessible.
- Changes made – Introduced a customizable quick-access toolbar on the Accounts Page, allowing users to pin their most-used features.
Improvement 02
4/5 users pointed out that the footer menu items felt cluttered, making it challenging to quickly locate essential tools.
- Insight – The footer menu’s current layout lacked clarity, making users spend additional time searching for key functionalities.
- Changes made – Reorganized the footer menu by grouping related items, reducing icons, and adding labels for clarity. Also, introduced an expandable “More” option to house less frequently used tools, ensuring a cleaner and more intuitive navigation experience.
Improvement 01
Improvement 02
Final Thoughts
Solution
By prioritizing user experience and implementing the right features and design elements, we were able to create mobile app that offer a seamless, secure, and convenient experience for users managing their finances on the go.
I’ve learned the importance of gathering as much user feedback in the early phase of a project. That it’s crucial to design the app with the end-user in mind, taking into account their needs, preferences, and challenges. Keep in mind visual hierarchy of the app to make it easy for users to navigate and understand.
Outcome
Increased Active Mobile Users:
The app has seen a significant 13% growth in active mobile users compared to the previous version, showcasing its user-friendly design and enhanced functionality.
Enhanced Customer Retention:
The app’s improved features and user experience have contributed to a 10% increase in customer retention rates, indicating higher customer loyalty and satisfaction.
Improved Customer Satisfaction Scores:
As a testament to the app’s positive impact on user experience, customer satisfaction scores have risen by 15%, demonstrating the effectiveness of the new design and features.
Let's connect!
Feel free to reach out for more information.
I'm always happy to chat!
