Modernizing Navigation Across PINACLE Corporate & Commercial
From legacy ribbons and hamburger menus to a unified, modern, and scalable navigation system.
At a Glance
- Unified navigation patterns across corporate and commercial banking portals.
- Established a future-proof information architecture for dozens of services.
- Delivered a reusable Angular navigation component for PNC’s broader ecosystem.
Overview
Over six years at PNC, I led multiple modernization efforts for PINACLE, our corporate and commercial banking platform. One of the most critical was redesigning and unifying navigation across both applications. The goal was to replace dated, inconsistent patterns with a single modern navigation system that worked for all client types — and that could scale across PNC’s broader application ecosystem.
My Role & Team
As UX Manager, I orchestrated the end-to-end navigation redesign:
- Guided research and card-sorting exercises with clients to understand mental models across corporate and commercial users.
- Facilitated internal ideation workshops with designers and product partners to explore structural and visual options.
- Directed prototyping and validation sessions with external clients to test the new IA and interaction patterns.
- Partnered with development to deliver the new navigation as a reusable Angular component that could live in our pattern library and scale beyond PINACLE.
Context & Challenge
Corporate: A horizontal ribbon that scrolled endlessly to display entitled services.
Commercial: A left-side hamburger menu with tiered submenus.
Both patterns were aging, inconsistent across platforms, and increasingly difficult for clients to use as the number of services grew.
The challenge was to unify navigation across both platforms into a single, modern, and scalable system — one that respected clients’ mental models, simplified service discovery, and could be adopted as a reusable component across future PNC applications.
Research & Discovery
To ground the redesign in client needs, we:
- Conducted open and closed card-sorting exercises with corporate and commercial clients.
- Identified natural groupings of services that highlighted inconsistencies in the legacy structures.
- Validated internally with the design team, then externally with clients to ensure clarity and alignment.
These insights formed the foundation of a new information architecture — one that was intuitive, scalable, and reflective of how clients actually think about their financial tasks.
Design & Solution
We introduced a top header navigation with a mega menu, replacing both the corporate ribbon and commercial hamburger patterns.
Main categories: Accounts & Reporting, Fraud Protection, Investments & Liquidity, Loans & Cards, Payments & Transfers, Receivables, Statements, User Admin, More Services.
Utility navigation: Notifications, Resources, Client Services, Profile, Language selector.
By grouping services into clear categories and surfacing key utilities, we reduced cognitive load while giving clients faster, more consistent access to their tools.
Testing & Validation
We built high-fidelity prototypes and tested them with corporate and commercial clients. These sessions validated our IA groupings and highlighted where terminology needed refinement. Clients were able to locate key services faster and more confidently compared to the legacy navigation systems.
Implementation & Scalability
Working closely with development, we delivered the new navigation as a reusable Angular component. Beyond PINACLE, the component was designed to be integrated into other PNC applications — establishing a scalable navigation standard across the bank’s digital ecosystem.
Impact
- Unified navigation across two distinct client platforms (corporate and commercial).
- Created a future-proof IA that can accommodate new services and offerings.
- Improved service discoverability, reducing friction in critical tasks.
- Delivered a reusable pattern-library component that extended value beyond PINACLE into other PNC digital products.
Leadership Reflection
This project was a reminder that modernization isn’t just about UI polish — it’s about balancing client needs, internal alignment, and technical scalability. By pairing research-driven IA with strong cross-functional collaboration, I guided the team through a complex redesign that improved client experience while setting standards for future applications.