Reimagining PNC online banking

Client

Case Study, 2019; Updated visuals, 2022 

Tools

Figma

Role(s)

UX design, Interaction design, User research

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.

Persona

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

Results

Since the persona, 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.

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. Additionally, this screen prominently shows the account balance, offers an overview of recent activity, as well as links to dive deeper.

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. 

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.