Design Principles

Visibility

We focus on the analysis and insights of open banking data for consumers.
We need to use tools for visualisation of data and generate graphs on our webapp.
The data can then be straightforward and visible to users and they will be able to make use of open banking data.

Feedback

We will be using dropdown boxes so only the field that is chosen will show all options and users know what they can do with that button.
Sidebars will be used to change between different accounts and the page title will change accordingly so it will not be confusing to users.
Users can also click on buttons to go into individual transaction pages and there will not be any irrelevant information so they will know which transaction they are looking at.

Affordance

We will make a webapp that is simple to use.
There will be instructions on every button and link.
These instructions are kept very simple.

Mapping

Most components in webapp link to details.
Users can click on his profile image to edit their profiles.
Clicking on a transaction or a graph will take users to the details.

Consistency

The webapp will use bootstrap to keep website consistency.
The header and footer will be consistent on all pages as well.

Constraints

Since this is a banking app, password is required to be complex enough for security.

Hand Drawn Sketches

We hand drew sketches of our ideas.

1 / 4

Sketch 1

2 / 4

Sketch 2

3 / 4

Sketch 3

4 / 4

Sketch 4

❮ ❯

1 / 4

Wireframe 1

2 / 4

Wireframe 2

3 / 4

Wireframe 3

4 / 4

Wireframe 4

❮ ❯

Wireframe

Prototype

*It may be worth noting that our login is due to change in future prototypes, and be replaced by more secure alternatives; for the time being our prototype uses a native Django login system that allows us to make use of some convenience features (such as requesting the user's name directly from the template).

1 / 5