Mobile Banking App Wireframe

18/11/19 14:44
Author: Romelson N. Guisando
Version 1.0
01. Screens / MobileBankingApp Wireframe

Splash screen

Interactions

1 on Page Load: goes to 'login screen' 

2 11.18.2019
02. Screens / MobileBankingApp Wireframe

login screen

Interactions

2 on Click: When ((Input_3.value = 'john@mymail.com') and 3 on Tap Hold: goes to 'accounts list' 
(Input_2.value = '123456')) goes to 'accounts screen'  Else
goes to 'Error screen' 

3 11.18.2019
02. Screens / MobileBankingApp Wireframe

Error screen

Interactions

4 on Click: goes to 'login screen' 

4 11.18.2019
02. Screens / MobileBankingApp Wireframe

accounts list

Interactions

12 on Click: goes to 'accounts screen' 

13 on Click: goes to 'accounts screen'  16 on Click: goes to 'card accounts' 

14 on Click: goes to 'accounts screen' 

15 on Click: goes to 'card accounts' 

5 11.18.2019
02. Screens / accounts list

Other states

Interactions

5 on Click: goes to 'transfers screen' 

6 on Click: goes to 'payment screen' 

7 on Click: goes to 'inbox' 

8 on Click: goes to 'settings' 

9 on Click: goes to 'contact info' 

10 on Click: goes to 'branch' 

11 on Click: goes to 'login screen' 

6 11.18.2019
02. Screens / MobileBankingApp Wireframe

accounts screen

Interactions

17 on Click: goes to 'accounts list' 

7 11.18.2019
02. Screens / MobileBankingApp Wireframe

card accounts

Interactions

18 on Click: goes to 'accounts list' 

8 11.18.2019
02. Screens / MobileBankingApp Wireframe

transfers screen

Interactions

26 on Click: goes to 'confirm transfer screen' 

27 on Click: goes to 'pick account transfer from' 

28 on Click: goes to 'pick account transfer' 

9 11.18.2019
02. Screens / transfers screen

Other states

Interactions

19 on Click: goes to 'accounts list' 

20 on Click: goes to 'payment screen' 

21 on Click: goes to 'inbox' 

22 on Click: goes to 'settings' 

23 on Click: goes to 'contact info' 

24 on Click: goes to 'branch' 

25 on Click: goes to 'login screen' 

10 11.18.2019
02. Screens / MobileBankingApp Wireframe

confirm transfer screen

Interactions

29 on Click: goes to 'transfers screen' 

30 on Click: goes to 'transfers screen' 

31 on Click: goes to 'transfers screen' 

11 11.18.2019
02. Screens / confirm transfer screen

Other states

Interactions

32 on Click: goes to 'complete transfer screen' 

12 11.18.2019
02. Screens / MobileBankingApp Wireframe

complete transfer screen

Interactions

40 on Click: goes to 'transfers screen' 

13 11.18.2019
02. Screens / complete transfer screen

Other states

Interactions

33 on Click: goes to 'accounts list' 

34 on Click: goes to 'payment screen' 

35 on Click: goes to 'inbox' 

36 on Click: goes to 'settings' 

37 on Click: goes to 'contact info' 

38 on Click: goes to 'branch' 

39 on Click: goes to 'login screen' 

14 11.18.2019
02. Screens / MobileBankingApp Wireframe

pick account transfer

Interactions

41 on Click: goes to 'transfers screen'  42 on Click: goes to 'transfers screen' 

15 11.18.2019
02. Screens / MobileBankingApp Wireframe

pick account transfer from

Interactions

44 on Click: goes to 'transfers screen'  45 on Click: goes to 'transfers screen' 

16 11.18.2019
02. Screens / MobileBankingApp Wireframe

payment screen

Interactions

53 on Click: goes to 'pick account'  55 on Click: goes to 'pick biller' 

54 on Click: goes to 'pick account'  56 on Click: goes to 'confirm payment' 

17 11.18.2019
02. Screens / payment screen

Other states

Interactions

46 on Click: goes to 'accounts list' 

47 on Click: goes to 'transfers screen' 

48 on Click: goes to 'inbox' 

49 on Click: goes to 'settings' 

50 on Click: goes to 'contact info' 

51 on Click: goes to 'branch' 

52 on Click: goes to 'login screen' 

18 11.18.2019
02. Screens / MobileBankingApp Wireframe

confirm payment

Interactions

57 on Click: goes to 'transfers screen' 

58 on Click: goes to 'payment screen' 

59 on Click: goes to 'payment screen' 

19 11.18.2019
02. Screens / confirm payment

Other states

Interactions

60 on Click: goes to 'payment complete' 

20 11.18.2019
02. Screens / MobileBankingApp Wireframe

pick account

Interactions

61 on Click: goes to 'payment screen'  62 on Click: goes to 'payment screen' 

21 11.18.2019
02. Screens / MobileBankingApp Wireframe

pick biller

Interactions

63 on Click: goes to 'payment screen'  64 on Click: goes to 'payment screen' 

22 11.18.2019
02. Screens / MobileBankingApp Wireframe

payment complete

Interactions

72 on Click: goes to 'payment screen' 

23 11.18.2019
02. Screens / payment complete

Other states

Interactions

65 on Click: goes to 'accounts list' 

66 on Click: goes to 'payment screen' 

67 on Click: goes to 'inbox' 

68 on Click: goes to 'settings' 

69 on Click: goes to 'contact info' 

70 on Click: goes to 'branch' 

71 on Click: goes to 'login screen' 

24 11.18.2019
02. Screens / MobileBankingApp Wireframe

inbox

Interactions

79 on Click: goes to 'message body' 

25 11.18.2019
02. Screens / inbox

Other states

Interactions

73 on Click: goes to 'accounts list' 

74 on Click: goes to 'payment screen' 

75 on Click: goes to 'settings' 

76 on Click: goes to 'contact info' 

77 on Click: goes to 'branch' 

78 on Click: goes to 'login screen' 

26 11.18.2019
02. Screens / MobileBankingApp Wireframe

message body

Interactions

80 on Click: goes to 'inbox' 

27 11.18.2019
02. Screens / MobileBankingApp Wireframe

settings

Interactions

87 on Click: goes to 'update number' 

28 11.18.2019
02. Screens / settings

Other states

Interactions

81 on Click: goes to 'transfers screen' 

82 on Click: goes to 'payment screen' 

83 on Click: goes to 'inbox' 

84 on Click: goes to 'contact info' 

85 on Click: goes to 'branch' 

86 on Click: goes to 'login screen' 

29 11.18.2019
02. Screens / MobileBankingApp Wireframe

update number

Interactions

88 on Click: goes to 'settings' 

30 11.18.2019
02. Screens / MobileBankingApp Wireframe

contact info

31 11.18.2019
02. Screens / contact info

Other states

Interactions

89 on Click: goes to 'transfers screen' 

90 on Click: goes to 'payment screen' 

91 on Click: goes to 'inbox' 

92 on Click: goes to 'settings' 

93 on Click: goes to 'branch' 

94 on Click: goes to 'login screen' 

32 11.18.2019
02. Screens / MobileBankingApp Wireframe

branch

33 11.18.2019
02. Screens / branch

Other states

Interactions

95 on Click: goes to 'accounts list' 

96 on Click: goes to 'transfers screen' 

97 on Click: goes to 'payment screen' 

98 on Click: goes to 'inbox' 

99 on Click: goes to 'contact info' 

on Click: goes to 'login screen' 

34 11.18.2019