PINACLE App Rebrand & Visual Refresh

Evolving PINACLE’s visual language to align with PNC’s updated brand while maintaining familiarity for enterprise banking clients.

Role: UX Manager · Visual Direction Timeline: 2022 – 2023 Platform: Web (PINACLE) · Native / Hybrid Touchpoints Team: UX, Brand, Engineering, Product
At a Glance
  • Led the visual refresh of PINACLE to align with PNC’s updated brand system while preserving key mental models for long-time users.
  • Modernized typography, color, density, and iconography to improve legibility, hierarchy, and accessibility.
  • Coordinated rollout across multiple product teams, reducing risk and ensuring the rebrand landed as an improvement, not a disruption.
Placeholder showing before and after screens of the PINACLE app rebrand

Overview

As PNC evolved its corporate brand and digital standards, PINACLE needed to reflect the new visual language without alienating clients who rely on it for high-value, high-risk financial tasks every day.

I led the visual refresh of the PINACLE application, translating updated brand foundations into a practical UI system that could be adopted incrementally – touching navigation, typography, color, iconography, and key screens.

Role & Scope

In my role as UX Manager and visual lead, I:

  • Translated updated PNC brand guidelines into concrete UI decisions for the PINACLE app.
  • Defined the visual direction across navigation, shell, and key workflows.
  • Partnered with engineering to assess feasibility, performance, and rollout strategy.
  • Coordinated with product teams to identify high-impact areas for early adoption (dashboards, navigation, core workflows).

Context & Challenge

PINACLE had a long history and a loyal client base, but visually it reflected an older generation of PNC’s digital brand: heavier gradients, dense layouts, and a mix of legacy patterns.

Meanwhile, PNC’s brand and other digital properties were evolving toward:

  • Cleaner, flatter surfaces and updated color usage.
  • More modern typography and spacing conventions.
  • Updated iconography and illustration styles.

The challenge: upgrade PINACLE’s visual language to feel current and cohesive with PNC’s broader ecosystem – without causing disorientation or risk in critical tasks like payments, approvals, and reporting.

Placeholder collage of legacy PINACLE UI with older visual styling

Approach & Brand Alignment

I started by mapping PNC’s updated brand guidelines to core PINACLE UI elements:

  • Identified where brand colors could be safely used for emphasis vs. where they needed to remain neutral for data-heavy views.
  • Selected the appropriate typography stack and styles for headings, body, labels, and data.
  • Defined updated elevation, borders, and surface treatments for cards and containers.

To manage risk, we focused first on the **shell** (navigation, chrome, global actions) and high-visibility surfaces like dashboards, before touching deep workflow screens.

Placeholder image mapping PNC brand tokens to UI elements
Placeholder of shell and navigation visual explorations

Design Solutions

The rebrand centered around modernizing the **shell**, key surfaces, and core components while preserving information architecture and interaction patterns.

1. Updated Shell & Navigation

  • Refreshed top navigation bar with updated color, typography, and spacing.
  • Simplified iconography and status treatments for notifications and profile areas.
  • Aligned hover, focus, and active states with new design system tokens.

2. Modernized Cards & Tables

  • Introduced cleaner card surfaces with more deliberate use of borders, elevation, and whitespace for widget and dashboard content.
  • Adjusted table density, row height, and zebra-striping to balance readability with high information density.
  • Updated typography hierarchy (column headers, primary values, secondary metadata).

3. Iconography & Status

  • Adopted updated 20px icon grid and harmonized system icons with PNC’s broader set.
  • Standardized usage of color + icon + label for status and alerts to improve scannability.
Placeholder image showing navigation before and after rebrand
Placeholder image of cards and tables before and after rebrand

Accessibility & Usability

Any visual update in an enterprise context has to improve – not just maintain – accessibility and clarity:

  • Ensured color contrasts met or exceeded WCAG guidelines for text, icons, and key UI.
  • Increased minimum touch targets and spacing around interactive controls.
  • Worked with engineering to confirm focus states were visible and consistent across keyboard navigation paths.
  • Tested high-density data screens to confirm that the new typography and spacing supported quick scanning for power users.
Placeholder image of contrast checks and focus state examples

Rollout & Collaboration

To avoid a risky “big bang” change, we worked with product and engineering to stage the rollout:

  • Started with shell and global components, then gradually updated key flows (dashboard, navigation, approvals, core reports).
  • Provided side-by-side before/after previews and documentation to internal stakeholders (product teams, client-facing partners, support).
  • Coordinated with our design system work so that rebrand decisions fed into reusable tokens and components rather than one-off changes.
Placeholder image of phased rollout roadmap for the PINACLE rebrand

Impact

  • Brought PINACLE visually in line with PNC’s broader digital brand ecosystem, reducing the “outlier” feel of the platform.
  • Improved perceived modernity and polish of the application without forcing a relearning of core workflows.
  • Strengthened the foundation for future modernization work (dashboard, navigation, widgets, design system) by aligning on tokens and patterns.
  • Reduced visual inconsistency across product teams by tying UI changes to the shared design system rather than ad hoc re-skinning.
Placeholder collage of multiple updated PINACLE screens after rebrand

Reflection

The PINACLE rebrand reinforced that visual change in enterprise software is a trust exercise. The work wasn’t about chasing trends – it was about carefully modernizing a mission-critical tool in a way that felt both new and reassuring.

By closely pairing brand, UX, and engineering, we were able to elevate the look and feel of PINACLE while strengthening the underlying systems that future projects now build on.