Designed a responsive website for a bank that helps customers select, set up, and manage a personal bank account without visiting a branch.
Designed a responsive website for a bank that helps customers select, set up, and manage a personal bank account without visiting a branch.
Understanding the user
The goal was to design an intuitive, minimalistic responsive website with feature-rich functionality to assist users. The project began with qualitative research to understand users and their challenges. The design process included secondary and primary research, along with user interviews. Problem statements, hypothesis statements, goal statements, and affinity diagrams were developed.
What do our primary users need most?
What features do users value most?
What challenges do users face when moving forward with the website?
How can these challenges be resolved?
Meeting the users
"Fear of Making Mistakes"
Akhil lives in India with his wife and son, has been in the hospitality business for over 25 years. He fears making mistakes while filling out forms, as entering incorrect information could result in a lengthy process of recovering his money from a stranger through the bank.
"Website seems to be complicated"
Mathew, an IT professional in India, finds banking websites difficult to navigate. He prefers visiting the bank rather than struggling with cluttered webpage designs. With digitalisation, he expects websites to be more accessible and feature-rich.
"No Personal Connection with the Banker"
Haniya, a married mother, feels the absence of personal contact with her banker. She struggles to reach the bank for queries and finds it challenging to deal with online scams and fraud.
"More Customizable Options with a Consistent User Experience & AI Support"
Sofia, a married resident of Las Vegas, manages monthly bills and savings but frequently encounters technical issues on banking websites. She seeks AI-powered tools for budgeting, bill-splitting, and savings management.
Competitive Analysis
Many banks in India lack features available in other countries, such as opening a new account or depositing a cheque. These features were incorporated into the project. Additionally, existing banking websites are not user-friendly across different devices.
The major issues identified in competitor websites include:
Cluttered information with poor spacing
Lack of user-friendliness and unclear hierarchy
Limited additional features
YOUR BANK responsive website is designed as a one-stop solution, offering feature-rich functionality without clutter, ensuring easy accessibility for users of all ages.
Information Architecture
Paper Wireframe
Low Fidelity Wireframe
Usability Study and Iterations
After creating the mockup, a usability study was conducted, and feedback was gathered, leading to several changes. A separate text box was added for selecting the country code rather than typing the phone number with the country code manually. Users found it difficult to locate the page they were on. The accent-coloured emphasised text on the navigation bar was not helpful. A sitemap bar was added to indicate the page flow and highlight the current page.
High Fidelity Wireflow
Wireflow for opening a new bank account on the website.
Style Guide
Final Mockup