CREATIVE

PNC Bank Online Banking

Case Study

Role:

Art Direction, UX Design, UI Design

Tools:

  • Figma

Please note, this case study is for personal use only, and is not associated with PNC Bank.

Introduction

PNC’s Virtual Wallet online banking experience is visually dated and is difficult to navigate for users. In this personal case study, I set out to redesign the experience and interface to create a better experience.

Research

To help gather data, pain points, and feedback on the existing experience, I surveyed one newer (~8mo) PNC customer. In future iterations, I plan to survey more individuals to gather more data to better identify themes, pain points, and feature requests.

The PNC customer shared some comparative experience to their primary online banking tool, vs PNC screenshots that were shared and their limited experience using the tools. They said it was difficult to use and find specific actionable items, whether in Settings, Customer Service, or their individual accounts. They also mentioned that although the public-facing PNC website was modern in appearance, the PNC online banking tool looked outdated and didn’t look like the same company. 

Goals

Based on the research findings, three primary goals were established for this redesign.

  • Prioritize the information architecture to make the product easier to digest and use.
  • Make the Savings Goals functionality more intuitive and prominent throughout.
  • Move or remove unnecessary clutter or artifacts.

User Profile

  • Qualifications: Existing PNC online banking customers
  • Target age range: 18 – 65
  • Gender: all

Results

Since the user profile, in this case, was fairly general and widespread in age, some design decisions were made to ensure it reached the vast user age range, like improved accessibility, descriptive text headings, and planning for limited animations.

In evaluating and improving the information architecture, it was most effective to group the sections in their own visual modules/buckets. More details on these are available in their respective sections.

Sign In

The sign-in screen is intentionally minimal and could use geolocation to provide relevant imagery based on the user’s location.

Accounts Overview

This is the first screen that the user sees after logging in. It provides a clear overview of each account and actionable direction to review the account in detail.

This screen also provides a brief overview of recent activity and savings goals. Each of these modules offers the ability to filter between applicable accounts.

Spend Account

The Spend account is the traditional checking account, linked to a debit card. The first priority of this screen was to paint a holistic picture of the account activity – recent transactions, recurring payments, and estimated upcoming activity based on spending trends or automated payments.

Growth Account

Within PNC’s Virtual Wallet, the Growth account is an interest-earning savings account. It’s advertised as the primary account to plan for big purchases or emergency funds because it in-fact earns interest and has a savings goal feature. Additionally, this screen prominently shows the account balance, offers an overview of recent activity, as well as horizontal navigation that leads the user deeper into the tools.

The existing savings goal tool no longer allows for a visually driven savings goal experience, meaning there is no visual indication of how far along you are in your savings journey nor an easy way to designate available funds in the account to your goal. This solution targets both of those items with a slider.

Reserve Account

Similar to the Growth account, the Reserve is a savings account but doesn’t earn interest. It’s meant to be an account where you can save for bigger events, like an emergency fund, and not be tempted to use those funds for other purchases.

Transfer

The Transfer screen is traditionally used to move money from one internal or external account to another. That is no different in this case, but the experience had previously been rocky. This flow allows the user to quickly add the amount to be transferred, changing currency if needed, and select the accounts they are transferring from and to, including transferring to external accounts.

Next Up: