ICICI Bank App re-design concept

1. MOBILE APPLICATION REDESIGN PROJECT
UX / UI DESIGN
FOR SELECTED PAGES AND FEATURES
Bhushan Bhosale

2. PROCESS
01 Learn.
Identify users, context, brand attributes, brand promises and gather
user data, competetive analysis, conduct interviews and field studies.
02 Explore.
Build personas on gathered data, generate materials that
will aid the outlining of the project, build user stories, user story mapping,
screen flows, information architecture, user journeys, scenarios.
Work on cases and triggers to find out best suitable features and UI element
03 Select.
Evaluate, test, and select wireframe concepts for prototype
development.
04 Develop.
Create design specifications and evolve concept/
wireframes into full design solution.
05 Refine.
Evaluate design with stakeholders
to obtain feedback and conduct usability testing.
06 Deliver.
Complete design and produce deliverables.
LEARN
01
SELECT
03
DEVELOP
04
REFINE
05
DELIVER
06 EXPLORE
02

3. MOOD BOARD

4. PRODUCT GOALS
01 Simplified Banking Solution
Simplified App by improving IA, usbility and Design
02 Personalized User Experience
Create user experience which match to user’s specific preferences
03 Increase Engagement with the product
Enter into users daily life
04 Present Offers as a solutions.
Market financial products as a solutions and not marketing activities

5. USER ACTIVITIES
USER TASKS
USER STORIES
APP Log in
Log in with PIN
Enter 4 Digit PIN
and Login
Voice Login
Give voice command
to wake up service
e.g.“ Hi ICICI Assist”
Ans Voice Password
to assistance and
login
Virtual Assistance
tells your balance and
most crtical task to do
Manage Account
Check Account
Details
Click on Account
and Deposits bttn.
& go to Summary Page
View Account
Details and last 10
transaction Summary
Click on Account State-
ment bttn. & go to
Acc. Statement page
Select Dates and
check Account Statem-
ment
Download and Mail
Statement in PDF
View Account
Details and last 10
transaction Summary
Acccount Overview
Priority/UserFlow
Check Account
Overview - Acc. No.,
Closing Balance
Click on Overview
and go to Summary
page
Compare Spending
by selecting Month’s
Range
Get Spending Analysis
in % and in (Rs.)
( Rise or Decrease )
Get Recent Spends -
last 10 transactions
Spend Analysis
Check Spend Analysis
Overview on Home
page
Click on Spend Analysis
over view and go to
Spend Analysis Page
Click on Forecast
Tab and go to
Spend Forecast page
Get Spending Forecast
in % (Rise or Decrease)
for selected month
Get Expected Spend
in Value (Rs.) Against
Total Balance (Rs.)
Add Earnings and
Expenses for selected
month
Get Recent Spends -
last 10 transactions
Spend Forecast
Check Spend Analysis
Overview on Home
page
Click on Spend Analysis
over view and go to
Spend Analysis Page
USER STORY MAPPING
GOALS
1. Visual presentation of product backlog to define scope and complexity
2. Create use cases, mental model and scenarios
3. Prioritize product features
4. Define releases and versions
Sample User Story Mapping for single release

6. Log in with PIN
Account Overview
Click on credit card
overview
Cr. Payment Page-
Select Reg. Card
Make Card
Payment
App Log In with 4
digit PIN
Display Acc. Info -
Acc. number and Type,
Account Balance
Select Card type from
dropdown
Select Account no., Card
no., and Amount type
to make card payment
Display Due Date,
Due Amount and Title
CTA‘Pay Now’Bttn.
Scenario
Empathy - Take action immediately (Anxious)
Use Case FeaturesFeature Type Priority
Ramesh is a busy employee, having ICICI saving account
1. His credit card bill is due today
2. He want to make payment through ICICI Bank app
Functional High
Middle
High
High
High
Low
Functional
Functional
Spend Analysis
Credit Card payment
is due
Date today
Display as Priority Features
Use Swapping Cards to
hold data
Display Credit Card feature
on priority, as a first card
Goto Card Payment Page
to make payment
Cheque is in clearing
Check Spend Analysis
for credit card
Functional
Strategic
Strategic
Strategic
Log in with PIN
Account Overview
Click on spend
analysis card
Select Month
Range and fetch
analysis
Spend Analysis
App Log In with 4
digit PIN
Display Acc. Info -
Acc. number and Type,
Account Balance
Select Months from
dropdown
Comparision chart,
Value (Rs.) and %
( Rise or Fall )
Display Title, Value (Rs.)
and % ( Rise or Fall )
CTA‘Details’Bttn.
Scenario
Empathy - Study in Detail ( Curiosity, Hope )
Use Case FeaturesFeature Type Priority
Suresh is a businessman, having ICICI current account
1. Suresh planning business expansion
2. He want quick account analysis of income & spending
Functional High
Middle
Low
High
Low
Low
Functional
FunctionalSpend Forecast Expected Spend graph,
Available Bal. and %
(Rise or Fall)
Functional
Strategic
Strategic
Strategic
Strategic
CTA Add Earnings and
Expenses
MENTAL MODEL
GOALS
1. Build product features
2. Prioritize features in UI perspective
3. Create Scenarios for understanding UX needs
4. Find out Cases and Triggers for interaction design
Sample Mental Model for selected Scenarios
Sample Cases and Triggers workflow for Interaction Design
Functional Case required user action
provide PAY NOW button
Case - 1
Case - 2
Case - 3
Priority - Critical
Automatic Triger
Priority - High
Automatic Triger
Manual Triger

7. USER FLOW DIAGRAM
GOALS
1. Interaction Design
2. Information architecture

8. SAMPLE WIREFRAMS

9. SAMPLE HIGH FIDELITY PROTOTYPE
Log In Home Page Account Summary
Spend Analysis Home Forecast Virtual Assistant Screen
Conceptual ZERO UI DESIGN

10. Findings
1. 49% People hold mobile in their non-dominant single hand
2. 75% People use thumb to interact with touch screen mobiles
3. In this app design Keeping Primary navigations / Most important within thumb’s reach
SAMPLE DEVICE INTERACTION EXAMPLE
How we interact with Mobile Devices?
LEEFT HAND ( Most Common ) Both Hands
Right Hand

11. THANK YOU
Bhushan Bhosale
9970056866