Agent facing mobile banking application

Agent facing mobile banking application

Optimized customer management and agent workflows, and scaled the design system to improve cross-platform consistency by 96%.

Optimized customer management and agent workflows, and scaled the design system to improve cross-platform consistency by 96%.

Enterprise

Design System

Live

Overview

Overview

BACKGROUND

Tata AIA is a life insurance company in India, offering a range of protection and savings plans through a partnership between the Tata Group and AIA, a leading Asian insurer, providing comprehensive financial security for individuals and families.

The project entailed the design of interfaces an agent-facing platform. The primary objective was to establish a cohesive style guideline for the new SIDDHi interface which would mirror the visual language of the Siddhi super app.

Tata AIA is a life insurance company in India, offering a range of protection and savings plans through a partnership between the Tata Group and AIA, a leading Asian insurer, providing comprehensive financial security for individuals and families.

The project entailed the design of interfaces an agent-facing platform. The primary objective was to establish a cohesive style guideline for the new SIDDHi interface which would mirror the visual language of the Siddhi super app.

MY ROLE

Tasks Flows,Ui Design,Testing,Prototyping
Updating the Design System, Co-ordinating with Developers and PMs, Testing with QA team and Pitching to Stakeholders

Tasks Flows,Ui Design,Testing,Prototyping
Updating the Design System, Co-ordinating with Developers and PMs, Testing with QA team and Pitching to Stakeholders

TEAM

Sole designer (Me), 1 Manager

Sole designer (Me), 1 Manager

DURATION

4 Months

4 Months

The Situation

The Situation

The company possesses multiple applications, presenting the challenge of devising a cohesive design system. The objective was to amalgamate elements and workflows from existing design systems, thereby establishing a unified design framework applicable across all applications. Additionally, the task encompassed integrating new workflows and responsive designs. Collaborating with development teams across diverse domains created challenges.

The company possesses multiple applications, presenting the challenge of devising a cohesive design system. The objective was to amalgamate elements and workflows from existing design systems, thereby establishing a unified design framework applicable across all applications. Additionally, the task encompassed integrating new workflows and responsive designs. Collaborating with development teams across diverse domains created challenges.

Responsive
Responsive

Designed to accommodate 2 viewports desktop (1440), mobile (360).

Inconsistency across all viewports
Inconsistency across all viewports

The design system prioritizes accessibility, ensuring that all components and interfaces are inclusive.

Scalability challenges
Scalability challenges

Leveraged Figma's components, variables, plugins and styles.

Research - Stake holder Personnas

Research - Stake holder Personnas

The user stories were given for the flows of 3 different stakeholders :


Agent (Advisor) - They refer to individuals who are responsible for carrying out specific tasks or functions within the organisation. In a customer service context, agents are customer support representatives handling inquiries, technical support specialists troubleshooting issues, or sales representatives assisting with purchases.


Leader - Leaders: Leaders are individuals who hold positions of authority or responsibility within the organisation. They are tasked with guiding and directing the actions of others to achieve organizational goals and objectives. Leadership roles can include managers, supervisors, team leaders, directors, and executives.


Employee - Employees encompass all individuals who are employed by the organization to perform various roles and functions. This category includes both frontline staff, such as agents and individual contributors, as well as managerial and administrative staff.

The user stories were given for the flows of 3 different stakeholders :


Agent (Advisor) - They refer to individuals who are responsible for carrying out specific tasks or functions within the organisation. In a customer service context, agents are customer support representatives handling inquiries, technical support specialists troubleshooting issues, or sales representatives assisting with purchases.


Leader - Leaders: Leaders are individuals who hold positions of authority or responsibility within the organisation. They are tasked with guiding and directing the actions of others to achieve organizational goals and objectives. Leadership roles can include managers, supervisors, team leaders, directors, and executives.


Employee - Employees encompass all individuals who are employed by the organization to perform various roles and functions. This category includes both frontline staff, such as agents and individual contributors, as well as managerial and administrative staff.

Existing Application

Existing Application

I received the existing designs utilized in the previous SIDDHI application to reference its features and flows. The objective was to develop a new iteration of SIDDHI application aligning consistently with the new design paradigm of the super app the company is striving to establish.

BRD Documentation

BRD Documentation

Survey Insights from 52 Agents, Employees, and Team Leaders

The team and I then collaborated to map out the new workflows that would be integrated into the redesigned application, ensuring full alignment with the larger super-app ecosystem, which the previous app was not connected to.

Needs in Mind

Needs in Mind

Security

Implement robust authentication methods such as biometric authentication to ensure proper access

User-Friendly

Design an intuitive and easy-to-navigate interface that allows users to quickly access their accounts

Performance

Optimise app performance to deliver fast response times and smooth navigation.

Compliance

Ensure the app complies with relevant regulations and industry standards

Customer Support

Offer easy access to customer support channels within the app, such as live chat, phone support, or help articles.

Personalisation

Provide personalized experiences by offering customizable features such as account preferences

Keeping Some Heuristics in Mind

Keeping Some Heuristics in Mind

System status visibility

The system should always inform the users about the current state and actions through appropriate visual clues & actions

Efficiency of use

Designing products with flexibility and efficiency of use as key considerations is essential for meeting the needs of both novice and expert users.


Accessibility

Integrating accessibility into workflows and design considerations is paramount to ensure inclusivity and usability for all users.

Layout

Layout is the arrangement of visual elements on a page.It involves organisational principles of composition to achieve specific objective

Context

Context allows designing and building experiences that are personalized to meet unique needs of the indivisual user based on specific situation or context of use

Consistency

Consistency in design is about making elements uniform — having them look and behave the same way.

Solution

Solution

I designed, maintained and scaled the new design system prioritizing accessibility and responsiveness.

I designed, maintained and scaled the new design system prioritizing accessibility and responsiveness.
ATOMS (Design System)
ATOMS (Design System)
MOLECULES
(Design System)

Solution (Part 2)

Using the new design system, I then started redesigning the agent-faced portal for TATA AIA.

The redesign encompassed over 60 screens across different viewport sizes.

Using the new design system, I then started redesigning the agent-faced portal for TATA AIA.
The redesign encompassed over 60 screens across different viewport sizes.

Home Page

The home page prioritizes key functions for quick access to services, favorites, and new sections. It integrates various apps, allowing swift adjustments based on user preferences.

The home page prioritizes key functions for quick access to services, favorites, and new sections. It integrates various apps, allowing swift adjustments based on user preferences.

Profile

The profile section is the user's ID hub, showing designation and rank. Users can share details for extra benefits and access new documents, navigate sections, or edit bank details, contacts, and email.

The profile section is the user's ID hub, showing designation and rank. Users can share details for extra benefits and access new documents, navigate sections, or edit bank details, contacts, and email.

Customer Payout

Agents can easily access information about their customers' payouts to provide efficient service through two tabs positioned at the top

Agents can easily access information about their customers' payouts to provide efficient service through two tabs positioned at the top

Renewal

Within this section, users can effortlessly access all policy statuses, ranging from those that are lapsed to those that are currently ongoing, for informed decision-making processes

Commissions & Earnings

Users can gain valuable insights into their performance metrics, and overall performance within the system.

GST Invoice

Agents can effortlessly generate GST-compliant invoices directly within the app, saving time and eliminating the need for manual invoicing processes.

9:41

View

Share

March 2023

Draft Invoice

GST Number

06ANUPK2398E1ZL

GST Number Verification

Verified

GST Number Status

Closed

GSTIN Status

Closed

Total Invoice Amount

₹ 1,18,000

GST Amount

₹ 18,000

View More

Disclaimer

“We hereby confirm that invoices issued are in accordance with the agreed contract with the company. We undertake the responsibility to comply with the timely filing of GST returns at government portal and comply with other applicable provisions of GST law”

Generate Otp

Search

Chatbot

Verify OTP

We have sent the OTP to the user’s registered mobile number ending with 6093 & email ********1980@gmail.com

813532

OTP verified successfully

9:41

View

Share

March 2023

Draft Invoice

GST Number

06ANUPK2398E1ZL

GST Number Verification

Verified

GST Number Status

Closed

GSTIN Status

Closed

Total Invoice Amount

₹ 1,18,000

GST Amount

₹ 18,000

View More

Disclaimer

“We hereby confirm that invoices issued are in accordance with the agreed contract with the company. We undertake the responsibility to comply with the timely filing of GST returns at government portal and comply with other applicable provisions of GST law”

Generate Otp

Search

Chatbot

Verify OTP

We have sent the OTP to the user’s registered mobile number ending with 6093 & email ********1980@gmail.com

813532

OTP verified successfully

Learnings and Key takeaways

Learnings and Key takeaways

01
Foster Collaboration & Continuous Learning. 
A design system is a shared effort. Engaging with cross-functional teams improves consistency and strengthens your ability to communicate and advocate for design decisions.

02
Adaptability & Growth Mindset
As design systems evolve, staying open to change and feedback enhances problem-solving skills. Embracing new challenges helps you grow as a designer and stay ahead of industry trends.

01
Foster Collaboration & Continuous Learning. 
A design system is a shared effort. Engaging with cross-functional teams improves consistency and strengthens your ability to communicate and advocate for design decisions.

02
Adaptability & Growth Mindset
As design systems evolve, staying open to change and feedback enhances problem-solving skills. Embracing new challenges helps you grow as a designer and stay ahead of industry trends.