Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI/UX Re-design for ICICI Bank Mobile App

326 views

Published on

ICICI Bank App re-design concept

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

UI/UX Re-design for ICICI Bank Mobile App

  1. 1. MOBILE APPLICATION REDESIGN PROJECT UX / UI DESIGN FOR SELECTED PAGES AND FEATURES Bhushan Bhosale
  2. 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. 3. MOOD BOARD
  4. 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. 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. 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. 7. USER FLOW DIAGRAM GOALS 1. Interaction Design 2. Information architecture
  8. 8. SAMPLE WIREFRAMS
  9. 9. SAMPLE HIGH FIDELITY PROTOTYPE Log In Home Page Account Summary Spend Analysis Home Forecast Virtual Assistant Screen Conceptual ZERO UI DESIGN
  10. 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. 11. THANK YOU Bhushan Bhosale 9970056866

×