PINACLE App Rebrand & Visual Refresh
Evolving PINACLE’s visual language to align with PNC’s updated brand while maintaining familiarity for enterprise banking clients.
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.
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.
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.
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.
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.
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.
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.
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.