PNC Financial Services Redesign
Problem Space
PNC Bank’s online presence for their proprietary applications is outdated and in need of immediate upgrade. As senior consultant, I worked towards revamping and relaunching their line of lending applications for both mobile and desktop platforms as part of their overarching move towards digital transformation.
In that endeavor, I worked in tandem with cross functional teams of UX designers, developers, product owners, legal and compliance, project managers, and marketing teams to maintain brand image and consistency through product lineup. This involved creating a responsive design system that could work across different platforms and retail lines of businesses in order to deliver a consistent user experience.
Challenge
The current process to take out a mortgage is fundamentally broken. Not only is it needlessly long and time consuming, but most importantly, it is arduous. It uses outdated business practices, mandating the need for middlemen and therefore multiple layers of communications and approvals throughout the line of business. As such, the challenge was to fundamentally redesign the entire experience of applying for mortgage. Additionally, the legacy application being used by PNC was severely lacking in UX design principles and as such had to be upgraded through principles of user experience and interaction design.
Lending application view prior to redesign.
Additionally, in order to make sure that the cognitive load on the user was minimal, we had to completely rethink the way information was presented in the application. We had to do it in a way that not only made the process efficient but also made the experience feel seamless. In a lot of cases, the fields that the user is asked to fill may or may not apply to their particular needs. Testing showed that this created unnecessary cognitive load and a sense of worry for the customer since they were unsure of filling out some fields. This is demonstrated in the pictures below:
Fannie Mae 1003 Mortgage Form
After multiple rounds of user interviews, contextual inquiries, competitive analysis, and consultations with the legal and compliance department, we arrived on design requirements. This was a list of items that were absolutely needed to be a part of the process in order for an application to function from not only from a user experience perspective, but also pass legal and compliance requirements set forth by the government. Additionally we also created customer journey to map out the user experience of the entire product.
Customer journey and design requirements
That information was then presented on a logic based format that only displayed information that was pertinent to the customer based on prior inputs. This was then made part of progressive form structure, which was necessitated due to the sheer length of the application. Testing showed that the new form structure reduced not only the completion time, but the cognitive load on the user as well. The overall ease of use improved considerably.
Personas
In addition to designing a customer facing application that adhered to both business and governmental regulations, it was vital to understand new customers, along with their mortgage needs. Over 15 customer related personas were identified, based on historical PNC usage trends, customer analytics, along with vast preliminary customer research. The personas created are presented below:
The Visual Language
Since all lending products are to be released under the same umbrella, it was imperative that they share a visual patina. In order to make sure sure that we maintained brand consistency across the range of lending products, we designed a UI kit based on atomic design principles that each product could refer to. This made sure that while each product maintained its own uniqueness, it still felt like it was part of a whole. An preview of the UI kit is presented below:
Wireframes
All of the requirements gathered were combined with the visual library presented above and mocked up. The application went through over 16 sprints of design and development. Each sprint was about 2 weeks long, and included getting feedback on business and design from stakeholders, legal and compliance, marketing, and development teams.
Additionally, user testing was conducted every 6-8 weeks to make sure that we were moving in the right direction. A new version of the prototype was created at the end of every sprint which was then tested and the feedbacks were incorporated in the subsequent sprint. This made sure that the application met business and legal needs while maintaining a user centric design.
Paper Prototypes
After necessary approvals and multiple rounds of testing, the paper prototypes were made into high fidelity prototypes using the UI kit shown above. A short selection of screens is presented below for different projects over desktop and mobile platforms.
High-Fidelity Prototype - Home Lending (Desktop)
High-Fidelity Prototype - Investment Line of Credit (Mobile)
Hand-off to development
In order to make sure that front end developers have the right information and design template to start building out the product, I annotated my designs with great detail. This included micro specific information like line and font height; font size, color, and type; padding and gutter space, column width, dropdown and button interactions, and so on. This not only reduces the probability of error during development but also makes sure that the designs are consistent and follow set guidelines.
Additionally, it makes it easier to collaborate between designers of not only different projects, but of different companies as well; since all the information needed is contained within the annotations. Presented below is a brief glimpse of annotated designs for your consideration:
Annotations - Desktop
Annotations - Mobile
Out of all the products under active development, Home Lending is live and can be used to currently take out loans. Real world user testing has confirmed that the redesign improved upon the original product in a multitude of ways by making the application easy to use not only for the customers but also for the loan officers assigned to the product.
Through fundamental user centric principles, and by constant communication with stakeholders in the line of business, we have managed to make an application that not only lives up to the business needs from PNC, but also sets industry standards in terms of user experience.