Banking

User Interface Design

27 November 2007 11:27:14

Copyright 2007 Caretta Software Ltd All rights reserved

Banking.pdf

Project: Banking

Contents
1. START HERE 2. BalanceInfo 2.1. BalanceInfo 2.2. "Balances" Web Panel 3. Footer 4. Header 4.1. Header 5. LeftMenu 5.1. LeftMenu 6. _BLANK 7. DirectDebits 7.1. DirectDebitsStart (Design) 7.2. DirectDebitsView (Design) 8. LoggedOut 8.1. LoggedOut 9. LogIn 9.1. LogIn 9.2. Error Message 10. LogOut 10.1. LogOut 11. MoveMoney 11.1. MoveMoney 12. OtherServices 13. Payees 13.1. PayeesStart (Design) 13.2. PayeesView (Design) 13.3. PayeesView_Pending (Design) 13.4. PayeesAmend (Design) 13.5. PayeesAmend_Pending (Design) 13.6. PayeesConfirm_Pending (Design) 13.7. PayeesConfirm (Design) 13.8. PayeesAmended (Design) 13.9. PayeesCancelled (Design) 14. Payments 14.1. PaymentsStart (Design) 14.2. PaymentsConfirm (Design) 14.3. PaymentsProcessing (Design) 15. Pending 15.1. PendingStart (Design) 15.2. PayeesView_Pending (Design) 15.3. PayeesAmend_Pending (Design) 15.4. PayeesConfirm_Pending (Design) 15.5. PayeesAmended (Design) 15.6. PayeesCancelled (Design) 16. StandingOrders 16.1. StandingOrdersStart (Design) 16.2. StandingOrdersView (Design) 5 6 6 7 8 9 9 11 12 14 15 16 17 18 19 20 21 22 23 24 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

Page 2 of 103

Banking.pdf 17. Statement 17.1. Statement 17.2. Account Options 17.3. StatementAdvanced (Design) 18. Summary 18.1. Summary 19. DirectDebitsStart 19.1. DirectDebitsStart 20. DirectDebitsView 21. MoveMoneyProcessed 21.1. MoveMoneyProcessed 22. PayeesAmend 22.1. PayeesAmend 23. PayeesAmend_Pending 23.1. PayeesAmend_Pending 23.2. Day Of Month Options 23.3. Month Options 23.4. Year Options 24. PayeesAmended 25. PayeesCancelled 26. PayeesConfirm 27. PayeesConfirm_Pending 28. PayeesStart 28.1. PayeesStart 29. PayeesView 30. PayeesView_Pending 31. PaymentsConfirm 31.1. PaymentsConfirm 32. PaymentsProcessing 33. PaymentsStart 33.1. PaymentsStart 33.2. Day Of Month Options 33.3. Month Options 33.4. Year Options 33.5. Payee Options 33.6. Payment Account Options 34. PendingStart 34.1. PendingStart 35. StandingOrdersStart 36. StandingOrdersView 37. StatementAdvanced 37.1. StatementAdvanced 37.2. Month / Year Options 37.3. Statement Number Options 37.4. Day Of Month Options 37.5. Month Options 37.6. Year Options 38. StatementNormal 38.1. StatementNormal 38.2. Month / Year Options

Project: Banking 53 55 56 57 58 59 60 61 62 63 64 65 66 67 68 70 70 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 85 85 85 86 87 88 89 90 93 95 95 95 96 96 97 98 99

Page 3 of 103

Banking.pdf 39. StatementResults 39.1. StatementResults 40. Table 40.1. Table 40.2. Table 40.3. "Form Title" Rectangular Text Shape

Project: Banking 100 101 103 103 103 103

Page 4 of 103

Banking.pdf

Project: Banking

1. START HERE
Design File Last Modified Uses START HERE.gui 29 October 2007 13:12:19 Pages\LogIn.gui

Page 5 of 103

Banking.pdf

Project: Banking

2. BalanceInfo
Design File Last Modified Used By Masters\BalanceInfo.gui 23 November 2007 15:12:47 Pages\Statement.gui Pages\DirectDebits\DirectDebitsStart.gui Pages\DirectDebits\DirectDebitsView.gui Pages\Payees\PayeesAmend.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesConfirm.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesStart.gui Pages\Payees\PayeesView.gui Pages\Payees\PayeesView_Pending.gui Pages\Payments\PaymentsConfirm.gui Pages\StandingOrders\StandingOrdersStart.gui Pages\StandingOrders\StandingOrdersView.gui

Description
A common pop-up window that appears on many pages when the user hovers over the information icon. This one provides a note about displayed balances.

2.1. BalanceInfo
Actions
From BalanceInfo ID Condition Mouse Over Action Toggle Window Target "Balances" Web Panel

Page 6 of 103

Banking.pdf

Project: Banking

2.2. "Balances" Web Panel

Actions
From Close Button ID Condition Click Action Close Target

Page 7 of 103

Banking.pdf

Project: Banking

3. Footer
Design File Last Modified Used By Masters\Footer.gui 20 November 2007 10:02:52 Pages\_BLANK.gui Pages\LoggedOut.gui Pages\LogIn.gui Pages\LogOut.gui Pages\MoveMoney.gui Pages\OtherServices.gui Pages\Statement.gui Pages\Summary.gui Pages\DirectDebits\DirectDebitsStart.gui Pages\DirectDebits\DirectDebitsView.gui Pages\MoveMoney\MoveMoneyProcessed.gui Pages\Payees\PayeesAmend.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesAmended.gui Pages\Payees\PayeesCancelled.gui Pages\Payees\PayeesConfirm.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesStart.gui Pages\Payees\PayeesView.gui Pages\Payees\PayeesView_Pending.gui Pages\Payments\PaymentsConfirm.gui Pages\Payments\PaymentsProcessing.gui Pages\Payments\PaymentsStart.gui Pages\Pending\PendingStart.gui Pages\StandingOrders\StandingOrdersStart.gui Pages\StandingOrders\StandingOrdersView.gui

Page 8 of 103

Banking.pdf

Project: Banking

4. Header
Design File Last Modified Uses Used By Masters\Header.gui 19 November 2007 21:44:03 Pages\LogOut.gui Pages\_BLANK.gui Pages\LoggedOut.gui Pages\LogIn.gui Pages\LogOut.gui Pages\MoveMoney.gui Pages\OtherServices.gui Pages\Statement.gui Pages\Summary.gui Pages\DirectDebits\DirectDebitsStart.gui Pages\DirectDebits\DirectDebitsView.gui Pages\MoveMoney\MoveMoneyProcessed.gui Pages\Payees\PayeesAmend.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesAmended.gui Pages\Payees\PayeesCancelled.gui Pages\Payees\PayeesConfirm.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesStart.gui Pages\Payees\PayeesView.gui Pages\Payees\PayeesView_Pending.gui Pages\Payments\PaymentsConfirm.gui Pages\Payments\PaymentsProcessing.gui Pages\Payments\PaymentsStart.gui Pages\Pending\PendingStart.gui Pages\StandingOrders\StandingOrdersStart.gui Pages\StandingOrders\StandingOrdersView.gui

4.1. Header

Page 9 of 103

Banking.pdf

Project: Banking

Actions
From Text Link List : "Log Out" ID Condition Click Action Replace Top Window Target LogOut (Design)

Page 10 of 103

Banking.pdf

Project: Banking

5. LeftMenu
Design File Last Modified Uses Masters\LeftMenu.gui 23 November 2007 20:55:28 Pages\Summary.gui Pages\Statement.gui Pages\Payments.gui Pages\Payees.gui Pages\StandingOrders.gui Pages\DirectDebits.gui Pages\Pending.gui Pages\MoveMoney.gui Pages\OtherServices.gui Pages\_BLANK.gui Pages\LogOut.gui Pages\MoveMoney.gui Pages\OtherServices.gui Pages\Statement.gui Pages\Summary.gui Pages\DirectDebits\DirectDebitsStart.gui Pages\DirectDebits\DirectDebitsView.gui Pages\MoveMoney\MoveMoneyProcessed.gui Pages\Payees\PayeesAmend.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesAmended.gui Pages\Payees\PayeesCancelled.gui Pages\Payees\PayeesConfirm.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesStart.gui Pages\Payees\PayeesView.gui Pages\Payees\PayeesView_Pending.gui Pages\Payments\PaymentsConfirm.gui Pages\Payments\PaymentsProcessing.gui Pages\Payments\PaymentsStart.gui Pages\Pending\PendingStart.gui Pages\StandingOrders\StandingOrdersStart.gui Pages\StandingOrders\StandingOrdersView.gui

Used By

Page 11 of 103

Banking.pdf

Project: Banking

5.1. LeftMenu

Actions
From "Your Summary" Link "Your Statement" Link "Payments / Transfer" Link ID Condition Click Click Click Action Replace Top Window Replace Top Window Replace Top Window Target Summary (Design) Statement (Design) Payments (Design)

Page 12 of 103

Banking.pdf
"Your Payees" Link "Standing Orders" Link "Direct Debits" Link "Pending Payments" Link "Move Money" Link "Other Services" Link Click Click Click Click Click Click Replace Top Window Replace Top Window Replace Top Window Replace Top Window Replace Top Window Replace Top Window

Project: Banking
Payees (Design) StandingOrders (Design) DirectDebits (Design) Pending (Design) MoveMoney (Design) OtherServices (Design)

Page 13 of 103

Banking.pdf

Project: Banking

6. _BLANK
Design File Last Modified Uses Pages\_BLANK.gui 31 October 2007 20:15:17 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui

Page 14 of 103

Banking.pdf

Project: Banking

7. DirectDebits
Design File Last Modified Uses Used By Pages\DirectDebits.gui 23 November 2007 15:01:30 Pages\DirectDebits\DirectDebitsStart.gui Pages\DirectDebits\DirectDebitsView.gui Masters\LeftMenu.gui Pages\Payees\PayeesStart.gui Pages\Pending\PendingStart.gui

Description
This shows the basic flow control for Direct Debit management. Selecting a specific Direct Debit within the table takes the user to the details page for that Direct Debit. From there, they can delete it. Note: The flow for deleting Direct Debits has not yet been done.

Page 15 of 103

Banking.pdf

Project: Banking

7.1. DirectDebitsStart (Design)

Actions
From DirectDebitsStart (Design) : "Insurace Company" Text ID Condition Click Action Replace Top Window Target DirectDebitsView (Design)

Page 16 of 103

Banking.pdf

Project: Banking

7.2. DirectDebitsView (Design)

Actions
From DirectDebitsView (Design) : "Previous" Web Button ID Condition Click Action Navigate Back Target

Page 17 of 103

Banking.pdf

Project: Banking

8. LoggedOut
Design File Last Modified Uses Pages\LoggedOut.gui 23 November 2007 15:02:39 Masters\Header.gui Masters\Footer.gui Pages\LogIn.gui Pages\LogOut.gui

Used By

Description
At this point, the user is logged out and may either log back in or take advantage of the service offers being promoted.

Page 18 of 103

Banking.pdf

Project: Banking

8.1. LoggedOut

Elements
# ID 1 Name Log In Image Description This replaces the "Log Out" link that appears on all other pages.

Actions
From Log In ID Condition Click Action Replace Top Window Target LogIn (Design)

Page 19 of 103

Banking.pdf

Project: Banking

9. LogIn
Design File Last Modified Uses Pages\LogIn.gui 23 November 2007 21:19:58 Masters\Header.gui Masters\Footer.gui Pages\Summary.gui START HERE.gui Pages\LoggedOut.gui

Used By

Description
This is the Home page for Internet Banking where the customer logs into their online account.

Page 20 of 103

Banking.pdf

Project: Banking

9.1. LogIn

Elements
# ID Name Image Description Clears all security entry boxes and any error message so that the user can start from scratch. Submits the login information for validation. A random security question is presented from the following:

1 BTN-LOGIN- "Clear" Web CLR Button 2 BTN-LOGIN- "Submit" Web SBMT Button 3 TXT-SQ Security Question

Place Of Birth Mothers Maiden Name User defined "Memorable Question" User defined "Memorable Answer"

4 EDT-SA

Security Answer

The user must enter the correct answer to the security question presented.

Actions
From "Clear" Web ID Condition Action Hide Window Target Error Message

BTN-LOGIN-CLR Click

Page 21 of 103

Banking.pdf
Button "Submit" Web Button BTN-LOGINSBMT Click AND Correct Details Hide Window Replace Top Window Click AND Show Window Incorrect Password or Security Answer

Project: Banking

Error Message Summary (Design) Error Message

9.2. Error Message

Page 22 of 103

Banking.pdf

Project: Banking

10. LogOut
Design File Last Modified Uses Pages\LogOut.gui 20 November 2007 18:30:39 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\LoggedOut.gui Masters\Header.gui

Used By

Description
Log Out links on all other pages arrive at this page. It's purpose is to: 1. 2. 3. Allow the user to confirm the log-out in case they clicked the link accidentally. Remind them of their activity during the log-in session and allow them to verify any transactions or correct mistakes. Subtly present the user with special offers before they log out so that they don't have to log back in again if they want to take up an offer.

Page 23 of 103

Banking.pdf

Project: Banking

NOTE: If a session timeout occurs then the user will be logged out without seeing this page.

10.1. LogOut

Elements
# ID 1 BTNLOGOUT#1 2 TBLACTIVITY Name Log Out Confirmation Activity Summary Table Image Description Confirms log out and performs the log out operation. This shows all of the logged activity during the current log-in session. It should include all account views, payment or transfer transactions and any changes to the account.

Actions
From Log Out ID Condition Action Replace Top Target LoggedOut

Page 24 of 103

Banking.pdf
Confirmation "Log Out" Web Button "Previous" Web Button BTN-LOGOUT#1 Click BTN-LOGOUT#2 Click Click Window Replace Top Window Navigate Back

Project: Banking
(Design) LoggedOut (Design)

Page 25 of 103

Banking.pdf

Project: Banking

11. MoveMoney
Design File Last Modified Uses Pages\MoveMoney.gui 23 November 2007 20:56:45 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\MoveMoney\MoveMoneyProcessed.gui Masters\LeftMenu.gui

Used By

Description
This page provides a quick and easy way for customers to move funds between their accounts. Such transfers occur immediately after submission.

Page 26 of 103

Banking.pdf

Project: Banking

11.1. MoveMoney

Elements
# ID Name Image Description Decimal point entry is optional when the pennies are zero. The following are all valid entries:

1 EDT-MOVE- Move Money AMT Amount

48.62 56.00 56 56. 56.0 63.70 63.7

Actions
From "Submit" Web Button ID Condition Click Action Replace Top Window Target MoveMoneyProce ssed (Design)

Page 27 of 103

Banking.pdf

Project: Banking

12. OtherServices
Design File Last Modified Uses Pages\OtherServices.gui 23 November 2007 18:55:24 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\LeftMenu.gui

Used By

Description
This page contains links to services that are used infrequently by the customer and therefore don't need to be on the main navigation menu.

Page 28 of 103

Banking.pdf

Project: Banking

13. Payees
Design File Last Modified Uses Pages\Payees.gui 23 November 2007 18:56:58 Pages\Payees\PayeesStart.gui Pages\Payees\PayeesView.gui Pages\Payees\PayeesView_Pending.gui Pages\Payees\PayeesAmend.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesConfirm.gui Pages\Payees\PayeesAmended.gui Pages\Payees\PayeesCancelled.gui Masters\LeftMenu.gui Pages\Pending.gui

Used By

Page 29 of 103

Banking.pdf

Project: Banking

Description
This shows the flow for basic Payee management. Note: Not all flows have been defined yet.

13.1. PayeesStart (Design)

Actions
From PayeesStart (Design) : "Gas Company" Text PayeesStart (Design) : "Some Person" Text ID Condition Click Action Replace Top Window Replace Top Window Target PayeesView_Pendi ng (Design) PayeesView (Design)

Click

Page 30 of 103

Banking.pdf

Project: Banking

13.2. PayeesView (Design)

Actions
From PayeesView (Design) : "Amend" Web Button PayeesView (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend (Design)

Click

Replace Top Window

PayeesStart (Design)

Page 31 of 103

Banking.pdf

Project: Banking

13.3. PayeesView_Pending (Design)

Actions
From PayeesView_Pendi ng (Design) : "Amend" Web Button PayeesView_Pendi ng (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend_Pen ding (Design)

Click

Replace Top Window

PayeesStart (Design)

Page 32 of 103

Banking.pdf

Project: Banking

13.4. PayeesAmend (Design)

Actions
From PayeesAmend (Design) : "Next" Web Button PayeesAmend (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Replace Top Window Target PayeesConfirm (Design) PayeesView (Design)

Click

Page 33 of 103

Banking.pdf

Project: Banking

13.5. PayeesAmend_Pending (Design)

Actions
From PayeesAmend_Pen ding (Design) : "Next" Web Button PayeesAmend_Pen ding (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PayeesConfirm_Pe nding (Design)

Click

Replace Top Window

PayeesView_Pendi ng (Design)

Page 34 of 103

Banking.pdf

Project: Banking

13.6. PayeesConfirm_Pending (Design)

Actions
From PayeesConfirm_Pe nding (Design) : "Previous" Web Button PayeesConfirm_Pe nding (Design) : "Submit" Web Button PayeesConfirm_Pe nding (Design) : "Cancel" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend_Pen ding (Design)

Click

Replace Top Window

PayeesAmended (Design)

Click

Replace Top Window

PayeesCancelled (Design)

Page 35 of 103

Banking.pdf

Project: Banking

13.7. PayeesConfirm (Design)

Actions
From PayeesConfirm (Design) : "Previous" Web Button PayeesConfirm (Design) : "Cancel" Web Button PayeesConfirm (Design) : "Submit" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend (Design)

Click

Replace Top Window

PayeesCancelled (Design)

Click

Replace Top Window

PayeesAmended (Design)

Page 36 of 103

Banking.pdf

Project: Banking

13.8. PayeesAmended (Design)

Actions
From PayeesAmended (Design) : "Your Payees" Web Button ID Condition Click Action Replace Top Window Target PayeesStart (Design)

Page 37 of 103

Banking.pdf

Project: Banking

13.9. PayeesCancelled (Design)

Actions
From PayeesCancelled (Design) : "Your Payees" Web Button ID Condition Click Action Replace Top Window Target PayeesStart (Design)

Page 38 of 103

Banking.pdf

Project: Banking

14. Payments
Design File Last Modified Uses Pages\Payments.gui 23 November 2007 18:57:49 Pages\Payments\PaymentsStart.gui Pages\Payments\PaymentsConfirm.gui Pages\Payments\PaymentsProcessing.gui Pages\Summary.gui Masters\LeftMenu.gui Pages\Pending\PendingStart.gui

Used By

Description
This shows the basic flow for setting up Payments. Note: Not all flows have been defined yet.

Page 39 of 103

Banking.pdf

Project: Banking

14.1. PaymentsStart (Design)

Actions
From PaymentsStart (Design) : "Next" Web Button ID Condition Click Action Replace Top Window Target PaymentsConfirm (Design)

Page 40 of 103

Banking.pdf

Project: Banking

14.2. PaymentsConfirm (Design)

Actions
From PaymentsConfirm (Design) : "Submit" Web Button PaymentsConfirm (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PaymentsProcessin g (Design)

Click

Replace Top Window

PaymentsStart (Design)

Page 41 of 103

Banking.pdf

Project: Banking

14.3. PaymentsProcessing (Design)

Actions
From PaymentsProcessin g (Design) : "Account Summary" Web Button PaymentsProcessin g (Design) : "Make Another Payment" Web Button ID Condition Click Action Replace Top Window Target Summary (Design)

Click

Replace Top Window

PaymentsStart (Design)

Page 42 of 103

Banking.pdf

Project: Banking

15. Pending
Design File Last Modified Uses Pages\Pending.gui 23 November 2007 19:00:24 Pages\Pending\PendingStart.gui Pages\Payees\PayeesView_Pending.gui Pages\Payees\PayeesAmend_Pending.gui Pages\Payees\PayeesConfirm_Pending.gui Pages\Payees\PayeesAmended.gui Pages\Payees\PayeesCancelled.gui Pages\Payees.gui Masters\LeftMenu.gui Pages\Summary.gui

Used By

Description
This shows the basic flow for managing Pending Payments.

Page 43 of 103

Banking.pdf

Project: Banking

15.1. PendingStart (Design)

Actions
From PendingStart (Design) : "Gas Company GC-1234567" Text ID Condition Click Action Replace Top Window Target PayeesView_Pendi ng (Design)

Page 44 of 103

Banking.pdf

Project: Banking

15.2. PayeesView_Pending (Design)

Actions
From PayeesView_Pendi ng (Design) : "Amend" Web Button PayeesView_Pendi ng (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend_Pen ding (Design)

Click

Replace Top Window

PendingStart (Design)

Page 45 of 103

Banking.pdf

Project: Banking

15.3. PayeesAmend_Pending (Design)

Actions
From PayeesAmend_Pen ding (Design) : "Next" Web Button PayeesAmend_Pen ding (Design) : "Previous" Web Button ID Condition Click Action Replace Top Window Target PayeesConfirm_Pe nding (Design)

Click

Replace Top Window

PayeesView_Pendi ng (Design)

Page 46 of 103

Banking.pdf

Project: Banking

15.4. PayeesConfirm_Pending (Design)

Actions
From PayeesConfirm_Pe nding (Design) : "Previous" Web Button PayeesConfirm_Pe nding (Design) : "Submit" Web Button PayeesConfirm_Pe nding (Design) : "Cancel" Web Button ID Condition Click Action Replace Top Window Target PayeesAmend_Pen ding (Design)

Click

Replace Top Window

PayeesAmended (Design)

Click

Replace Top Window

PayeesCancelled (Design)

Page 47 of 103

Banking.pdf

Project: Banking

15.5. PayeesAmended (Design)

Actions
From PayeesAmended (Design) : "Your Payees" Web Button ID Condition Click Action Replace Top Window Target Payees (Design)

Page 48 of 103

Banking.pdf

Project: Banking

15.6. PayeesCancelled (Design)

Actions
From PayeesCancelled (Design) : "Your Payees" Web Button ID Condition Click Action Replace Top Window Target Payees (Design)

Page 49 of 103

Banking.pdf

Project: Banking

16. StandingOrders
Design File Last Modified Uses Used By Pages\StandingOrders.gui 23 November 2007 15:01:30 Pages\StandingOrders\StandingOrdersStart.gui Pages\StandingOrders\StandingOrdersView.gui Masters\LeftMenu.gui Pages\Payees\PayeesStart.gui Pages\Pending\PendingStart.gui

Description
This shows the basic flow control for Standing Order management. Selecting a specific Standing Order within the table takes the user to the details page for that Standing Order. From there, they can delete or amend it. Note: The flows for creating, amending and deleting Standing Orders have not yet been done.

Page 50 of 103

Banking.pdf

Project: Banking

16.1. StandingOrdersStart (Design)

Actions
From StandingOrdersSta rt (Design) : "Friends Of The Earth" Text ID Condition Click Action Replace Top Window Target StandingOrdersVi ew (Design)

Page 51 of 103

Banking.pdf

Project: Banking

16.2. StandingOrdersView (Design)

Actions
From StandingOrdersVi ew (Design) : "Previous" Web Button ID Condition Click Action Navigate Back Target

Page 52 of 103

Banking.pdf

Project: Banking

17. Statement
Design File Last Modified Uses Pages\Statement.gui 23 November 2007 21:04:23 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Statement\StatementNormal.gui Pages\Statement\StatementAdvanced.gui Masters\BalanceInfo.gui Masters\LeftMenu.gui Pages\Summary.gui

Used By

Description
By default, this page shows a statement including the most recent transactions of the last 30 days.

Page 53 of 103

Banking.pdf

Project: Banking

Options allow the date range to be changed so that the customer can examine the entire history of their account.

Page 54 of 103

Banking.pdf

Project: Banking

17.1. Statement

Page 55 of 103

Banking.pdf

Project: Banking

Elements
# ID 1 CMBACCOUNT Name Account Choice Image Description Allows the user to select a different account to show a transactions statement for. Different accounts may have been set up at different times so the available date ranges may differ between them. 2 Account Summary Displays summary information about the chosen account.

Actions
From Account Choice StatementNormal (Design) : "Show Advanced Options" Text ID Condition Action Modal Choice Popup Show Window Target Account Options StatementAdvance d (Design)

CMB-ACCOUNT Click Click

17.2. Account Options

Description
Contains a list of all the user's accounts for which a statement can be provided.

Page 56 of 103

Banking.pdf

Project: Banking

17.3. StatementAdvanced (Design)

Actions
From StatementAdvance d (Design) : "Hide Advanced Options" Text ID Condition Click Action Close Target

Page 57 of 103

Banking.pdf

Project: Banking

18. Summary
Design File Last Modified Uses Pages\Summary.gui 23 November 2007 15:11:15 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Statement.gui Pages\Pending.gui Masters\LeftMenu.gui Pages\LogIn.gui Pages\Payments.gui Pages\MoveMoney\MoveMoneyProcessed.gui

Used By

Description
This page is shown as soon as the user logs in, giving them a summary of their account balances and net worth. Selecting an account from the table displays the latest Statement of activity for that account.

Page 58 of 103

Banking.pdf

Project: Banking

18.1. Summary

Elements
# ID 1 TBLACCOUNTS Name Accounts Table Image Description This contains all of the user's accounts including their current balance and any Overdraft facilities set up on them. Shows a summary of the net worth of all the accounts and Overdraft facilities.

2 TBLAccount ACCOUNTS- Totals TTLS

Actions
From "Current Account" Text "Pending Payments" Text ID Condition Click Click Action Replace Top Window Replace Top Window Target Statement (Design) Pending (Design)

Page 59 of 103

Banking.pdf

Project: Banking

19. DirectDebitsStart
Design File Last Modified Uses Pages\DirectDebits\DirectDebitsStart.gui 23 November 2007 16:11:58 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\DirectDebits.gui

Used By

Description
The starting page for Direct Debit management. Lists all of the Direct Debits set up on the account. Customers can only have Direct Debits set up against a Current Account and may only have one Current Account. Therefore, there is no account choice box on this page.

Page 60 of 103

Banking.pdf

Project: Banking

19.1. DirectDebitsStart

Elements
# ID 1 TBL-DD Name Direct Debits Table Image Description Lists all Direct Debits set up on the account with the last payment amount and date for each. If no payment has yet been made on a particular Direct Debit then "-" is displayed for the amount and date.

Page 61 of 103

Banking.pdf

Project: Banking

20. DirectDebitsView
Design File Last Modified Uses Pages\DirectDebits\DirectDebitsView.gui 23 November 2007 14:56:05 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\DirectDebits.gui

Used By

Description
The details view for a selected Direct Debit. The user may delete the Direct Debit from this page.

Page 62 of 103

Banking.pdf

Project: Banking

21. MoveMoneyProcessed
Design File Last Modified Uses Pages\MoveMoney\MoveMoneyProcessed.gui 23 November 2007 15:13:52 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Summary.gui Pages\MoveMoney.gui

Used By

Description
Displayed when money has successfully been transferred between user's accounts.

Page 63 of 103

Banking.pdf

Project: Banking

21.1. MoveMoneyProcessed

Actions
From "Account Summary" Web Button ID Condition Click Action Replace Top Window Target Summary (Design)

Page 64 of 103

Banking.pdf

Project: Banking

22. PayeesAmend
Design File Last Modified Uses Pages\Payees\PayeesAmend.gui 23 November 2007 16:04:45 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui

Used By

Description
This page allows the customer to amend the details of a Payee that they have previously set up for bill payments (or other payments). In this case, there are no pending payments for this Payee.

Page 65 of 103

Banking.pdf

Project: Banking

22.1. PayeesAmend

Elements
# ID 1 EDT-PAYEE Name Payee Name Image Description The name of the Payee. This will appear on future statements for payments to this Payee and should match the name on the target bank account as closely as possible. MANDATORY FIELD MUST NOT BE BLANK 2 EDTCUSTREF Customer Reference When paying a bill, the Customer Reference should be the user's account number with that Payee. When paying individuals, a meaningful reference should still be provided since this appears on Statements. MANDATORY FIELD - Questionable! MUST NOT BE BLANK - Questionable!

Page 66 of 103

Banking.pdf

Project: Banking

23. PayeesAmend_Pending
Design File Last Modified Uses Pages\Payees\PayeesAmend_Pending.gui 23 November 2007 21:06:24 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui Pages\Pending.gui

Used By

Description
This page allows the customer to amend the details of a Payee that they have previously set up for bill payments (or other payments). In this case, there is a pending payment for this Payee and this may also be changed. Validation on all inputs occurs when the user hits "Next". TO BE RESOLVED What should the user interface do if the amendment date restrictions are not met (as in the example

Page 67 of 103

Banking.pdf
case shown)?

Project: Banking

Annotations
5. Payment Type Option If a "Regular" payment is set up then this acts like a Standing Order. Since a payment will always be pending, no further payments may be set up for this Payee until this one is cancelled or changed to a "One Off" payment and paid.

23.1. PayeesAmend_Pending

Elements
# ID 1 EDT-PAYEE Name Payee Name Image Description The name of the Payee. This will appear on future statements for payments to this Payee and should match the name on the target

Page 68 of 103

Banking.pdf

Project: Banking
bank account as closely as possible. MANDATORY FIELD MUST NOT BE BLANK

2 EDTCUSTREF

Customer Reference

When paying a bill, the Customer Reference should be the user's account number with that Payee. When paying individuals, a meaningful reference should still be provided since this appears on Statements. MANDATORY FIELD - Questionable! MUST NOT BE BLANK - Questionable!

3 EDTPAYMENT

Payment Amount

Decimal point entry is optional when the pennies are zero. The following are all valid entries:

48.62 56.00 56 56. 56.0 63.70 63.7

4 BTNPAYSTOP 5 RGOPAYTYPE

"Stop Payment" Web Button Payment Type Option

Requests to stop the pending payment and cancel any future payments if this is a "Regular" payment. If a "Regular" payment is set up then this acts like a Standing Order. Since a payment will always be pending, no further payments may be set up for this Payee until this one is cancelled or changed to a "One Off" payment and paid.

Actions
From Payment Day Of Month Choice Payment Month Choice Payment Year Choice ID CMB-PAY-DAY CMB-PAYMONTH Condition Click Click Action Modal Choice Popup Modal Choice Popup Modal Choice Popup Target Day Of Month Options Month Options Year Options

CMB-PAY-YEAR Click

Page 69 of 103

Banking.pdf

Project: Banking

23.2. Day Of Month Options

Description
This must only includes days that are appropriate for the chosen month and year. If the user changes the month and the currently selected day becomes out of range (e.g. "31 October" changed to "February") then the highest day of the month should be chosen instead. Alternatives To Consider Always include 1 - 31 and provide validation when the "Next" button is clicked since there must be some validation on Payment Date being today or in the future.

23.3. Month Options

23.4. Year Options

Description
Must only contain the current year and future years up to the allowed limit of advance payment (3 years in this example).

Page 70 of 103

Banking.pdf

Project: Banking

24. PayeesAmended
Design File Last Modified Uses Pages\Payees\PayeesAmended.gui 23 November 2007 16:03:31 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Payees.gui Pages\Pending.gui

Used By

Description
Displayed when Payee details have been successfully amended.

Page 71 of 103

Banking.pdf

Project: Banking

25. PayeesCancelled
Design File Last Modified Uses Pages\Payees\PayeesCancelled.gui 23 November 2007 16:04:34 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Payees.gui Pages\Pending.gui

Used By

Description
Displayed when amendment of Payee details was cancelled by the user. This confirms that no changes were made.

Page 72 of 103

Banking.pdf

Project: Banking

26. PayeesConfirm
Design File Last Modified Uses Pages\Payees\PayeesConfirm.gui 23 November 2007 16:06:52 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui

Used By

Description
Displayed when valid amendments of Payee details have been entered. The user must confirm that the changes are correct before they are applied.

Page 73 of 103

Banking.pdf

Project: Banking

27. PayeesConfirm_Pending
Design File Last Modified Uses Pages\Payees\PayeesConfirm_Pending.gui 23 November 2007 16:07:59 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui Pages\Pending.gui

Used By

Description
Displayed when valid amendments of Payee details have been entered. The user must confirm that the changes are correct before they are applied. In this case, a pending payment has also been amended (or just the Payee details on a pending payment).

Page 74 of 103

Banking.pdf

Project: Banking

28. PayeesStart
Design File Last Modified Uses Pages\Payees\PayeesStart.gui 23 November 2007 16:46:23 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\StandingOrders.gui Pages\DirectDebits.gui Masters\BalanceInfo.gui Pages\Payees.gui

Used By

Description
The starting page for Payees management. Lists all of the Payees set up on the account. Although bill payments can be made from many different accounts, they are usually paid from a Current account. Therefore, the Current Account balance is shown on this page.

Page 75 of 103

Banking.pdf

Project: Banking

28.1. PayeesStart

Elements
# ID Name Image Description Lists all Payees set up on the account with the customer reference and the amount and date of any pending payments. If there is no pending payment for a particular Payee then "-" is displayed for the amount and date. NOTE: There can be only one pending payment at a time for each Payee.

1 TBL-PAYEES Payees Table

Actions
From "Standing Orders" Text "Direct Debits" Text ID Condition Click Click Action Replace Top Window Replace Top Window Target StandingOrders (Design) DirectDebits (Design)

Page 76 of 103

Banking.pdf

Project: Banking

29. PayeesView
Design File Last Modified Uses Pages\Payees\PayeesView.gui 23 November 2007 16:17:14 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui

Used By

Description
The details view for a selected Payee. The user may choose to amend or delete the Payee details from this page.

Page 77 of 103

Banking.pdf

Project: Banking

30. PayeesView_Pending
Design File Last Modified Uses Pages\Payees\PayeesView_Pending.gui 23 November 2007 16:17:15 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payees.gui Pages\Pending.gui

Used By

Description
The details view for a selected Payee. The user may choose to amend or delete the Payee details from this page. This version shows the case when there is a pending payment for the selected Payee.

Page 78 of 103

Banking.pdf

Project: Banking

31. PaymentsConfirm
Design File Last Modified Uses Pages\Payments\PaymentsConfirm.gui 23 November 2007 16:51:54 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\Payments.gui

Used By

Description
Displays the details of a new or amended payment so that the user can check the details and confirm the payment.

Page 79 of 103

Banking.pdf

Project: Banking

31.1. PaymentsConfirm

Elements
# ID Name Image Description Submits the payment instruction for processing. If the payment date is sufficiently into the future then the customer may be able to amend or cancel the payment later.

1 BTN"Submit" Web PAYSUBMIT Button

Page 80 of 103

Banking.pdf

Project: Banking

32. PaymentsProcessing
Design File Last Modified Uses Pages\Payments\PaymentsProcessing.gui 23 November 2007 16:51:54 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Payments.gui

Used By

Description
Displayed once the user has confirmed a new payment.

Page 81 of 103

Banking.pdf

Project: Banking

33. PaymentsStart
Design File Last Modified Uses Pages\Payments\PaymentsStart.gui 23 November 2007 21:10:02 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Payments.gui

Used By

Description
The starting page for setting up a new bill payment to a Payee that has already been set up.

Annotations
3. Payment Type Option If a "Regular" payment is set up then this acts like a Standing Order. Since a payment will always be pending, no further payments may be set up for this Payee until this one is cancelled or changed to a "One Off" payment and paid.

Page 82 of 103

Banking.pdf

Project: Banking

33.1. PaymentsStart

Elements
# ID Name Image Description Validates the payment entries and, if valid, displays a confirmation page. Decimal point entry is optional when the pennies are zero. The following are all valid entries:

1 BTN"Next" Web PAYVALIDA Button TE 2 EDTPAYMENT Payment Amount

48.62 56.00 56 56. 56.0 63.70 63.7

3 RGOPAYTYPE

Payment Type Option

If a "Regular" payment is set up then this acts like a Standing Order. Since a payment will always be pending, no further payments may be set up for this Payee until this one is cancelled or changed to a "One Off" payment and paid.

Page 83 of 103

Banking.pdf

Project: Banking

Actions
From Payee Options Payment Account Choice Payment Day Of Month Choice Payment Month Choice Payment Year Choice ID CMB-PAYEE CMB-PAYACCOUNT CMB-PAY-DAY CMB-PAYMONTH Condition Click Click Click Click Action Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Target Payee Options Payment Account Options Day Of Month Options Month Options Year Options

CMB-PAY-YEAR Click

33.2. Day Of Month Options

Description
This must only includes days that are appropriate for the chosen month and year. If the user changes the month and the currently selected day becomes out of range (e.g. "31 October" changed to "February") then the highest day of the month should be chosen instead. Alternatives To Consider Always include 1 - 31 and provide validation when the "Next" button is clicked since there must be some validation on Payment Date being today or in the future.

Page 84 of 103

Banking.pdf

Project: Banking

33.3. Month Options

33.4. Year Options

Description
Must only contain the current year and future years up to the allowed limit of advance payment (3 years in this example).

33.5. Payee Options

Description
Lists only currently set up Payees that do not have a pending payment. The list may be empty.

33.6. Payment Account Options

Description
Lists all customer accounts from which bill payments may be made.

Page 85 of 103

Banking.pdf

Project: Banking

34. PendingStart
Design File Last Modified Uses Pages\Pending\PendingStart.gui 23 November 2007 18:09:28 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Pages\Payments.gui Pages\StandingOrders.gui Pages\DirectDebits.gui Pages\Pending.gui

Used By

Description
This page shows any payments that are currently pending. If no payments are pending then a different message is displayed at the top and no table is presented.

Page 86 of 103

Banking.pdf

Project: Banking

34.1. PendingStart

Elements
# ID 1 TBLPENDING Name Pending Payments Table Image Description Lists all payments currently pending. Selecting an entry allows the details for that payment to be viewed and amended.

Actions
From "Create New Payment" Web Button "Standing Orders" Text "Direct Debits" Text ID Condition Click Action Replace Top Window Replace Top Window Replace Top Window Target Payments (Design)

Click Click

StandingOrders (Design) DirectDebits (Design)

Page 87 of 103

Banking.pdf

Project: Banking

35. StandingOrdersStart
Design File Last Modified Uses Pages\StandingOrders\StandingOrdersStart.gui 23 November 2007 14:56:05 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\StandingOrders.gui

Used By

Description
The starting page for Standing Order management. Lists all of the Standing Orders set up on the account. Customers can only have Standing Orders set up against a Current Account and may only have one Current Account. Therefore, there is no account choice box on this page.

Page 88 of 103

Banking.pdf

Project: Banking

36. StandingOrdersView
Design File Last Modified Uses Pages\StandingOrders\StandingOrdersView.gui 23 November 2007 14:56:05 Masters\Header.gui Masters\LeftMenu.gui Masters\Footer.gui Masters\BalanceInfo.gui Pages\StandingOrders.gui

Used By

Description
The details view for a selected Standing Order. The user may delete or amend the Standing Order from this page.

Page 89 of 103

Banking.pdf

Project: Banking

37. StatementAdvanced
Design File Last Modified Uses Used By Pages\Statement\StatementAdvanced.gui 23 November 2007 21:22:40 Pages\Statement\StatementResults.gui Pages\Statement.gui

Page 90 of 103

Banking.pdf

Project: Banking

Description
The Advanced options provide 3 different ways to specify the date range for the displayed transactions

Page 91 of 103

Banking.pdf
statement: 1. 2. 3.

Project: Banking

A specific month within the last year (same as Normal option). A specific statement number (all issued paper statements are numbered starting at 1). Any given date range since the account was opened.

Annotations
1. Statement Date Range The date range is inclusive; the statement should include transactions on both the "From" and "To" dates. If an invalid date is selected (such as 31 February, a date before the account was opened or a date in the future) then the system must choose the best range approximation rather than generate pointless errors, as follows:

A date before the account was opened is adjusted to the account opening date. A date in the future is adjusted to today's date. An invalid "From" date beyond the end of a month (e.g. 31 February) is adjusted to the start of the next month (e.g. 1 March). An invalid "To" date beyond the end of a month (e.g. 31 September) is adjusted to the last day of that month (e.g. 30 September).

Page 92 of 103

Banking.pdf

Project: Banking

37.1. StatementAdvanced

Elements
# ID 1 Name Statement Date Range Image Description The date range is inclusive; the statement should include transactions on both the "From" and "To" dates. If an invalid date is selected (such as 31 February, a date before the account was opened or a date in the future) then the system must choose the best range approximation rather than generate

Page 93 of 103

Banking.pdf

Project: Banking
pointless errors, as follows:

A date before the account was opened is adjusted to the account opening date. A date in the future is adjusted to today's date. An invalid "From" date beyond the end of a month (e.g. 31 February) is adjusted to the start of the next month (e.g. 1 March). An invalid "To" date beyond the end of a month (e.g. 31 September) is adjusted to the last day of that month (e.g. 30 September).

Actions
From Month / Year Choice ID CMB-STAT-MY Condition Click Action Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Modal Choice Popup Target Month / Year Options Statement Number Options Day Of Month Options Month Options Year Options Day Of Month Options Month Options Year Options

Statement Number CMB-STAT-NUM Click Choice From Day Of Month Choice From Month Choice CMB-STATFROM-D CMB-STATFROM-M Click Click Click

From Year Choice CMB-STATFROM-Y To Day Of Month Choice To Month Choice To Year Choice

CMB-STAT-TO-D Click CMB-STAT-TOM Click

CMB-STAT-TO-Y Click

Page 94 of 103

Banking.pdf

Project: Banking

37.2. Month / Year Options

Description
Includes month and year combinations for the last 12 months (or other limit).

37.3. Statement Number Options

Description
Includes only issued statements within the last 12 months. Issued statements typically straddle 2 different months.

37.4. Day Of Month Options

Description
Always includes 1 - 31.

Page 95 of 103

Banking.pdf

Project: Banking

37.5. Month Options

37.6. Year Options

Description
Includes all years from the date the account was opened to today.

Page 96 of 103

Banking.pdf

Project: Banking

38. StatementNormal
Design File Last Modified Uses Used By Pages\Statement\StatementNormal.gui 23 November 2007 21:15:31 Pages\Statement\StatementResults.gui Pages\Statement.gui

Description
The Normal options provide a quick and easy way to access a statement containing the transactions for

Page 97 of 103

Banking.pdf
a specific month within the last year.

Project: Banking

38.1. StatementNormal

Actions
From Month / Year Choice ID CMB-STAT-MY Condition Click Action Modal Choice Popup Target Month / Year Options

Page 98 of 103

Banking.pdf

Project: Banking

38.2. Month / Year Options

Description
Includes month and year combinations for the last 12 months (or other limit).

Page 99 of 103

Banking.pdf

Project: Banking

39. StatementResults
Design File Last Modified Used By Pages\Statement\StatementResults.gui 23 November 2007 18:24:09 Pages\Statement\StatementAdvanced.gui Pages\Statement\StatementNormal.gui

Annotations
5. Statement Net Amount Shows the net amount of Money In minus Money Out for the chosen period. Negative amounts are shown in red to highlight a potential issue.

Page 100 of 103

Banking.pdf

Project: Banking

39.1. StatementResults

Elements
# ID Name Image Description Shows all transactions on the account within the chosen date range.

1 TBLStatement STATEMENT Table

2 TBLStatement STATEMENT Totals -TTLS 3 BTN"Print" Web STATEMENT Button

Shows the total amount of Money In and Money Out within the chosen date range. This is simply the sum of the Money In and Money Out columns. Activates the browser's Print facility (usually opening a Print dialog).

Page 101 of 103

Banking.pdf
-PRT

Project: Banking
The page should be set up so that printing produces good results (using an appropriate style sheet). Alternatively: The Print button could lead to a printer-friendly version of the statement that may then be printed. This solution will more likely produce better results.

4 BTN"Download" STATEMENT Web Button -DLOAD 5 TBLStatement Net STATEMENT Amount -NET

Offers the facility to download the statement in a variety of formats. TO BE DEFINED! Shows the net amount of Money In minus Money Out for the chosen period. Negative amounts are shown in red to highlight a potential issue.

Page 102 of 103

Banking.pdf

Project: Banking

40. Table
Design File Last Modified Templates\Table.gui 30 October 2007 11:14:16

40.1. Table

40.2. Table

40.3. "Form Title" Rectangular Text Shape

Page 103 of 103