Artworks
Graphic Design
UI/UX
About Me
BMN Digital Banking
Navigating Your Financial Future with Ease
From personal bank accounts to specialized investment tools, we've redefined digital banking, offering you a unified experience tailored to your every need. Discover the future of banking, shaped by BMN.
My role
UX Research | UI Design | Design Thinking
Responsibilities
CConducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies,
accounting for accessibility, and iterating on designs.
OVERVIEW
01
The Product
The Problem
A comprehensive digital banking platform for BMN, offering a range of services from bank accounts, credit cards, to mortgages and investments. Designed with user-centric interfaces, the platform serves as a one-stop solution for customers' diverse financial needs, ensuring a smooth and interactive experience.
The initial BMN platform had fragmented services, causing navigational challenges for users. The digital experience was inconsistent, and customers often struggled to locate specific tools or information, leading to missed opportunities and decreased user engagement.
Project duration
The Goal
August 2023 to October 2023.
The primary objective for the redesigned BMN platform was to unify all banking services under one intuitive interface. By integrating advanced tools, guides, and 24/7 support, the aim was to elevate user satisfaction, boost engagement, and foster trust in BMN's digital offerings.
User Research: Summary
Our extensive user research involved in-depth interviews, surveys, and usability testing with potential and existing BMN users. Through a meticulous approach, we unearthed insights into user behavior, preferences, and expectations from a digital banking platform.
02
Understanding the User
User Research: Pain Points
Navigation Complexity
Lack of Personalization
Information Overload
Many users expressed difficulty in locating specific banking functions within the platform, resulting in wasted time and increased frustration.
Users felt the banking platform was generic and lacked a personal touch or tailored recommendations based on their financial behaviors.
The presentation of too much information without clear categorization led to confusion and deterred users from completing transactions.
Persona: Malik
Problem statement:
Rodrigo struggles to navigate the complex mortgage landscape, often feeling overwhelmed by the myriad of options and the lack of clear guidance tailored to his specific needs.
User Journey Map
Rodrigo journey begins with his aspiration to invest in property. As he delves into the process, he encounters various tasks, emotions, and challenges that shape his experience. The map traces his path from initial curiosity and research, through the complexities of application, to the final decision and the aftermath.
Draft Wireframes
To bring our vision to life and ensure that BMN's web experience is intuitive and seamless, we initiated our design phase with detailed wireframes. These wireframes served as a skeletal framework, laying out the structure, hierarchy, and key elements of the platform.
Recognizing the increasing trend of mobile banking and to cater to a wider audience, we also designed a responsive version for mobile devices. This mobile-optimized design ensures that users have a consistent and user-friendly experience across all devices.
Starting the Design
03
Low-fidelity Prototype
Before delving into the intricate details of the final design, we created a low-fidelity prototype. This initial prototype enabled us to visualize the user journey and the overall flow of the website.
It served as an essential tool for quick iterations, gathering feedback, and ensuring that the user's needs and our design intentions aligned perfectly. By focusing on functionality and user interactions first, we ensured that the foundation of our design was solid before adding the finer aesthetic details.
View the BMN Low-fidelity Prototype
Low-fidelity Prototype
Usability Study: Findings
Round 1 findings
1. Users reported difficulty finding key features due to unclear navigation labels.
2. The loan calculator's interface was not intuitive for some users, leading to misconceptions about loan amounts and interest rates.
Round 2 findings
1. After adjustments, users found the navigation more intuitive and could locate features with ease.
2. Users found the updated loan calculator more user-friendly and expressed a clear understanding of loan terms.
Mockups
After iterating through the wireframes and prototypes, we arrived at our high-fidelity mockups. These mockups represent the final design vision for BMN's website, incorporating all the feedback and lessons from our usability study.
They provide a clear and polished view of both the desktop and mobile versions, ensuring a seamless and consistent user experience across all devices.
Refining the Design
04
High-fidelity Prototype
Transitioning from mockups, we further refined our design with the High-fidelity Prototype. This prototype showcases BMN's website in its full interactive glory, offering a near-real experience of the final product. All elements, interactions, and transitions have been meticulously crafted, making it an invaluable tool for both user testing and stakeholder presentations.
View the Foody
High-fidelity Prototype
Accessibility Considerations
1. Used icons to help make navigation easier.
2. Used detailed imagery for restaurants and foods to help all users better understand the designs.
3. Provided access to users who are vision impaired through adding alt text to images for screen readers.
05
Going Forward
Takeaways
Impact:
The accessibility features integrated into the platform were recognized and appreciated by a wider audience, leading to positive feedback from various user groups.
The revamped design increased user engagement by 45%, leading to higher customer satisfaction scores and better retention rates.
What I learned:
Learned that the key to a successful product is deeply understanding and empathizing with the user's journey, pain points, and aspirations.
The importance of continuously refining designs based on feedback. Each iteration brings the product closer to the user's true needs.
Next steps
Establish a continuous user feedback mechanism to capture and address evolving user needs and preferences.
Identify additional features that can enhance user experience based on trends, technological advancements, and competitive analysis.
Consider expanding the website's language options to cater to a more diverse global audience.