Year 2022

Boosting Bank website efficiency with user-centric features

- B2B & B2E Website | Finance & Banking -

Tasks balance

UX 80% / UI 20%

Project duration

12 months

Design System

Material Design

The team

16 members

Tools & Framework

Figma / Jira / Scrum

01 Prologue

Project Goals: Enhancing
the Banking Website Experience

When I joined the project, the initial design system and UI component library for tablets had been established, but essential design documentation and user insights were lacking. To align the project with key business goals and user needs, we started fresh by addressing gaps in design rationale and stakeholder alignment.

At the beginning of the project, we established three main goals to address specific problems and opportunities in the user experience of a banking website. These goals have been carefully designed to enhance functionality and usability, ensuring a seamless digital experience.

Enhanced User Experience & Accessibility

The project aimed to enhance the bank website's users (bank employees & business clients) experience while ensuring accessibility for all. This involved improving readability, contrast, and overall usability to create a seamless and inclusive digital experience.

Maximized User Engagement & Satisfaction

By optimizing workflows, simplifying navigation, and improving UI elements, we aimed to streamline key user tasks, reduce completion times, and enhance engagement with the bank’s digital platform.

Improved Information Accessibility & Clarity

We reorganized the site’s content structure, tagging system, and navigation to improve clarity and information access. This helped users quickly find relevant data while reducing cognitive load.

02 Responsobilities

Scope of Work

Empathise

User research
User interviews
User observation
Stakeholders interviews
Competitive analysis

Define

Problem statement
User needs / goals
Design requirements
Persona development
Information architecture

Ideate

User stories
User flows
Sketching
Journey map
Story board

Prototype & Test

Wireframes
Interactive prototypes
Usability testing
Micro-interaction design
A/B testing

Design assets

Component library
Style guide
Assets library
Pattern library
Accesibility guide

03 Understanding Users

The beginning of the design journey

To gain a deeper understanding of the users’ pain points and daily challenges, I conducted targeted interviews 💬 and interactive workshops with product owners and bank employees. These sessions revealed key areas for improvement in their daily workflows, navigation difficulties, and specific feature requests.

Using affinity mapping, I identified recurring themes and synthesized user feedback into actionable problem statements that informed design decisions. The insights gathered played a crucial role in prioritizing design improvements.

04 Understanding Business

Balancing User Needs with Business Objectives

My approach extended beyond user-centric design to address business priorities and operational efficiency. By aligning design solutions with the bank’s strategic objectives, I ensured that the redesigned website balanced user satisfaction and measurable business outcomes.

Key improvements included an intuitive navigation menu, streamlined dashboards, and an optimized request management system. These features were implemented based on data-driven insights, enhancing both user experience and organizational effectiveness.

05 Wireframing Ideas

Blueprinting Functional Elegance

During the wireframing phase 📐, I focused on creating detailed layouts that defined key screens, user interactions, and information flows. The wireframes served as blueprints for the overall design, ensuring that core functionalities and user journeys were clearly outlined before moving to high-fidelity mockups.

06 Testing Prototypes

Bringing Designs to Life for User Validation

I developed interactive prototypes using Figma to simulate the final user experience and test design decisions in real-world scenarios. Usability testing sessions with key stakeholders and bank employees provided valuable feedback, which I used to iterate on and improve the prototypes.

This iterative approach ensured that the final design was not only visually appealing but also optimized for functionality and ease of use.

07 Aligning Aesthetics & Accessibility

Balancing Brand Identity with Inclusivity

I enhanced the visual appeal of the banking website by incorporating the bank’s existing color scheme while refining layout and typography. The goal was to balance a professional, modern look with inclusivity and accessibility.

I conducted a comprehensive accessibility audit 🔬 to ensure compliance with WCAG standards. Improvements in contrast, text readability, and navigational elements enabled the website to provide an inclusive experience for all users, especially those with disabilities.

08 Solution

Transforming the Digital Experience

We reimagined the website’s layout, navigation, and overall design, integrating intuitive menus, responsive layouts, and personalized dashboards to create a seamless user journey. Key features included enhanced search functionality, streamlined forms, and clear CTAs that improved user interaction and efficiency.

Through iterative prototyping and user testing, we fine-tuned the user journey, ensuring a frictionless experience from login to request creation. The result is a transformed digital platform that not only meets but exceeds the expectations of modern banking users, setting a new standard for digital banking experiences.

09 Result

Outcome Overview

This project was transformative, focusing on user needs and refining visuals. I would like to outline the tangible outcomes of our team design efforts, shedding light on how we collected key performance indicators (KPIs) from various sources, including surveys and website analytics.

We gathered insights from a diverse range of stakeholders, such as bank website users and internal teams, to thoroughly evaluate the impact of our user-centric design approach. Let's explore how these metrics validate the success of our initiatives in streamlining workflow efficiency and enhancing user satisfaction.

Cost savings

User Experience Enhancements

The redesigned website led to a 14% reduction ↓in task completion time, improving the productivity of bank employees and optimizing daily workflows. This time savings translated into reduced staffing costs and better resource allocation, contributing to financial performance improvements.

Business success

Measured Design Effectiveness

We saw a 12% increase ↑ in user satisfaction ratings, reflecting the success of user-centric design solutions in enhancing the overall experience. The increase in engagement, user loyalty, and brand perception positioned the bank for long-term success.

Operational efficiency

Reduced Support Inquiries

With improved information architecture and navigation, support inquiries related to navigation difficulties dropped, reducing IT service requests and saving operational costs . This allowed the bank to reallocate IT resources more efficiently.

Home Fleet App British TV App Public Transport App ~~Bank Website~~ Health Facility App

Creating useful design since 2015

LinkedIn My Resume

↑ Go to Top