❋

Design Patterns in Banking Services

Daily banking made intuitive and consistent.

In the context of digital banking, design patterns play a critical role in shaping the user experience and product effectiveness.

They are reusable solutions that address common interaction and design problems. By bringing consistency and predictability to digital products, they foster trust, clarity, and efficiency.

Why is it so important?

❋ Visual language

Creates a cohesive and recognizable identity across the products. It translates brand values, enhancing usability, accessibility, and user trust.

❋  Consistency matters

Creates a seamless and predictable user experience, helping users navigate digital products with confidence and ease

❋  Product development made efficient

Makes it easier by providing a proven, reusable solution instead of requiring teams to solve the same problem from scratch every time

❋  Scalability

Provides reusable, standardized solutions that can be applied across products and features

❋ Accessible and inclusive

By embedding accessibility considerations into reusable solutions

❋  Error handling

Establishes clear rules and behaviours, making inconsistencies and usability issues less likely to occur.

Briefing

Redesign in the banking app all application processes according to the defined design patterns.

Process

Problem definition

❋ Alignment between customer flows that consist of application processes;

❋ Encountered problems;

❋ Mapping of all application process patterns.

Ideation

❋ Create design patterns;

❋ Define different levels of navigation.

Implementation

❋ Good collaboration with Tech.

The Problem

Mapping journeys

What

❋ Every step in these flows takes an average of 10 seconds for users to complete;

❋ Very long flows;

❋ Lack of storytelling and engagement;

❋ Different APIs for the same functionality in different areas of the product;

❋ The design system only exists on the Design side.

Product areas

❋ Onboarding

❋ Know your customer

❋ All loan applications

❋ All cards applications

Detailed mapping of all customer flows to understand where we could create and align patterns, where the API’s should be the same, and how we would solve the problems in case of different API calls for the same design patterns.

A comprehensive flowchart with multiple stages labeled from 'Awareness' to 'Manage loan', illustrating a process with various connected steps, decision points, and annotations, primarily in purple and white colors.

Ideation

*❋ Establishment of patterns for the same functionality in different flows;

❋ Definition of different levels of navigation in an application to create cohesive storytelling while guiding the user;

❋ Reduce the amount og steps according to the use case;

A flowchart diagram titled 'Onboarding Flow' with various decision points, process steps, and section dividers in purple, black, orange, and white colors, used for guiding user onboarding process.

Onboarding flow with different levels of navigation.

Implementation

Steps in a mobile application process including onboarding, applying for a mortgage, updating application details, selecting a product using a slider, choosing a credit card, and confirming the application, with before and after screens for each step.