Transactional Banking

A one stop banking portal - One Bank experience, user centric platform providing unified experience, self-service and an omnichannel experience across Transactional Banking, Financial Markets, Wealth and Corporate Finance.

The Business Need 💎

A market differentiated, client centric portal that has a truly ‘One-Bank’ offering across all client touch points and products.

The foundation included functional process reorganisation, aligning customer journeys & process flows while simplifying the access to information.

The Design Approach 💡

Relevance - the foundation of One Bank portal, clear context, just enough information at the right time.

A system that is progressively designed to ensure user focus and quick task completion. Utilizing an atomic design approach to allow flexibility, scalability and design consistency.

The Framework

Considering the project was enormous, defining a framework was critical to allow easy and efficient ways of working.

Discover ➡️ Define ➡️ Design ➡️ Deliver

Discover.

Ideate, Plan and Prioritize.

The key activities through all our discovery with Business stakeholders, Product owners, Creatives and Engineers.

Discovery ensured we have a clear direction on the target users & journeys to be delivered alongside any potential risks and dependencies.

Define.

Functional needs, User journey & Site navigation.

Intense discussions and white boarding alongside business stakeholders, product owners, business analysts and UX designers.

The goal of Define stage is to ensure a clear plan on the scope of design deliveries, overall sitemap and microframes.

Design.

Trade Portfolio

Low fidelity wireframe highlighting:

  1. Switch between trade types

  2. Form components with searchable text

  3. Relevant form validations

Wireframes, Prototypes and Reviews.

Translating the microframes into detailed wireframes that also function as interactive prototypes, mimicking the end result.

The goal of the Design stage is to capture business requirements into tangible design output and thereby validating it with business stakeholders and a technical feasibility check.

User Dashboard

Low fidelity wireframe highlighting:

  1. Functional widgets customizable for a user

  2. Showcase essential information only

  3. Prioritize components based on context

Design Components

  1. Define component skeleton & behavior

  2. Character and language considerations

  3. Reuse across project for design consistency

Deliver.

Style guide, Design system & Branding

The final output of the designs with brand specific styling and high fidelity screens. The goal of Deliver stage is to showcase the end result, validated with business and engineers.

Key learnings & takeaway

For an engagement as extensive as a banking portal, gaining clarity on business requirements upfront was critical before initiating design. Ongoing alignment with business stakeholders and the product owner became the cornerstone of our approach.

A structured design delivery framework accelerated efficiency while maintaining consistency, flexibility, and speed.