Metro Bank Online Banking
In 2019 Metro Bank set to build a new online banking platform for its retail and SME customers to replace its aging, existing website. I have been assigned to the project as the principal designer and for four years I have been working on interactions and user flows, refreshed visuals, IA and planned and conducted UX research.
Role
Design Lead, UX, UI, Visual Design, Research
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Poor UX
Users experienced a frustrating journey due to inconsistent design elements and a lack of clear pathways, leading to increased drop-off rates.
Limited features
Previous platform lacked essential features, leading to user frustration and difficulty managing transactions and account settings efficiently.
Non-Responsive Design
Confusing navigation and information architecture led to user frustration and high abandonment rates.
Competitive Pressure
The platform wasn’t optimized for various devices, especially mobile, impacting the user experience.
Accessibility Compliance
Competitors were offering more modern, feature-rich platforms, putting Metro Bank at risk of losing customers.
Results
decrease in calls to customer service related to online banking
increase in mobile use
new features added
New website
Built a scalable, adaptive platform that scales easily across devices, improving user experience on mobile and desktop.
Design system
Developed a consistent design system, streamlining collaboration and ensuring a unified look and feel across the platform.
Refreshed visual language
Introduced a modern visual language, enhancing the website's aesthetic and aligning it with current design standards.
Reorganised IA
Redesigned the information architecture, allowing users to find features and complete tasks more efficiently.
Accessibility
Ensured the platform follows accessibility standards, making it usable for individuals with disabilities.
Metro Bank Online Banking
In 2019 Metro Bank set to build a new online banking platform for its retail and SME customers to replace its aging, existing website. I have been assigned to the project as the principal designer and for four years I have been working on interactions and user flows, refreshed visuals, IA and planned and conducted UX research.
Role
Design Lead, UX, UI, Visual Design, Research
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Poor UX
Users experienced a frustrating journey due to inconsistent design elements and a lack of clear pathways, leading to increased drop-off rates.
Limited features
Previous platform lacked essential features, leading to user frustration and difficulty managing transactions and account settings efficiently.
Non-Responsive Design
Confusing navigation and information architecture led to user frustration and high abandonment rates.
Competitive Pressure
The platform wasn’t optimized for various devices, especially mobile, impacting the user experience.
Accessibility Compliance
Competitors were offering more modern, feature-rich platforms, putting Metro Bank at risk of losing customers.
Results
decrease in calls to customer service related to online banking
increase in mobile use
new features added
New website
Built a scalable, adaptive platform that scales easily across devices, improving user experience on mobile and desktop.
Design system
Developed a consistent design system, streamlining collaboration and ensuring a unified look and feel across the platform.
Refreshed visual language
Introduced a modern visual language, enhancing the website's aesthetic and aligning it with current design standards.
Reorganised IA
Redesigned the information architecture, allowing users to find features and complete tasks more efficiently.
Accessibility
Ensured the platform follows accessibility standards, making it usable for individuals with disabilities.
Metro Bank Online Banking
In 2019 Metro Bank set to build a new online banking platform for its retail and SME customers to replace its aging, existing website. I have been assigned to the project as the principal designer and for four years I have been working on interactions and user flows, refreshed visuals, IA and planned and conducted UX research.
Role
Design Lead, UX, UI, Visual Design, Research
Year
2019-2024
Tools
Sketch, Figma, Invision, Miro, Lookback, UserTesting.com, Treejack, Google Analytics, Heap, 3DS Max, V-Ray
Techniques
Moderated usability testing, card sorting, tree testing, analytics, domain expert interviews, user interviews, stakeholder workshops
Challenges
Poor UX
Users experienced a frustrating journey due to inconsistent design elements and a lack of clear pathways, leading to increased drop-off rates.
Limited features
Previous platform lacked essential features, leading to user frustration and difficulty managing transactions and account settings efficiently.
Non-Responsive Design
Confusing navigation and information architecture led to user frustration and high abandonment rates.
Competitive Pressure
The platform wasn’t optimized for various devices, especially mobile, impacting the user experience.
Accessibility Compliance
Competitors were offering more modern, feature-rich platforms, putting Metro Bank at risk of losing customers.
Results
decrease in calls to customer service related to online banking
increase in mobile use
new features added
New website
Built a scalable, adaptive platform that scales easily across devices, improving user experience on mobile and desktop.
Design system
Developed a consistent design system, streamlining collaboration and ensuring a unified look and feel across the platform.
Refreshed visual language
Introduced a modern visual language, enhancing the website's aesthetic and aligning it with current design standards.
Reorganised IA
Redesigned the information architecture, allowing users to find features and complete tasks more efficiently.
Accessibility
Ensured the platform follows accessibility standards, making it usable for individuals with disabilities.
01
Process
Pre-Launch
Post-Launch
Design Ops
The pre-launch phase focused on building the core online banking platform, including payments, transaction views, statements, and payee management.
Discovery
MoSCoW
Competitive analysis
Brainstorming
Prototyping
Usability testing
Design
Usability testng
Card sorting
Tree testing
Launch
Beta testing feedback gathering
Design fixes
Dev support
01
Process
Pre-Launch
Post-Launch
Design Ops
The pre-launch phase focused on building the core online banking platform, including payments, transaction views, statements, and payee management.
Discovery
MoSCoW
Competitive analysis
Brainstorming
Prototyping
Usability testing
Design
Usability testng
Card sorting
Tree testing
Launch
Beta testing feedback gathering
Design fixes
Dev support
02
Pre-launch phase
The first step to build the core online banking was a workshop involving the initial team: product owner, business analyst, front end developers, backend/architecture tech leads and testers. The goal of the workshop was to bring the whole team together the first time, introduce our roles and discuss the vision for the new banking platform and its future. We employed a Triad activity to identify three keywords that would embody the new website.
02
Pre-launch phase
The first step to build the core online banking was a workshop involving the initial team: product owner, business analyst, front end developers, backend/architecture tech leads and testers. The goal of the workshop was to bring the whole team together the first time, introduce our roles and discuss the vision for the new banking platform and its future. We employed a Triad activity to identify three keywords that would embody the new website.
Simple
Our design prioritizes clarity and ease of use, stripping away unnecessary complexity to provide a straightforward, user-friendly experience.
Simple
Our design prioritizes clarity and ease of use, stripping away unnecessary complexity to provide a straightforward, user-friendly experience.
Scalable
The platform is designed to grow with the bank’s needs, allowing for easy integration of new features while maintaining consistent performance.
Scalable
The platform is designed to grow with the bank’s needs, allowing for easy integration of new features while maintaining consistent performance.
Accessible
We ensure the platform is usable by everyone, regardless of device or ability, through inclusive design practices and adaptive interfaces.
Accessible
We ensure the platform is usable by everyone, regardless of device or ability, through inclusive design practices and adaptive interfaces.
Opportunity workshop
To kick off the redesign process, I sought insights from the customer service team due to the lack of existing analytics. In a workshop, colleagues spent 20 minutes noting common issues faced by users
Opportunity workshop
To kick off the redesign process, I sought insights from the customer service team due to the lack of existing analytics. In a workshop, colleagues spent 20 minutes noting common issues faced by users
Usability testing
I conducted usability testing on the old platform with 15 users: 5 business users, 5 retail users, and 5 new users unfamiliar with the platform. Four out of five business users were frustrated by the inability to switch entities without logging in again. Across all groups, users found the visual design outdated and struggled to locate specific transactions, often abandoning the task due to its length. Business users also requested advanced transaction search and more options to download documents. All users expected pending and processed transactions to be in the same table.
Usability testing
I conducted usability testing on the old platform with 15 users: 5 business users, 5 retail users, and 5 new users unfamiliar with the platform. Four out of five business users were frustrated by the inability to switch entities without logging in again. Across all groups, users found the visual design outdated and struggled to locate specific transactions, often abandoning the task due to its length. Business users also requested advanced transaction search and more options to download documents. All users expected pending and processed transactions to be in the same table.
1
Domain interview
Ask about participants' experience with the domain to contextualize their feedback.
2
Tasks
Observe participants as they complete a series of realistic, predefined tasks.
3
Post-task questions
Collect immediate feedback after each task is completed.
4
Post-test questionnaire
Gather overall impressions and SUS scores after all tasks have been performed.
Open card sorting and tree testing
The card sorting phase involved users organizing the website's content into intuitive categories, revealing strong associations like grouping "direct debits" and "standing orders." Building on this, tree testing with Treejack evaluated the proposed information architecture. While features like "transaction history" were easy to find, insights showed users expected to select the source account first before accessing "Pay and Transfer," which was previously only available in the sidebar.
Open card sorting and tree testing
The card sorting phase involved users organizing the website's content into intuitive categories, revealing strong associations like grouping "direct debits" and "standing orders." Building on this, tree testing with Treejack evaluated the proposed information architecture. While features like "transaction history" were easy to find, insights showed users expected to select the source account first before accessing "Pay and Transfer," which was previously only available in the sidebar.
Presenting and prioritising
I presented these usability testing findings in a workshop with the rest of the team. We discussed the key issues and, using the MoSCoW method, prioritized the first group of features to build.
Presenting and prioritising
I presented these usability testing findings in a workshop with the rest of the team. We discussed the key issues and, using the MoSCoW method, prioritized the first group of features to build.
Must have
Account list
Pay and transfer
User Profiles
Transaction history
Dd/standing orders
Settings
Should have
Personal finance insights
Financial education resources
User Profiles
Could have
Onboarding new feature
Product hub
Won't have
Download transactions
Change details
Help hub
International payments
Easier login
Competitive analysis
Next I have conducted a competitive analysis to benchmark Metro Bank’s online platform against leading competitors. By analysing features, user flows and design patterns from rival banking platforms I have identified gaps in Metro Bank’s offerings and uncovered opportunities to enhance usability, streamline navigation, and modernize the user experience.
Competitive analysis
Next I have conducted a competitive analysis to benchmark Metro Bank’s online platform against leading competitors. By analysing features, user flows and design patterns from rival banking platforms I have identified gaps in Metro Bank’s offerings and uncovered opportunities to enhance usability, streamline navigation, and modernize the user experience.
Brainstorming workshop
Following the MoSCoW prioritization, we held a workshop with the UX team to generate ideas for the prioritized features. We used a mix of brainwriting and crazy eights to encourage diverse thinking and rapid ideation. Brainwriting allowed team members to build on each other’s ideas in silence, while crazy eights pushed us to sketch out eight quick concepts in just eight minutes, sparking creative solutions.
Brainstorming workshop
Following the MoSCoW prioritization, we held a workshop with the UX team to generate ideas for the prioritized features. We used a mix of brainwriting and crazy eights to encourage diverse thinking and rapid ideation. Brainwriting allowed team members to build on each other’s ideas in silence, while crazy eights pushed us to sketch out eight quick concepts in just eight minutes, sparking creative solutions.
Design and validation
I conducted two rounds of usability testing with 15 users—existing business, retail, and new users—on the resulting new design, using a prototype, before adjusting the design and moving to another round of testing. The final result is shown below, using the main screen (transactions list) as an example.
Design and validation
I conducted two rounds of usability testing with 15 users—existing business, retail, and new users—on the resulting new design, using a prototype, before adjusting the design and moving to another round of testing. The final result is shown below, using the main screen (transactions list) as an example.
A
I have changed the top menu from a horizontal menu to a vertical side bar, which proved more discoverable and scalable. I removed the heavy branding which was disliked by users and desiged an account switcher, which was very well received as loging in and out for users with multiple entities was one of the biggest pain points for users.
A
I have changed the top menu from a horizontal menu to a vertical side bar, which proved more discoverable and scalable. I removed the heavy branding which was disliked by users and desiged an account switcher, which was very well received as loging in and out for users with multiple entities was one of the biggest pain points for users.
B
Most users have 1 account and by far the most used actions they take is checking their transactions, so the full account page sits mostly empty and add friction. I have moved the accounts to a collapsible sidebar for quick switching.
B
Most users have 1 account and by far the most used actions they take is checking their transactions, so the full account page sits mostly empty and add friction. I have moved the accounts to a collapsible sidebar for quick switching.
C
For the main area I kept some of the important figures on top, reorganised the content in logical tabs from the previous confusing layout and added filtering and search options, in addition to the very much requested additional transactions info.
C
For the main area I kept some of the important figures on top, reorganised the content in logical tabs from the previous confusing layout and added filtering and search options, in addition to the very much requested additional transactions info.
02
Post-launch phase
In the post-launch phase, we focused on gathering user feedback and analyzing performance metrics to enhance the online banking platform. Continuous monitoring allowed us to identify areas for improvement, leading to the addition of new features and optimizations based on user behavior. Regular updates ensured the platform evolved alongside user needs.
02
Post-launch phase
In the post-launch phase, we focused on gathering user feedback and analyzing performance metrics to enhance the online banking platform. Continuous monitoring allowed us to identify areas for improvement, leading to the addition of new features and optimizations based on user behavior. Regular updates ensured the platform evolved alongside user needs.
03
Design ops
Early in the interface design stage, I developed a UI kit that evolved into a comprehensive design system for the Servicing department, covering three web platforms: retail banking, commercial banking, and self-service. Starting with basic elements like buttons, fields, and dropdowns, I created a scalable color-naming system and a custom icon library. The system expanded to complex components like date pickers. I also established a workflow to ensure accessibility standards were consistently met across all platforms. To read more about my work on this follow this link.
03
Design ops
Early in the interface design stage, I developed a UI kit that evolved into a comprehensive design system for the Servicing department, covering three web platforms: retail banking, commercial banking, and self-service. Starting with basic elements like buttons, fields, and dropdowns, I created a scalable color-naming system and a custom icon library. The system expanded to complex components like date pickers. I also established a workflow to ensure accessibility standards were consistently met across all platforms. To read more about my work on this follow this link.
04
Outcome and learnings
The project resulted in a significantly improved online banking platform, with enhanced user satisfaction and increased engagement metrics. Key learnings included the importance of ongoing user feedback and the value of iterative testing in refining features. Additionally, the new platform's scalability and responsiveness addressed previous shortcomings, ensuring a user-centered approach while providing a seamless experience across devices.
04
Outcome and learnings
The project resulted in a significantly improved online banking platform, with enhanced user satisfaction and increased engagement metrics. Key learnings included the importance of ongoing user feedback and the value of iterative testing in refining features. Additionally, the new platform's scalability and responsiveness addressed previous shortcomings, ensuring a user-centered approach while providing a seamless experience across devices.
2024, Antonio Mattucci