PNC PRIVATE BANK

I designed new components and established UX and UI patterns within PNC Private Bank digital design system.

My Role

Lead UX/UI
Component Scoping
Implementation

Rebrand and Component Audit

I executed rebranding and component audits and updates across four major features within the PNC Private Bank application.

PNC Wealth went through a major rebrand changing its name to PNC Private Bank. This rebrand resulted in site-wide brand and component-level updates to the entire experience.

IMPACT

These site-wide updates achieved WCAG 2.0 AA accessibility criteria, supporting PNC Private Bank as the first product to meet WCAG 2.0 AA accessibility standards within the bank.

I implemented updates to 100+ unique components across design prototypes into development.

Data Visualizations

I redesigned the donut chart component to meet accessibility requirements.

Donut charts are a part-to-whole data visualization used throughout the PNC Private Bank experience. The Private Bank uses two kinds of Donut Charts: Simple and Complex Donuts.

IMPACT

This new component achieved WCAG 2.0 AA accessibility criteria, supporting PNC Private Bank as the first product to meet WCAG 2.0 AA accessibility standards within the bank.

I redefined the usage, anatomy, behavior, positioning, and accessibility of the component. The updated donut charts are now represented on the home page and two other areas within the application.

Notifications

I lead the redesign and audit of the notification components. I achieved consistent use and representation of notifications while aligning with notification patterns across the bank.

Notifications are used to communicate with users throughout the experience on important status changes and updates.

IMPACT

This work resulted in a site-wide audit and replacement of all notifications throughout the experience across all 38 pages. This new component achieved WCAG 2.0 AA accessibility criteria.

I redefined the content, usage, anatomy, positioning, and accessibility of the component within the experience.

File Uploader

I lead updates to the file upload component within the shared documents feature. Designing an accessible mechanism to upload and share documents within the experience.

The upload zone allows users to drag and drop or select documents to be uploaded. The file attachment row displays upload content while also providing instant progress feedback in the form of error or success messaging.

I also oversaw the creation of the file type icons.

  • 
Envelope Icon: for EML. and MSG. files

  • Spreedsheet Icon: for XLSX and CSV. files

  • Image Icon: for .JPEG and PNG. files

  • Adobe Icon: for .PDF files

  • Powerpoint Icon: for .PPTX files

  • Document Icon: for .DOCX files

  • ? Icon: for an unknown file type

IMPACT

This work was successfully released in the Shared Document feature. The upcoming PNC Private Bank Account Opening process and Secure Messaging feature also leverage the design and functionality of the File Upload component.

I redefined the content, usage, anatomy, behaviors, and accessibility of the upload zone and file attachment component within the document-sharing feature.