Upload
bhushan-bhosale
View
43
Download
1
Embed Size (px)
Citation preview
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