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 impactful 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 banking app, while enhancing a nonexistent brand identity that PNC needs to stand out from its competitors and create a fun user experience.

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.

Before and After Screens

Design Decisions

1. Scrolling home page

2. Change in color choices

3. Banking account page layout

4. Iconography & Typography

5. Additions of buttons

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 addition of global navigation and differing buttons, alongside the new colors and iconography, the cohesion of overall design is apparent while giving the user more ways to interact with the app in a more seamless way.

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.