Inbank - Financial Platforms

Unified Design System for a Seamless Banking Experience Across Web, iOS, and Android

Duration

12 months +

Made with

Tangible

Stakeholder

Allitude

Industry

Home Banking

Inbank - Financial Platforms

Unified Design System for a Seamless Banking Experience Across Web, iOS, and Android

Duration

12 months +

Made with

Tangible

Stakeholder

Allitude

Industry

Home Banking

Inbank - Financial Platforms

Unified Design System for a Seamless Banking Experience Across Web, iOS, and Android

Duration

12 months +

Made with

Tangible

Stakeholder

Allitude

Industry

Home Banking

Project overview

The project aimed to develop a comprehensive design system for a banking application spanning web, iOS, and Android platforms. The objective was to unify the user experience across all platforms, ensuring consistency and enhancing usability.

Focus Areas

The project emphasized clear, intuitive user journeys, optimizing navigation and simplifying complex financial interactions. A scalable design system was created to adapt seamlessly across mobile and desktop platforms, maintaining a consistent brand identity while allowing for flexibility in customization.

My Role

Android Redesign Lead. I was included in the project to work on brand new trading features. As a UI Designer, I led the redesign of the Android app for a multi-platform home banking product, ensuring design consistency with iOS across three customizations.


Design System Workshop. Set up a design system workshop to streamline design alignment and maintain cohesion.

Project overview

The project aimed to develop a comprehensive design system for a banking application spanning web, iOS, and Android platforms. The objective was to unify the user experience across all platforms, ensuring consistency and enhancing usability.

Focus Areas

The project emphasized clear, intuitive user journeys, optimizing navigation and simplifying complex financial interactions. A scalable design system was created to adapt seamlessly across mobile and desktop platforms, maintaining a consistent brand identity while allowing for flexibility in customization.

My Role

Android Redesign Lead. I was included in the project to work on brand new trading features. As a UI Designer, I led the redesign of the Android app for a multi-platform home banking product, ensuring design consistency with iOS across three customizations.


Design System Workshop. Set up a design system workshop to streamline design alignment and maintain cohesion.

Project overview

The project aimed to develop a comprehensive design system for a banking application spanning web, iOS, and Android platforms. The objective was to unify the user experience across all platforms, ensuring consistency and enhancing usability.

Focus Areas

The project emphasized clear, intuitive user journeys, optimizing navigation and simplifying complex financial interactions. A scalable design system was created to adapt seamlessly across mobile and desktop platforms, maintaining a consistent brand identity while allowing for flexibility in customization.

My Role

Android Redesign Lead. I was included in the project to work on brand new trading features. As a UI Designer, I led the redesign of the Android app for a multi-platform home banking product, ensuring design consistency with iOS across three customizations.


Design System Workshop. Set up a design system workshop to streamline design alignment and maintain cohesion.

Problem

Obsolete and disheartening Android configuration

The primary challenge was aligning the design across three distinct platforms, each with its own set of guidelines and user expectations. Additionally, coordinating between separate teams for web and mobile development required effective communication and collaboration.

Bridging Guidelines and Team Coordination in Development

The primary challenge was aligning the design across three distinct platforms, each with its own set of guidelines and user expectations. Additionally, coordinating between separate teams for web and mobile development required effective communication and collaboration.

Allitude

Product Owner

Dimension 

Head of Development 

Tangible

Head of Design

Allitude

Internal Design Team

Tangible

Design Team

Dimension

App Development Team

Pigmento

Front-end Team

Evoq

Creative Director

Allitude

Product Owner

Dimension 

Head of Development 

Tangible

Head of Design

Allitude

Internal Design Team

Tangible

Design Team

Dimension

App Development Team

Pigmento

Front-end Team

Evoq

Creative Director

Allitude

Product Owner

Dimension 

Head of Development 

Tangible

Head of Design

Allitude

Internal Design Team

Tangible

Design Team

Dimension

App Development Team

Pigmento

Front-end Team

Evoq

Creative Director

Process

Discovery

Concept

Workshop

Components

Documentation

Implementation

Implementation

Concept

Workshop

Components

Documentation

Implementation

Discovery

Concept

Workshop

Components

Documentation

Implementation

Implementation

Concept

Workshop

Components

Documentation

Implementation

Strategic Planning
Discovery Phase

Conducting a comprehensive product tour and inventory to identify key components and critical issues.

Concept phase

Consolidating and documenting guidelines that emerged during the discovery phase.

Workshop

The workshop's objective was to structure clear and maintainable documentation that defines main styles and components, promoting visual consistency and knowledge sharing among designers, developers, and researchers.

Component Definition

Identifying and defining key components such as typography, colors, buttons, forms, and grids.
Establishing naming conventions to ensure a shared vocabulary and avoid confusion.

Documentation

Creating detailed documentation that organizes and defines the main styles and components, their specifications, and functions. This documentation serves as a reference to promote visual consistency and knowledge sharing among team members.

Implementation and Iteration

Implementing the design system incrementally, starting with a strategic phase and followed by progressive releases. Regularly updating and refining the system based on feedback and evolving project needs.

Solution

Versioning. Building Blocks of Design.

A versioning system was implemented alongside Abstract, ensuring all team members accessed the latest design files while maintaining a clear history of changes and establishing a structured file hierarchy.

Pattern Inventoy. Crafting Cohesion.

Comprehensive collections of design patterns tailored for iOS and Android platforms were developed, facilitating consistency and efficiency in mobile app development.

UX Pattern Library

Categories for a UX design system were documented, including rules for formatting, principles of user experience, common and specific workflows, links to design and technical resources, and a list of content for further exploration.

Workshop Deliverables

Knowledge Repository

Established a valuable repository of knowledge that has informed numerous reports and suggested corrections throughout the analysis period.

Guided Navigation Principles

Formalized essential principles of navigation and architecture, ensuring consistency and clarity in design.

Comprehensive Handover

Facilitated the transfer of previously undocumented knowledge, consolidating insights that were scattered across various teams into a unified resource.

Asset optimisation

Reorganizing and standardizing thousands of files to address inconsistencies that accumulated over time

Outcome

A more intuitive, efficient, and visually coherent banking experience, reducing complexity while enhancing usability. The integration of design tokens and a structured design system enables long-term adaptability and seamless platform evolution.

Outcome

A more intuitive, efficient, and visually coherent banking experience, reducing complexity while enhancing usability. The integration of design tokens and a structured design system enables long-term adaptability and seamless platform evolution.

Outcome

A more intuitive, efficient, and visually coherent banking experience, reducing complexity while enhancing usability. The integration of design tokens and a structured design system enables long-term adaptability and seamless platform evolution.

Thank you for taking a look!

If you'd like to explore more, you can head back to the portfolio page. I look forward to hearing from you.

© Edoardo Sportelli - 2024. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection.

Take the first step and explore what we can achieve together. hello@edoardosportelli.design

© Edoardo Sportelli - 2024. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection.

Thank you for taking a look!

If you'd like to explore more, you can head back to the portfolio page. I look forward to hearing from you.

© Edoardo Sportelli - 2024
Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better.

Policy Privacy and Data Protection.