A fresh redesign concept for the PNC banking app. This personal project focuses on simplifying the app’s navigation, adding features like push notifications and live chat, and improving how customers find ATMs or nearby branches.
I’ve been a longtime PNC customer, and I’ve always found their app frustrating to use. While PNC leans into the idea that “banking is boring,” the mobile experience felt outdated and lacked many of the features I’ve come to expect from a modern financial tool. It wasn’t just plain - it was clunky, hard to navigate, and missing conveniences like push notifications, a reliable ATM locator, or easy access to live support.
Curious if others felt the same, I turned to Reddit and app store reviews and found I wasn’t alone. Many users shared similar pain points: outdated design, poor navigation, and limited mobile functionality.
One issue stood out from my own experience: the “ATM Access” button. At first glance, it looks like a way to locate nearby ATMs - something I was actively trying to do. Instead, it opens a screen to generate a one-time access code for cardless ATM use. While useful, the label completely misaligned with user expectations. According to Jakob’s Law, users expect familiar patterns. This label created unnecessary confusion by violating that expectation.
That moment became the flag that kicked off my research. I began asking myself:
What do people actually want from their finance apps?
To find out, I interviewed friends who also bank with PNC and combed through app store reviews and Reddit threads. I wasn’t aiming to overhaul the app yet - just to spot patterns and uncover what users were actually frustrated with the most. From these early conversations, a few clear usability issues began to emerge:
Navigation was unintuitive and inconsistent
The interface didn’t reflect the ease or control users expect from a modern banking app
Key features like live chat and ATM search were buried or unavailable
This led to a central design question:
Redesign the PNC app to prioritize usability, surface essential features, and create a more user-centered experience?
To understand what users expect from a modern mobile banking experience, I conducted a brief competitive audit by analyzing top-performing apps and gathering feedback from friends and online forums. Two apps consistently stood out: Chase and Amex.
Robust features and functionality
Detailed transaction breakdowns
Seamless account management
Polished UI
Intuitive live chat support
From there, I focused on integrating the utility of Chase, the approachability of Amex, and tailoring the experience to address PNC-specific pain points.
From user feedback and comparative research, it became clear that the PNC app wasn’t just aesthetically outdated - it created friction in completing everyday tasks. Users expected intuitive navigation, real-time communication, and quick access to physical banking resources like ATMs or branches. PNC’s app consistently fell short in these areas.
Poor Feature Discoverability: Essential tools like ATM locators and support were hidden behind hamburger menus or misleading labels, creating friction for users trying to complete basic tasks.
Everyday Usability Gaps: The layout and navigation patterns added unnecessary steps to simple actions, slowing users down and increasing cognitive load.
Visual & Behavioral Mismatch: The app’s outdated UI and ambiguous language fell short of user expectations shaped by competitors like Amex and Chase, leading to confusion and reduced trust.
Since PNC has an existing brand identity with its own established color palette, typography, and tone, I had to stay within those boundaries. The goal wasn’t to reinvent the brand, but to elevate the experience.
That said, I wasn’t working with any official brand assets. As an unaffiliated designer, I didn’t have access to internal design guidelines or UI kits. Instead, I leaned on my background in graphic design to reverse-engineer the branding. I used the inspect element tools to identify typography, vectorized the logo manually, and recreated key brand patterns by referencing live interfaces.
This added constraint shaped how I approached the redesign: I had to modernize the experience without introducing elements that felt out of place or off-brand.
Simplify navigation and reorganize information architecture to make key tools easy to find and use.
Introduce features that users expect in a modern banking app like live chat and real-time notifications to provide guidance when it matters most.
Craft a clean, approachable UI that aligns with PNC’s existing brand while reinforcing a sense of control, safety, and ease.
After identifying the core usability challenges: navigation, discoverability, and lack of support access, I began mapping solutions that addressed these directly. My goal was to design a more intuitive, task-focused experience that felt familiar, functional, and trustworthy. Each feature was intentionally scoped to prioritize usability and reduce friction for everyday users, while staying within the visual bounds of PNC’s brand.
I decided to focus on three main MVPs of this design aimed to reduce cognitive load, streamline essential banking tasks, and help users feel more supported and in control.
To improve discoverability and streamline access to core tasks
A fast, native tool with location-based search and clear results
Centralized access to live chat
One of the major usability issues was the app’s reliance on a hamburger menu, which added extra steps to complete common tasks. To improve flow and reduce friction, I introduced a persistent bottom navigation bar with clearly labeled categories. I leaned on industry standards, user expectations, and informal feedback to group key tasks logically.
To improve the app’s flow and make key actions easier to access, I replaced the hamburger menu with a five-item bottom navigation bar. Each menu item represents a task users regularly perform, based on user feedback and common patterns in other financial apps, allowing users to complete key tasks in fewer taps, with less cognitive load.
In the original app, the “ATM Access” button was misleading. Users expected it to locate nearby ATMs, but instead it launched a screen for generating a one-time cardless access code. While useful in some contexts, this naming choice broke user expectations and created unnecessary confusion. Meanwhile, the actual option to locate branches and ATMs was buried in the Help Center.
I replaced this fragmented experience with a dedicated Locator tab in the bottom navigation. The feature is now where users expect it to be and behaves as anticipated.
.gif)
Clear map icons distinguish ATMs from branches
Each location includes hours, address, and directions
Fewer taps to complete the task
The original PNC app didn’t offer live support. Instead, users were directed to a “Message PNC” feature that simply sent a message to be reviewed later, with no indication of when to expect a reply. To make matters worse, the “Help” button was buried in the hamburger menu and routed users to a bloated Help Center, where they could do everything from request a callback to visit PNC’s X and Facebook accounts - odd choices for in-app support.
Inspired by Amex’s persistent chat feature, I introduced a live chat icon anchored in the upper left corner, visible across all screens.
Chat icon is consistently placed for visibility, even while navigating between screens
Tapping the icon opens a direct live chat interface for real-time support
Removed unnecessary links (like social media) and focused on actionable support pathways
While the original PNC app offered fraud text message alerts, it lacked in-app push notifications, something most modern finance apps now provide.
I initially explored a lightweight visual alert by placing a red notification icon directly on the credit card graphic. However, in testing, this solution was easy to miss.
Based on that feedback, I added a red notification banner at the top of the screen to help reinforce the alert. This added more visibility but still relied on users noticing a small icon or color cue. In further testing, users noted that it was still somewhat difficult to identify what needed attention at a glance.
From there, I pivoted toward a more robust, multi-cue alert system. I introduced a red banner at the top of the account screen, paired with red exclamation icons in two locations: next to the account category and alongside the individual account.
This layering of visual cues allowed users to immediately recognize that something needed attention without having to interpret subtle signals.
I also designed a modern push notification system to keep users informed in real time, directly through the app. The feature is especially useful for high-stakes scenarios like identifying fraudulent transactions.
Focused on one high-impact use case: fraud alerts
Designed the flow to be fast, clear, and stress-free
Designed a step-by-step experience with clear actions and support pathways to reduce user stress during high-stakes moments
While much of the redesign focused on usability and core functionality, I also identified moments where thoughtful visual design could add polish and clarity to the user experience. Since this was a personal project, I wanted to give the experience more whimsy, while remaining on-brand.
Inspired by the refined, personality-driven interactions in apps like Chase and Amex, I designed a whimsical loading animation using Adobe After Effects. This created a welcoming first impression without straying from PNC’s existing brand identity.
I also revisited how account information was visually displayed. The original app used generic account name snapshots, which made it difficult to match accounts to their corresponding physical cards, especially for users managing multiple accounts. Drawing inspiration from Amex’s use of card visuals, I replaced these text-based summaries with digital replicas of real PNC credit cards to create clearer, more recognizable reference points.
Here, I leaned on my graphic design background to recreate the card designs from scratch, ensuring they aligned with PNC’s brand while enhancing usability. This small detail helped bridge the gap between physical and digital experiences, improving clarity and reducing cognitive load for users trying to distinguish between accounts.
To further reduce visual clutter and improve scannability, I introduced a new UI element I refer to as a collapsible wallet. Instead of displaying all accounts in a long, ungrouped list, I segmented them into two distinct categories: Bank Accounts and Credit Cards. Each wallet contains the relevant cards like checking, savings, or debit cards for banking, and all credit cards in the credit section. Users can expand or collapse each wallet to keep the interface clean while still accessing all necessary information.
Organized account types into collapsible sections for better hierarchy
Improved clarity for users with multiple accounts across categories
Paired with card visuals to support faster recognition and reduce friction
To maintain consistency and visual clarity across the redesigned app, I created a lightweight design system tailored to PNC’s brand. This system made sure each screen aligned with the same tone, spacing, and usability standards - even without access to official assets.
To wrap the project, I created a short walkthrough video to showcase the redesigned experience and highlight the most meaningful improvements across key user flows.
Streamlined Navigation: Replaced the hamburger menu with a bottom nav for faster access to key actions
Redesigned ATM & Branch Locator: Clearer task flow and native in-app experience
Integrated Live Chat: Persistent icon across all screens for real-time support
Fraud Alert Flow: Push notification leads to an in-app verification step, reducing uncertainty
Visual Card Cues + Collapsible Wallets: Easier account recognition and organization
Added Delight: Subtle, branded loading animation introduces personality without disrupting usability
This project challenged me to think like a product designer while embracing the scrappiness of a solo case study. Without access to internal data or brand assets, I had to reverse-engineer PNC’s design system, validate assumptions through informal research, and prioritize usability based on the needs of everyday mobile banking users.
If I had more time or access to real user data, I’d expand this project by testing the flows at scale, considering edge cases, and validating the information architecture with real usage patterns. This case study ultimately became a reflection of my strengths as a hybrid designer: blending UX, UI, and visual storytelling to reimagine a more intuitive, human-centered banking app.
Visuals support trust. Clean, recognizable design cues like digital card mockups helped bridge the gap between physical and digital experiences.
Feedback matters early. Even informal testing with friends helped catch oversights (like a too-subtle fraud alert) and led to smarter, more effective solutions.
Working within constraints sparks creativity. Not having official assets pushed me to apply my graphic design background in new, practical ways - like recreating credit cards and designing a branded loading animation from scratch.
