MOBILE APPLICATION REDESIGN PROJECT

UX / UI DESIGN FOR SELECTED PAGES AND FEATURESBhushan Bhosale

PROCESS

01 Learn. Identify users, context, brand attributes, brand promises and gather user data, competetive analysis, conduct interviews and �eld 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 �ows, information architecture, user journeys, scenarios.Work on cases and triggers to �nd out best suitable features and UI element

03 Select. Evaluate, test, and select wireframe concepts for prototypedevelopment.

04 Develop. Create design speci�cations and evolve concept/wireframes into full design solution.

05 Re�ne. Evaluate design with stakeholdersto obtain feedback and conduct usability testing.

06 Deliver. Complete design and produce deliverables.

LEARN 01

SELECT 03

DEVELOP 04

REFINE05

DELIVER06

EXPLORE02

MOOD BOARD

PRODUCT GOALS

01 Simpli�ed Banking Solution Simpli�ed App by improving IA, usbility and Design

02 Personalized User Experience Create user experience which match to user’s speci�c preferences

03 Increase Engagement with the productEnter into users daily life

04 Present O�ers as a solutions. Market �nancial products as a solutions and not marketing activities

USER ACTIVITIES

USER TASKS

USER STORIES

APP Log in

Log in with PIN

Enter 4 Digit PINand Login

Voice Login

Give voice command to wake up servicee.g. “ Hi ICICI Assist”

Ans Voice Passwordto assistance and login

Virtual Assistance tells your balance andmost 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

Prio

rity

/ Use

r Flo

w

Check Account Overview - Acc. No.,Closing Balance

Click on Overview and go to Summary page

Compare Spendingby selecting Month’sRange

Get Spending Analysisin % and in (Rs.)( Rise or Decrease )

Get Recent Spends -last 10 transactions

Spend Analysis

Check Spend AnalysisOverview on Home page

Click on Spend Analysisover view and go to Spend Analysis Page

Click on Forecast Tab and go to Spend Forecast page

Get Spending Forecastin % (Rise or Decrease)for selected month

Get Expected Spendin Value (Rs.) Against Total Balance (Rs.)

Add Earnings and Expenses for selectedmonth

Get Recent Spends -last 10 transactions

Spend Forecast

Check Spend AnalysisOverview on Home page

Click on Spend Analysisover view and go to Spend Analysis Page

USER STORY MAPPING

GOALS

1. Visual presentation of product backlog to de�ne scope and complexity2. Create use cases, mental model and scenarios 3. Prioritize product features 4. De�ne releases and versions

Sample User Story Mapping for single release

Log in with PIN

Account Overview

Click on credit cardoverview

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 fromdropdown

Select Account no., Cardno., and Amount typeto 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 todayDisplay as Priority Features Use Swapping Cards to hold data

Display Credit Card featureon priority, as a �rst card

Goto Card Payment Pageto make payment

Cheque is in clearing

Check Spend Analysisfor 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 fromdropdown

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 account1. 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 perspective3. Create Scenarios for understanding UX needs4. Find out Cases and Triggers for interaction design

Sample Mental Model for selected Scenarios

Sample Cases and Triggers work�ow for Interaction Design

Functional Case required user actionprovide PAY NOW button

Case - 1

Case - 2

Case - 3

Priority - CriticalAutomatic Triger

Priority - High

Automatic Triger

Manual Triger

USER FLOW DIAGRAM

GOALS

1. Interaction Design2. Information architecture

SAMPLE WIREFRAMS

SAMPLE HIGH FIDELITY PROTOTYPE

Log In Home Page Account Summary

Spend Analysis Home Forecast Virtual Assistant ScreenConceptual ZERO UI DESIGN

Findings

1. 49% People hold mobile in their non-dominant single hand 2. 75% People use thumb to interact with touch screen mobiles3. 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

THANK YOU

Bhushan Bhosale 9970056866