Redesign KBZ Mobile Banking

saturngod
COMQUAS
Published in
4 min readMay 7, 2017

ရန္ကုန္မွာ ရိွသည့္ App ေတာ္ေတာ္မ်ားမ်ားဟာ အသံုးျပဳသူမ်ား အေနနဲ႕ အဆင္မေျပသလို လွပမႈလည္း မရိွဘူးလို႕ ခံစားရတယ္။ ဒါေၾကာင့္ App ေတြကို redesign ျပန္လုပ္မယ္ဆုိရင္ ဘယ္လို လုပ္သင့္သလဲ ဘယ္လို ပံုစံ ျဖစ္သင့္သလဲ ဆိုတာကို ျပန္ျပီး ေရးဆြဲခဲ့ပါတယ္။ ပထမဆံုး အေနနဲ႕ KBZ app ကို ကၽြန္ေတာ္တုိ႕ေတြ redesign ျပန္လုပ္ခဲ့ပါတယ္။

Redesign လုပ္သည့္ အခါ ေအာက္ပါ အခ်က္ေတြနဲ႕ ျပန္လုပ္ခဲ့ပါတယ္။

  • Function အသစ္ မထည့္ရန္။
  • မလိုသည့္ function မ်ား ျဖဳတ္ရန္။
  • ရိုးရွင္းရန္။

Icon

Original Icon
Redesign Icon

မူရင္း App icon အစား ရိုးရွင္းသည့္ ပံုစံကို ျပန္ေျပာင္းထားပါတယ္။

Splash Screen

Original Splash Screen
Redesign Splash Screen

မူရင္း splash screen ဟာ သံုးထားသည့္ အေရာင္ေတြဟာ ၾကည့္ရသာ မ်က္စိမွာ အဆင္မေျပလွပါဘူး. စာလံုးေတြ အမ်ားၾကီး အစား ရိုးရွင္းသည့္ ပံုစံကိုသာ ျပန္လည္ ဖန္တီးခဲ့ပါတယ္။

မူရင္း splash screen မွာ internet connection ကို စစ္ေဆးျခင္း သတင္းမ်ားကို ေဖာ္ျပရန္ ဖန္တီးထားသည္ဟု ယူဆရပါတယ္။ ဒါေၾကာင့္ redesign လုပ္သည့္ အခါမွာ သတင္း အခ်က္အလက္ေတြကို splash screen မွာ မျပပဲ login မွာ ျပဖို႕ စီစဥ္ထားပါတယ္။ Data ေတြ ရရိွဖို႕ server ကေန ဆြဲခ်ဖို႕ လိုပါတယ္။ loading ဆိုတာ သိရေအာင္ activity indicator ထည့္ထားပါတယ္။

Login

Original First Screen
Redesign First Screen (Login Screen)

လက္ရိွ မူရင္းမွာ ပါသည့္ အတိုင္း အကုန္ျပန္ထားပါတယ္။ App ကုိ ဖြင့္ဖြင့္ျခင္း လူတိုင္းဟာ ATM Location ရွာတာနဲ႕ Login ဝင္တာပဲ အဓိကရိွပါတယ္။ ဒါေၾကာင့္ Login ကို တစ္ခါတည္း ဝင္လုိ႕ ရေအာင္ လုပ္ထားပါတယ္။ အကယ္၍ iOS မွာ ဆိုရင္ ေနာက္တစ္ၾကိမ္ Login ဝင္မယ္ဆိုရင္ TouchID နဲ႕ ဝင္လို႕ ရေအာင္ TouchID icon နဲ႕ေပးထားပါတယ္။ အေရးေပၚ ဖုန္းအတြက္ တိုက္ရိုက္ ဖုန္းေခၚႏိုင္ေအာင္ ဖုန္း icon ေလးနဲ႕ ဖုန္းဆက္ခြင့္ေပးထားပါတယ္။

Dashboard

Original Dashboard
Redesign Dashboard

App ကို login ဝင္ျပီးရင္ အသံုးျပဴသူေတြ တကယ္သိခ်င္တာက ပိုက္ဆံ ဘယ္ေလာက္ က်န္ေသးသလဲ ဆိုတာပါပဲ။ အေၾကြးဘယ္ေလာက္ ဆပ္ဖို႕ လိုေသးတယ္။ ဒါေၾကာင့္ စုစုေပါင္း ပိုက္ဆံ ဘယ္ေလာက္ ရိွတယ္။ Account တစ္ခုျခင္းဆီမွာ ဘယ္ေလာက္ရိွသလဲ ဆုိတာကို ေဖာ္ျပထားတယ္။ Deposit ကို အစိမ္းေရာင္နဲ႕ ျပထားျပီးေတာ့ Loan ကို အနီေရာင္နဲ႕ ျပထားပါတယ္။ You Have, You Own အစား Deposit နဲ႕ Loan ဆိုျပီး ေျပာင္းထားတယ္။ ရိွတာကို အစိမ္းေလး ျပထားျပီး ေပးရမွာကို အနီနဲ႕ ျပထားတယ္။ Account တစ္ခုကို ႏိွပ္လိုက္တာနဲ႕ သူ႕သက္ဆိုင္ရာ Account ဆီကို ေရာက္သြားပါလိမ့္မယ္။

ေနာက္တခ်က္က login ျပီးတာနဲ႕ ေငြလႊဲလို႕ရေအာင္ ညာဘက္ အေပၚမွာ transfer အတြက္ icon ေလးထည့္ထားေပးတယ္။ အဲဒါကို ႏိွပ္လိုက္ရင္ transfer လုပ္ဖို႕ အတြက္ေရာက္သြားမွာပါ။

မလိုအပ္သည့္ button ေတြ menu ေတြ ကို အကုန္ရွင္းထုတ္ထားပါတယ္။ Menu ေတြကို side bar အေနနဲ႕ ထည့္ထားပါတယ္။ Tab သံုးမလား Sidebar သံုးမလား စဥ္းစားသည့္ အခါမွာေတာ့ Menu က ၅ ခု ထက္ ေက်ာ္လြန္ေနတာေၾကာင့္ Tab အစား Sidebar ကို စဥ္းစားပါတယ္။ Menu က ၅ ခုသာ ရိွခဲ့ရင္ေတာ့ Tab bar ကို ကၽြန္ေတာ္ အသံုးျပဳဖို႕ မ်ားပါတယ္။

Sidebar

Dashboard မွာပါဝင္တာေတြ ေနာက္ျပီးေတာ့ မူရင္း design မွာ ပါဝင္တာ အခ်ဳိ႕ကို sidebar အေနနဲ႕ ထည့္ထားပါတယ္။ ေနာက္ျပီးေတာ့ profile picture နဲ႕ logout ကို ထိပ္ဆံုးမွာ ထည့္ထားတယ္။ Profile picture က လက္ရိွ profile image ကို ႏိွပ္ျပီးေတာ့ upload တင္လို႕ရပါတယ္။

Account Detail

Original Account Details
Redesign Account Detail

မူရင္း Account Detail မွာ မလိုအပ္သည့္ အရာေတြ မ်ားစြာ ပါဝင္ေနပါတယ္။ ဒါေၾကာင့္ ျဖဳတ္ထားခဲ့တယ္။ Account ဘယ္ေန႕က ဖြင့္တာ။ Customer ID စတာေတြက မလိုအပ္ဘူးလို႕ ယူဆပါတယ္။ Available ႏွင့္ Total Balance ၂ ခုသာ ေဖာ္ျပထားပါေတာ့တယ္။ ေနာက္ျပီးေတာ့ table မွာလည္း လ အလိုက္ ခြဲျပီးေတာ့ ေဖာ္ျပထားသည့္ အတြက္ ရွင္းရွင္းလင္းလင္း ပိုရိွပါတယ္။ ေနာက္ျပီးေတာ့ အခု account ကေန အျခား account တစ္ခုခု လႊဲမယ္ဆိုရင္ အဆင္ေျပေအာင္ ညာဘက္ အေပၚေထာင့္မွာ transfer အတြက္ ထည့္ထားေပးပါတယ္။ Detail ကို ေနာက္တစ္ခ်က္ မႏိွပ္ရပဲ transaction list uို ေဖာ္ျပထားပါတယ္။

Transfer

Original Transfer
Redesign transfer

မူရင္း Transfer အတိုင္းပါပဲ။ ၾကည့္ေကာင္းေအာင္ ျပန္ျပီး ေနရာခ်ထားပါတယ္။ Periodically ကို ခလုပ္ အစား switch ေျပာင္းလိုက္တယ္။ အဲဒါေလး on/off ေပၚမွာ မူတည္ျပီးေတာ့ ေနာက္ screen ျပရင္ date range ေရးခိုင္းလို႕ ရပါတယ္။ မူရင္း အတိုင္းမွာ ခလုပ္ေတြ အရမ္းမ်ားတာဟာ အသံုးျပဳသူကို ရႈပ္ေထြးေစတယ္။ မလိုအပ္သည့္ Cancel ျဖဳတ္လိုက္တယ္။ Back ဟာ ဘယ္ဘက္ အေပၚ navigation မွာ ပါေနသည့္ အတြက္ေၾကာင့္ ျဖဳတ္လိုက္တာပါ။

Transfer Confirm

Redesign Confirm

မူရင္း ပံုစံ ကို ၾကည့္ေကာင္းေအာင္ ျပန္ျပင္ထားပါတယ္။ အကယ္၍ Periodically ကို သာ on ထားခဲ့ရင္ date range ကို အရင္ ေရြးခ်ယ္ဖို႕ screen လိုအပ္ပါတယ္။ အဲဒါျပီးမွသာ confirm screen ကို လာပါလိမ့္မယ္။

History

Redesign History

မူရင္းက Account ထဲမွာ ပါပါတယ္။ သို့ေပမယ့္ မူရင္း account screen ဟာ ရႈပ္ေထြးျပီး မလိုအပ္တာေတြ မ်ားေနတယ္လို႕ ထင္ပါတယ္။ mobile device မွာ excel သုိ႕မဟုတ္ PDF ကို download ခ်မည့္သူ နည္းပါတယ္။ ဒါေၾကာင့္ ျဖဳတ္ထားလိုက္တယ္။ မလိုအပ္ဘူးလို႕ ယူဆ မိတယ္။ Account ကို ေရြးဖို႕ဆိုတာ သိရေအာင္ မွ်ားေလးကို ထည့္ထားေပးပါတယ္။ Date ကိုလည္း ခ်က္ျခင္း range အစား ျဖစ္ႏိုင္သည့္ Today, 1 Week, 1 Month စတာေတြ ကို ေပးထားျပီးေတာ့ ခ်က္ျခင္း data ျပဖို႕ေဖာ္ျပထားပါတယ္။ ဒါမွမဟုတ္လည္း Range နဲ႕ ျပန္ေရြးလို႕ရပါတယ္။

Redesign ပံုမ်ား အားလံုး

သံုးသပ္ခ်က္

လက္ရိွ Mobile Banking App ေတြ ေတာ္ေတာ္မ်ားမ်ားဟာ လက္ရိွ function ကို မထိ ခိုက္ပဲ မေျပာင္းလဲပဲ အခုလိုမ်ဳိး redesign ျပန္လုပ္လို႕ ရပါတယ္။ အခု KBZ redesign မွာ screen အားလံုးကို redesign ျပန္မလုပ္ထားေပမယ့္ အေျခခံ လိုအပ္သည့္ UI component ေတြ ပါဝင္ျပီးျဖစ္တာေၾကာင့္ Screen အကုန္နီးပါးကို လက္ရိွ screens ေတြ ကို မီွျငမ္းျပီး ျပန္ဆြဲႏိုင္ပါတယ္။

--

--

saturngod
COMQUAS

Husband,Father. Just a developer who enjoy coding