Online Banking

Date
Fall 2019

Timeline
15 Weeks

Role
UX/UI Desinger

Online banking has become an important part of our financing. Proprietary solutions tend to be messy and confusing, with outdated graphical interfaces. This project set out to redesign my personal credit union’s online banking website, focusing on creating a more streamlined interface and a quicker experience.

Information Architecture

The information architecture of my current online banking website is very messy and confusing. Redundancy and functions buried under multiple clicks cause friction when attempting specific tasks.

Old Information Architecture

New Information Architecture

Idiomatic Sketches

Creating a simple and intuitive way for the user to interact with their money was my main goal for this project. To achieve this, I first sketched out possible idiomatic interaction models to get a basic idea for how the information was going to be displayed.

Interaction

The final idiomatic structure for the website featured a three level model. 01. The background of the webpage. 02. Cards that show all of the users accounts and payments with quick information. 03. A side panel showing additional information that also represents where the user can interact with their money.

Wireframes

First round of wireframing allowed me to layout and add data to my interaction model. These initial designs allowed me to receive feedback on my design and improve upon various parts of the website.

#90d5ec

#000000

#ffffff

#b0b0b0

#e0e0e0

#fc575e

Design


After receiving feedback on my wireframes, final revisions were made and a mobile variant was created. Color was introduced while still keeping the design clean and minimal.

Final Screens

User Flow

Animated user flows show final animations, design, and common interactions the user will experience including bill payment and checking account information.

Takeaway

In review of my process, I wish I had invested more time in research for the project. The majority of what I did revolved around creating a better information architecture and layout for my own credit unions website. Gathering data about other users of the website would have allowed me to have a wider understanding of what needed to be improved and how users were using the website.