PNC BANK
REDESIGN
Responsibilities
User interviews
Research synthesis
Personas
Sketches
Desktop design
Mobile design
Prototypes
Project Type
Mobile & desktop application redesign
+ case study
Timeline
1 month
About the Project
With PNC being my personal banking choice, I took on the task to try and redesign the mobile and desktop counterparts to make my own experience a more pleasing and functional one. Incorporating design choices from other banking companies I gave myself more practice in figma to ultimately create a clearer and unified brand identity for PNC.
Problem
Visual unity and purposeful information heirarchy are some of the fundamental aspects of a good design. In PNC's current mobile and desktop applications, the general brand identity and usability of both versions are lacking to say the least.
Solution
This redesign keeps the general layout of the necessary user flows of a general banking app, while enhancing a nonexistent brand identity that PNC needs to stand out from its competitors
User Interviews
The reason for the smaller group of interviewees, is due to the notion that the original design's of PNC are objectively outdated, and I wanted to get a general consensus of how users interacted with both versions. Overall, users want to have a more streamlined experience and reduce the amount of interactions for specific tasks.
5 user interviews
Young adults that have never used PNC before
Young adults that have the banking app
Major Insights
Clear disconnect in visual identity
Specifically in the desktop version, users found that general typography and colors were somewhat unpleasing to browse through and that PNC's brand identity seemed to be scattered.
General clunkiness of information
The main user flow for both versions of the banking tool became overwhelming to all users due to the amount of interactions they had to commit to. In the redesign, I focused on this insight to reduce the amount of steps a user has go through to see their banking information.
User Flows
To reduce the amount of clicks/taps a user has to interact with, I identified what parts of the design could be grouped together by and streamlined the basic needs of what users were mainly interacting with into a visually appealing information architecture.
Navigation in the mobile application is somewhat hidden from users as the motion of the slide to reveal isn't what the user really expects. So adding a stickied nav menu at the bottom of the app makes it prevelant for users to see where they are at in the application.
To aid in the visual brand identity of PNC, I kept the typography, iconography and color design to all match between the desktop and mobile applications.
Sketches & Design Inspirations
These are some of the initial thoughts I came up in regards to specific design changes and my moodboard for inspiration in the design choices.
The initial sketches gave me a general idea on keeping the brand identity the same across both devices.
Usability Study
Two iterations of unmoderated usability studies were conducted for the original design and final redesign. The following charts are from the original to discern certain design changes for my implementation of the designs.
After these findings, the main design change I wanted to implement more visual elements like buttons and a global navigation bar to create a cohesive brand identity alongside the color harmony and general typography choices.
Screens
Design Decisions
1. Scrolling home page
2. Change in color choices
3. Banking account page layout
4. Iconography
5. Typography
With emphasis on the login hero, I wanted the new design to make sure that the user doesn't get lost in where they want to go.
In the previous design, colors were all over the place. With the new set of colors, the brand identity of PNC is set and creates an inviting and warm presence to the app.
Taking inspiration from other designs, the simplicity of the information architecture makes the user more confident in where they are navigating throughout the page.
Keeping the iconography fairly faithful to the original design, this just helps reinforces the overall branding of PNC (with the small additions to replacing text with icons.)
With the mixture of the two fonts, visual hierarchy can be defined to support the visual branding of PNC and create a playful yet inviting tone.
Style Guide
The original design lacked any cohesiveness between the mobile and desktop applications. Even in the desktop version, there were many disparities between pages which made the design nonuniformed. With the update of the color palette, there are less colors that can be used in their respective combinations
Final Designs
Future Direction
With this redesign, I wanted to focus on creating general unity between the mobile and desktop versions of PNC. I really enjoyed implementing assets across both platforms and add my own take on specific assets and layouts.
Things I Learned
Continuity Between Devices
This being my first redesign for a cross device application, I definitely learned a lot in specifics about spacing changes and navigation flows.
Focus On Visual Hierachy and Emphasis
Only using two font families for this redesign, I wanted to make sure that spacing and the common regions defined made sense and helped with user flows.
Figma Components Are A Life Saver
I really enjoyed learning how to use component to create specific elements in this design to make my prototyping A LOT more efficient. For both desktop and mobile versions of the navigation bars, there are states defined to differentiate hover and active states.