Case Study: PNC Bank

Adding a Personal finance management tool to an existing product

Role : UX/UI Designer

Problem

The amount of national student loan debt of almost 1.5 trillion, and the threat that millennials may never retire is growing everyday. We are not taught how to manage our money in school, and it can be a challenge to even know where to start. PNC Bank is an east-coast based bank holding company that focuses on financial organization and is now prioritizing the safety of banking online through web and mobile.

Despite their resourceful solutions to personal banking, PNC Bank is one financial services corporation that does not have a personal finance management tool on their mobile app.

Solution

I designed a budgeting tool that would be added to the existing PNC Banking app. This app would allow their customer to organize their money and spend smarter.

Background

PNC has been my bank for over 12 years, so I’ve personally experienced the advancements made towards online banking and transitioning from using ATMs to only using the PNC mobile app. I have never been great at budgeting my money, and I used to just assume that I was doing it right. Time passed and now that I’m a young professional with bills and far more financial responsibilities, I realized it’s a good time to organize my spending. PNC does a great job at showing any incoming or outgoing money on their app. The app was just missing the budgeting tool that it has on its desktop site, although that feature needed to be greatly refined too. One step at a time.

Research

So why did I design a mobile budgeting tool for a bank that already has a one on their desktop version? Well, my target demographic here are Millennials, and my market research showed that In 2018, almost 70 percent of Millennials in the U.S. used mobile banking. According to Forbes.com “18-34 year olds showed higher rates of: being late with mortgage payments, overdrawing checking accounts, and having trouble with medical costs”. To put it plainly, we need to learn how to manage our money and we want to do so on our phones. I needed to understand what features would be useful to add to the PNC app, so I organized a competitive analysis between 5 mobile personal finance management products.

Once I gathered some information and did my best to navigate around the 5 products from the analysis, I could move forward with a short survey that digs a little deeper into the why’s of mobile money budgeting.

The survey was about PFM tools within a banks app or an app dedicated to managing money. The survey was completed by 17 individuals who use PFM apps and those who do not. The majority of the survey was completed by Millennial’s who identify as Female and they do their banking via their banks mobile app. Majority said that they would find it helpful if their bank offered PFM tools, and would like the ability to set financial goals on the app as well as set reminders. When it came to the interface, most chose A (Mint) as the best option. A common reason for that choice was the colors used, and assumed ease of use. The final question was more for me think empathetically and gain a better idea as to what people value when it comes to managing money. There were many common responses, mostly regarding long-term goals. Overall this survey helped me direct my focus moving forward, such as what features I should include in my design and how I can create a great user experience. 

Those results lead me to creating these three personas that represent the target audience.

I chose to explore Miranda, a persona that I felt best reflected my survey findings. I also feel sorry for her and I felt compelled to help. I wanted to amplify her concerns, and the best way was to illustrate them in a storyboard with a relatable narrative.

The next step was to determine how I wanted the user to interact with the new features in an existing app. I thought up these three taskflows as well as a userflow to start thinking about the steps one would take when interacting with the features.

Design

Even though I wasn’t designing this app from scratch, I did have to find a way to integrate the new features seamlessly. I began with quick, rough sketches of patterns I’ve seen during my competitive analysis. Many of the apps that are not tied to a bank have very fun and energetic design, which can influence the users interactions with the app. If the budgeting app can make the task of managing money feel like an enjoyable experience through design, then people could want to use it…unless you’re a left side brain kinda person and just enjoy organizing numbers regardless of an apps aesthetic, good on ya.

I moved on to creating Sketch wireframes to explore some feature ideas further and conducted user testing. The results of the user testing proved that I needed to develop the design a bit more, and dig deeper into what creating a new budget looked like and how it would mould into the app.

Integrating the feature

I designed the pages that would be used in my user testing. Here is the Account, or landing page, followed by three different flows to be tested. Viewing transactions within a budget, Creating a new budget, and changing the month being viewed.

Shown here is the Account page and the menu open, all as close to PNCs existing app. There is also a flow for creating a new goal. Everything within the hi-fidelity wireframes are inspired by the persona, Miranda, and how she would interact with the app.

I used Maze to create my user testing experience and Invision to build the prototype itself. Above is an overview of my main task, creating a new budget. As you can see, there was I high misclick rate! There was some redundancy with my symbols and that caused some confusion with the prototype.

To correct this, I would remove the vertical dot, or“more options” symbol next to FOOD and SHOPPING. The user will tap on SHOPPING, and they would be directed to a page displaying all of the budgets they have under that category. Back at the BUDGET page, there is now a higher chance that the user will tap the “add” symbol to create a new budget.

Impact and Lessons Learned

Even though PNC has prioritized efficient online banking on web and mobile, they were just missing a key feature that everyone should be using nowadays. Now, this is only a conceptual design project, but this added budgeting feature would make their app quite an exceptional banking tool.

Had I been given a longer timeline, I would have fully integrated the corrections I had designed post-user testing into my hi-fidelity prototype. Ideally I would like to test with everyone that had previously participated, just to see if they would choose the ideal path. Designing this feature and having to follow the patterns in an existing app was thought-provoking to say the least, and I now appreciate the challenge of working with and altering a company’s product.