Snapshot

Working for PNC Bank as a Digital Experience Design Intern focusing on User Interface Design, Digital Prototyping, and Competitive Assessment.

🔎 Introduction

Snapshot is a proposed new feature for PNC Mobile Banking. Snapshot seeks to provide users with a quick, convienient overview of their account activity. This is accomplished through the thoughtful implementation of data visualization.

🔎 Approach

By assessing PNC's Mobile Banking experience, and considering the strengths, weaknesses, and features of their competitors, I was able to synthesize a key area in which PNC could improve - data visualization.

🔎 My Role

This project was entirely my own - from the ideation, to the research, and the design of the experience. I enjoyed being able to experiment with ideas, make decisions, and approach the problem my own way. I worked on this project on my own time - during slow days in the office and during lunch breaks. I had a desire to learn how to use Sketch, and through this project, taught myself.

🔎 Duration

June 2018 - August 2018

🔎 Project Team

John Falcone

🔎 Tools

Sketch // Competitive Analysis // PowerPoint

01     -     Background

Snapshot attempts to address a gap in the PNC Mobile and Online Banking Experience. While the current online experience is comprehensive, if the user wants a visual or quick-read overview of their accounts, there aren’t many obvious or efficient ways to do so. There’s no quick-view detailed income/expense breakdown in the environment. If a user wants a visualization or breakdown of transaction/financial history, they’d have to put it together themselves or use a third-party app. Snapshot offers a destination for PNC Mobile Banking users to get a quick, easily understandable overview (snapshot) of what’s been going on with their transaction activity, be it recent or historical.

Task: Create a feature for the PNC Mobile Banking experience that would provide users with an overview of their account activity, with an emphasis on visualization.

02     -     Implementation

Snapshot would be integrated within the PNC Mobile Banking App, as opposed to being treated as a standalone app or product. This would provide current users of PNC products with a one-stop destination for account and expenses overview, while keeping users within the digital banking environment they’re already familiar with. Keeping users within the PNC environment also allows them access to advanced or protected services should they need to perform a protected activity (online/mobile check depositing, for example).

03     -     Research and Personas

Before I conceptualized Snapshot, I took time to ensure that the frame of the project was properly identified. This called upon the need to understand current PNC Mobile Banking users - including what they did like, did not like, and wished for in future iterations of the app. On top of understanding their desires as user, framing and classifying user archetypes (personas) helped keep clear which types of user I'd be designing for. Throughout the research process, two key questions guided my thinking:

What do current users want and expect from the PNC Mobile Banking experience? 

and

How might we improve the PNC Mobile Banking experience for these users?  

Snapshot would be integrated within PNC Online Banking and the PNC Mobile Banking App, as opposed to being treated as a standalone app or product. This would provide current users of PNC products with a one-stop destination for account and expenses overview, while keeping users within the digital banking environment they’re already familiar with. Keeping users within the PNC environment also allows them access to advanced or protected services should they need to perform a protected activity (online/mobile check depositing, for example).

Jane-Doe
John-Doe

04     -     Competitive Analysis

The core of the design research for this project is the competitive analysis. By taking a deep dive into what PNC’s competitors are doing in this space, an informed understanding of customer expectations and the areas of opportunity for PNC can be drawn from the analysis.

Understanding the competitive landscape provides insight into what users expect from a mobile banking experience - and what might draw them to a different bank.

For this analysis, three mobile banking platforms were researched. These platforms include those of two of PNC’s direct retail banking competitors, Wells Fargo and Bank of America, and the widely-popular personal finance app Mint, developed by Intuit. Screenshots of the researched platforms have been excluded from this report - but the write-ups can be found below!

Snapshot-Write-Up-5
Snapshot-Write-Up-6
Snapshot-Write-Up-7

Through the analysis of Wells Fargo, Bank of America, and Mint, a standout key factor was identified accross all three platforms - a factor which was notably absent in PNC's Mobile Banking experience. All three of these platforms, in vary degrees, incorporated information visualization in a way that greatly enhanced the ease-of-use and quick-look capabilities of their apps.

 

Data Visualization was identified as a major opportunity area for the PNC Mobile Banking experience.  

 

Having framed the opputunity area for PNC when compared to its competitors, the process of brainstorming potential solutions with which to capitalize on this oppurtunity area began.

05     -     Brainstorming & Sketching

Having a solid understanding of the competitive landscape and Mininum Viable Product definitions, I started brainstorming how I'd like Snapshot to function and work in a mobile setting. Below are some of my sketches and notes from the brainstorming process. Initially, I pictuerd the experince being an all-in-one page Tiled experience (akin to the Snapchat explore page). That's why multiple instances of a 2x2 grid appear on some of these pages. I ditched this design after not liking how it appeared in the Lo-Fi renderings, and opted with a more traditional (and on brand with PNC Visual ID) design.

img_7186-Edited
img_7187-Edited
img_7188-Edited
img_7189-Edited
img_7190-Edited
img_7188-Edited

06     -     Lo-Fi Mockups

After working out a very general idea of how I'd like Snapshot to work and look, I got working in Sketch to come up with some basic Lo/Medium-Fi renderings. Check them out below - you'll notice that, from the above sketches,  the Visualization Element (bar graphs) and Balance/Expenses/Income architechture have been used in these renderings. As I alluded to above, a good part of this design was inspired by the rest of the environment within the PNC Mobile Banking App. In order to make this design one that would fit right into this environment, I stuck to the PNC standard with the layout and panel design.

Final – Lofi 1
Final – Lofi 2
Final – Lofi 3
Final – Lofi 4

07     -     Hi-Fi Mockups

Drawing inspiration from the renderings, the final Hi-Fi mockups capture how the design challenges I set out to solve were addressed, and in a way that could fit seamlessly into the PNC Mobile Banking enviroment already in place. The visualization element is still there - however, it's been changed from a bar chart to a traditional graph, more effective at representing the "trends" of your finances. The colors were all pulled from PNC's brand identity library. This design, I truly beleive, has successfully created a quick-stop portal through which Mobile Banking users would be able to quickly review their balance, income, and spending, while gaining a better understanding of how their financial behavior compares to their own historical trends.

Final – Hifi 1
Final – Hifi 3
Final – Hifi 2
Final – Hifi 6
Final – Hifi 7
Final – Hifi 4

08     -     Hi-Res Screen Renderings

Front-Mock-1
Front-Mock-4
Front-Mock-5

09     -     Conclusion

Through working on Snapshot, I'm happy to have been able to walk through the entirety of the Experience/Interface Design process. I've learned a ton along the way - from how to assess oppurtunity areas, how to design a solution around these oppurtunity areas, how to understand and act on the actions of competitors, how to use Sketch... I could definitely name more. But most of all, seeing this design project to completion made me realize how much enjoy designing solutions. With Snapshot having laid the foundation, I'm excited to see what kinds of products I'll be able to help design in my future work.

All rights reserved. © 2019 John Falcone.