First National Bank
Visual Design Case Study

FNB is a commercial banking institution that spans over 380 locations across Pennsylvania, Ohio, Maryland, West Virginia, North Carolina and South Carolina.

Overview

The Problem
Based on last quarters growth results, the FNB bank has been seeing a decline of online banking usage by users between the ages of 18 - 30.

The Goal
In our efforts to attract and retain younger millennial clientele I have been tasked with a visual design and user experience overhaul for desktop & mobile app platforms.

What I was responsible for
• User Flows Diagrams • Lofi & Hifi Mockups
• Design System • Mobile App Design
• Online Banking Dashboard

What tools I used
• Adobe Photoshop
• Sketch

Website Visual Design

Design System Language
The “Roboto” font is a clean, san-serif font that was designed for content density & ease of reading. I took the color original scheme & expanded upon it with subtle complementary and neutral colors.

Dashboard - Wireframes
The current online banking dashboard is information dense. Lo-Fidelity wireframes allowed me to map out the vital information that users would want to see before committing to a high fidelity design.

Dashboard - Desktop Design
Banking dashboards tend to show a lot of non essential information that doesn’t pertain to the task at hand.

My goal was to introduce more negative space for ease of viewing & to eliminate distracting ads and/or non related links. Larger, bolder text for better visual hierarchy was also introduced into the design.