Project Overview
Goal: Enhance user engagement, improve website usability, and transition banking services online.
Background: QMB Bank aimed to modernize its digital presence and improve user experience by addressing pain points in its existing website. The project involved redesigning the main website and introducing online banking services to make financial transactions more accessible to customers. A key challenge was maintaining familiarity for existing users while improving functionality and aesthetics.
Outcome: The final solution resulted in a more intuitive and user-friendly website that followed a structured design system, ensuring consistency across all digital touchpoints. The introduction of online banking services streamlined customer interactions, leading to increased engagement and improved accessibility.
The Challenge
- Balancing Familiarity and Innovation
The bank wanted a fresh, modern interface but insisted on retaining elements of the old design to ensure users wouldn’t struggle with the transition. - User Pain Points & Navigation Issues
Customers reported difficulties in navigating the old website, leading to frustration and inefficiencies in accessing services. The new design needed to resolve these issues while maintaining an intuitive flow. - Creating a Consistent Design System
A cohesive design system was necessary to ensure uniformity across the main website and online banking services. This included defining color schemes, typography, iconography, and UI components.
My Role & Process
As part of a 10-member UX/UI team, I contributed in the following areas:
Research & Analysis
- User Research & Pain Point Identification – Conducted surveys and interviews to gather insights from customers.
- Service & Layout Analysis – Examined the existing website’s structure to identify key friction points.
UX & UI Design
- Design System Development – Defined brand-consistent typography, colors, icons, and UI elements.
- Wireframing & Prototyping – Created low-fidelity wireframes and interactive prototypes for usability testing.
- Mockups & UI Enhancements – Designed high-fidelity UI elements for both the main website and online banking services.
- Usability Testing & Iteration – Conducted tests to validate design improvements and ensure ease of use.
Collaboration & Execution
- Client Collaboration – Led structured feedback sessions with stakeholders at each design phase.
- Graphic Design Support – Provided visual assets for branding consistency.
- Final Handoff – Delivered comprehensive documentation, including research findings, wireframes, and finalized UI components.
Tools Used
- Research & Data Analysis: Google Forms (surveys), Google Docs, Competitive Analysis Frameworks
- Wireframing & Prototyping: Balsamiq (wireframes), Figma (UI design & interactive prototypes)
- Design & UI: Adobe Photoshop, Adobe XD, Adobe Illustrator
- User Testing: Usability tests with real users, Surveys, A/B Testing
The Solution
- Developed a new website layout that improved accessibility while retaining familiarity for existing users.
- Created a consistent design system to ensure uniform branding across all digital touchpoints.
- Introduced online banking services, allowing customers to complete transactions digitally.
- Validated design improvements through usability testing, leading to a more seamless banking experience.
Key Takeaways
- Digital transformation in banking improves customer satisfaction by making services more accessible.
- User research is critical – Understanding pain points helped drive meaningful design improvements.
- Balancing innovation and familiarity is essential when redesigning established platforms.
- Consistency in branding ensures a cohesive experience across all digital and offline channels.