adaptive interactive billpay wireframes · 2019-09-10 · adaptive interactive billpay wireframes...
TRANSCRIPT
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