Enhancing Mobile Banking App Usability
StreamLine is a popular mobile banking app that enables users to manage their accounts, track expenses, and make transactions. The app, however, was facing usability issues that led to a decline in user satisfaction and engagement. Our goal was to redesign the app, improving its UX/UI to provide a seamless, intuitive, and enjoyable experience for users, ultimately increasing user retention and satisfaction.
Ottawa, Ontario, Canada
2006
E-commerce
$1.578 billion (2019)
5,000+
Challenge
The app had a cluttered interface, making it difficult for users to navigate and find essential features. Users were facing issues with the onboarding process, which was affecting new user adoption rates. The app lacked personalization and customization options, making it less engaging and user-friendly.
Results
The redesigned app features a clean, clutter-free interface, making it easier for users to navigate and access essential features.
The improved onboarding process resulted in a 35% increase in new user adoption rates.
The addition of personalization and customization options enhanced user engagement, leading to a 25% increase in user retention rates.
35%
Improved onboarding process
25%
Increase in user retention
84%
Increase in time spent on website
Process
Research & Analysis: We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
Information Architecture: Based on the research findings, we restructured the app's navigation and content, prioritizing features and information according to user needs.
Wireframing & Prototyping: We designed low-fidelity wireframes to visualize the new layout and navigation, iteratively refining them based on user feedback. Afterward, we built a high-fidelity, interactive prototype to test the design.
Usability Testing: We conducted usability tests with a diverse group of users to validate the design and identify areas for improvement. Based on the feedback, we made necessary adjustments to the design.
Visual Design & Style Guide: We developed a cohesive visual language, including color schemes, typography, and iconography, ensuring consistency throughout the app. We also created a style guide to maintain design consistency in future updates.
“ With our new visual branding and language in place, the new Shopify brand clearly captures the essence of our current and target customer base, our employees, and our values. ”
Tobias Lütke
CEO, Co-founder | Shopify
Conclusion
The StreamLine mobile banking app redesign successfully addressed the usability issues, resulting in a more intuitive and user-friendly experience. The improved UX/UI design led to increased user adoption, engagement, and satisfaction, demonstrating the value of a well-designed template for UX designers.
Project duration
April 2024 - June 2024
My role
Lead UX Designer focused on improving the monthly reporting process for borrowers and account managers.
Conducting interviews, auditing existing software, competitive analysis, creating wireframes and prototypes, conducting usability studies, iterating on designs, creating a style guide, and ensuring accessibility.
Challenge
The existing monthly reporting process was a single-page form that was difficult to use and cluttered with too many primary buttons. A lack of visual hierarchy and poor design led to:
Poor accuracy of reporting
Inefficiency for borrowers and account managers
Difficulties uploading statements
Borrowers entering incorrect financial information
Our results
The redesign of the monthly reporting process led to significant improvements in user experience and efficiency:
Accuracy: Accuracy of reports increased by 25% as borrowers could focus on each step and provide more accurate information.
Efficiency: Time spent on reporting reduced by 34%, allowing borrowers to complete reports faster.
User Satisfaction: User satisfaction score improved to 4.7 out of 5 in final testing, indicating a positive user experience.
Error Reduction: Errors in financial reporting decreased by 29%, improving the reliability of the data.
25%
Increase in accuracy of reporting
34%
Reduction in time spent reporting
29%
Decrease in reporting errors
Process
Stakeholder Interviews and Research:
Interviewed stakeholders and account managers to understand their pain points.
Conducted user testing with borrowers and account managers to gather insights.
Competitive Analysis:
Analyzed user-friendly financial reporting systems like TurboTax.
Design and Testing:
Created sketches and confirmed direction with key stakeholders.
Developed low-fidelity wireframes and tested them with account managers and borrowers.
Iterated on the designs based on feedback.
Turned the reporting into a wizard that breaks down steps into manageable chunks.
Automated statement uploads with options to add additional statements.
High-Fidelity Designs and Style Guide:
Created high-fidelity screens and a style guide to ensure consistency and accessibility in the final product.
Final Iteration and Testing:
Added a review screen for borrowers to review and correct information.
Redesigned the financial summary screen to provide more detail and prevent changes after submission.
Understanding the user
User Research Summary:
Conducted interviews and created empathy maps to understand borrowers and account managers. Key insights included:
Borrowers found the original form overwhelming and confusing.
Account managers struggled with reviewing inconsistent and inaccurate reports.
Both groups desired a more intuitive and guided reporting process.
Pain Points:
Usability: The original form was difficult to navigate and use.
Accuracy: Inaccurate reports due to the confusing layout and process.
Efficiency: Time-consuming reporting process for both borrowers and account managers.
Digital Wireframes
After ideating and drafting paper wireframes, I created initial digital designs for the new reporting process. The focus was on breaking down the reporting into manageable steps and providing clear guidance.
Low-Fidelity Prototypes
The low-fidelity prototype connected all screens involved in the reporting process. The primary user flow was tested to ensure simplicity and convenience.
Usability Study
Conducted a moderated usability study with five participants, each session lasting 20-30 minutes. Key findings guided the design improvements:
Participants appreciated the step-by-step guidance.
Automatic statement uploads were well-received.
The review screen helped increase confidence in the accuracy of their reports.
Refining the design
Based on the usability study insights, the design we decided on prototype # 2 and moved on to a high-fidelity version to help us get closer to our solution for monthly reporting. In this next step, accessibility continued to be at the forefront of our minds and I made use of high-fidelity tools to address the following:
Color: Ensured colors followed web accessibility guidelines.
Responsiveness: Designed to be functional across different platforms.
Language: Tested terminology with users to ensure clarity and understanding.
Other considerations:
Going forward
Based on the usability study insights, the design we decided on prototype # 2 and moved on to a high-fidelity version to help us get closer to our solution for monthly reporting. In this next step, accessibility continued to be at the forefront of our minds and I made use of high-fidelity tools to address the following:
Color: Ensured colors followed web accessibility guidelines.
Responsiveness: Designed to be functional across different platforms.
Language: Tested terminology with users to ensure clarity and understanding.
Other considerations:
Takeaways
Impact:
The redesigned reporting process significantly improved accuracy, efficiency, and user satisfaction. Borrowers found the new wizard intuitive and easy to use, while account managers appreciated the reliability of the reports.
What I learned:
Focusing on user feedback and iterative design is crucial for creating a successful product. Understanding the pain points and needs of both borrowers and account managers helped create a solution that addressed their challenges effectively.
Next Steps:
Further Usability Testing: Conduct another round of usability studies to validate the final design.
Continued Iteration: Continue to gather feedback and make improvements as needed.
Expansion: Explore applying similar design principles to other areas of the software.
Get Athos Pro