Overview

PNC Bank located in the U.S wanted to attract more customers on the mobile platform to increase conversion rate and at the same time, guide them to invest into MyWealth. They wanted to make the process very simple and easy by having a digital guide or assistant of some sort who would be invoked by the user for help and assistance during the whole process. The bank requirements was also to add a robo-advisor TFSA and a robo-advisor RRSP to be included within the app.

6M

My design reached an estimated audience of 6 Million PNC Bank U.S customers.

My Role

Lead UI/UX Designer

Team: PNC MyBank Agile Team

Software: Figma

About the project

The project was to span on a period of several months and a team of talented developers were assigned to the task. I was the lead UI/UX designer on the project and was expected to deliver all the wireframes and prototypes to the team within a very tight deadline. I had complete responsibility of the look & feel of the app and the creative direction it would take.

Illustrative skills with Figma and Bezier node curves

Initial sketch for the "Miles" Character was done on my mobile phone with the help of the pen tool attach to the phone, a Galaxy S24 while commuting on the train. I transferred the sketch to Figma and started re-creating all the curve elements of the character. Using FIgma advanced node and bezier curve editing, I recreated from scratch the character and applied the color branding of the company to its outfits.

Research and Iteration Process

I initially started my research by focusing on the target customers who were mostly young people. Based on the data gathered by other teams I worked on designing the color palette which was bright and trendy, attracted young people and the main branding of the company . I proceeded in making several iterations and sketches of what the digital guide or assistant would look like. I sketched it all on my phone with the pen tool and then moved to Figma to design the final character, adding highlights and shadows, working on different facial expressions and optimizing the vectors for quick downloads.

Character variations and micro-animation designed in Figma

High-Fidelity Prototyping

Wireframing & Prototyping

All the wireframes and high-end prototyping were made in Figma, The screens were all connected and ready for showing the flow processes and had micro-animations to keep the user engaged. The final prototypes waa then shown to the team and the high stakeholders, who after reviewing selected which flow worked best and would be suitable for integration and deployment on a mobile platform.

Digital Guide Chat screen flow

Risk Tolerance and Fund status

Design Highlights

The key highlights was the purple and orange color which is the branding color of the bank and the bright colors of the digital assistant named "Miles" I came up with the name after the team was deliberating which name to assign to it. Using my illustrating techniques I designed "Miles" with a certain type of personality, young, smart, trendy and energetic. He would appear everytime he was invoked for help and assistance. The next phase was to add animation to the character and record voices that would match his styles.

Auto Pilot and Financial goals

The Robo advisor for TFSA and RRSP was very well received by initial users who provided a wealth of information and feedback after user testing conducted at the main office.

Robo-Advisor for TFSA & RRSP

Final Results

The project was well received by the bank. The app was a modern and sleek UI, easy to use by any users and facilitated then in their investment journey with the bank thanks to the digital guide. The ability to link their account with other bank to transfer funds was a definite plus and the simple but yet very easy and engaging page to select a robo advisor TFSA and a robo advisor RRSP was also very well welcomed.