Adaptive Interactive BillPay Wireframes

Class: DePaul HCI 430 Prototyping and Implementation Activities: Adaptive/Interactive WireframesProblem: Design a bill payment systemSolution: The adaptive variations are consistent with each other, though displays the content to fit on the screen of different device sizes.Duration: 1 week

Ann Junker

Sign In

Axure wireframes: http://initu0.axshare.com/#g=1&p=sign_in

This page requires the correct username and

password before being forwarded to the pay

bills screen. If entered incorrectly, the user will

receive an error message.

Username: George

Password: Curious

Desktop

Mobile

Pay Bills

This screen shows upcoming bills that need

payment and list of all the accounts the user has

set up with the BillPay system. The list of

accounts is also filterable, so the user can see

bills for just one account at a time. When the

user clicks on the Pay Bill button on the far

right, associated with an account, they will go

through a few steps for the payment process.

Once the payment is complete, the bill will be

removed from the screen.

This is the desktop version.

Pay Bills

When the user has paid, the bill is removed from

the list.

Pay Bills

This is the mobile version.

Pay Bills

Navigation

Through the navigation, the user will be able to

see payment activity, spending trends (not

wireframed out), manage accounts (both bills

and payment options), and set user preferences

(not wireframed out). Both the desktop and

mobile versions of the wireframes use the fly

out panel from the left.

Payment Activity

This screen shows the payments the user has

already made. They can see the most recent

payments and a list of all the accounts they

make payments to. The list also filters the

Payment Activity listing, allowing the user to

see information on just one account at a time.

By clicking on the View Details button related

to each payment, the user can see additional

information about the payment.

This is desktop version.

Payment Activity

This is mobile version.

Manage Accounts

There are two parts to Manage Accounts: the

billed accounts and the payment from accounts.

Each allow the user to add and manage

accounts, and to see how each are related to

each other. For instance, a billed account will

have a payment from account associated to it.

By clicking on the View Details button

associated with each account, the user can see

additional information about the account, edit

account information, or delete the account.

This is desktop version.

Manage Accounts

This is mobile version.

Add Account

Here the user adds a new account to pay its

bills.

This is desktop version. Mobile is similar.

Add Account

Add Bank Account

Here the user adds a new bank account to use

to pay bills.

This is desktop version. Mobile is similar.

Add Bank Account