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.
