The Future of PNC
Where PNC is headed and how we helped.
PNC currently faces the challenge of adapting to new trends within both the consumer and corporate worlds. Customers have come to expect simplification from their mobile applications while policies allowing employees to bring their own devices have created a rich new ecosystem for mobile devices to thrive in. Both of these factors have put pressure on B2B services, like PNC, to provide exceptional mobile experiences.
Many of the first generation mobile platforms by PNC and its direct competitors are a response to these recent trends. Unfortunately, most of these early applications fall short. Mobile versions miss features common on desktop, and many of the applications fail to provide the same level of polish and ease-of-use as other consumer applications, such as Facebook, Twitter, and Google. By addressing these issues and holding its mobile applications at the same standards as consumer applications, PNC could easily set itself apart from the rest of the banking world.
Designing for Mobile Initations
To complete a financial transaction, a company must first perform a payment initiation, which provides details like the receiver and the amount due. PINACLE mobile, PNC’s app for corporate banking, does not currently support this crucial first step, which is why PNC came to us. By providing initiation, customers could finally work away from their desktops and complete a payment entirely on a mobile device.
Our design process…
The steps we took to ensure our solution solved real problems for real people.
By performing literature reviews, competitive analysis, heuristic evaluations, and most importantly contextual inquiries, we learned how accountants truly work with PINACLE.
After research, we consolidated our findings with the help of affinity diagramming and flow consolidation to discover opportunity areas that we could address through our final solution.
Throughout the development of our prototypes, we performed think-alouds, surveys, and A/B tests to iron out pain-points to ultimately arrive at our final prototype for PNC.
Basing our designs on user research.
Research Method #1
We performed a heuristic evaluation of the current PINACLE web and mobile applications to identify usability issues. Most notably we notified PNC of confusing metaphors that the app used. For example, the predominant card metaphor within the app behaved inconsistently with physical cards.
Additionally, we evaluated PINACLE’s current use of animation. We determined that PNC could better leverage animation to convey traits integral to PNC’s brand, like reliability and secureness. Other topics included legibility, focus, and flow.
Research Method #2
We went directly to the people who use PINACLE everyday and performed contextual inquiries. By observing how PINACLE impacts their day-to-day work we uncovering how people actually use PINACLE.
The contextual inquiries helped us grasp the context and complexities of PINACLE customers’ work. We documented over 500 notes and used them to inform our design decisions during the synthesis phase. The data we collected included aspects typically not shared, such as emotions, descriptions of workplace environments, and observations of other processes required to properly interact with PINACLE.
Research Method #3
To validate different potential visions for the future of PINACLE we went to the PINACLE user group conference in Louisville, Kentucky. While we were there I gave a presentation on the future of PINACLE and during breaks we performed several speed dating sessions with over 20 participants.
With the help of speed dating, we narrowed our visions down to our top three.
Research Method #4
Eye tracking equipment was used to see where people looked while using the prototype. It helped us to see if participants noticed certain aspects of the design and if the informational hierarchy of the page helped them to see important items quickly. We performed 9 eye tracking tests using the web and glasses versions of the Tobii equipment.
The synthesis techniques we deployed to analyze and comprehend the data.
Synthesis Method #1
We organized over 500 observations and breakdowns into overarching themes by categorizing each note by intent and task. Once we were done, we had 12 different distinct areas ranging from security to communication in the office.
We referenced the affinity diagram throughout our design process in order to ensure each of our design decisions were grounded in data.
Synthesis Method #2
Life of a Transaction
To create an effective mobile experience, we had to understand all of the players involved when completing a transaction. To achieve this, we diagrammed all of the interactions necessary between all of the the people and artifacts involved.
On the left are the stakeholders who primarily interact with PINACLE. Through our research, however, we learned that many more people are needed to complete a single transaction, including vendors, managers, and auditors.
After consolidating all of our results we came up with the following insights.
Opportunity Area 1
Numerous factors impact routine payments.
Opportunity Area 2
Adequate support for verification does not exist.
Opportunity Area 3
People must maintain detailed records.
Opportunity Area 4
PINNACLE does not assist task management.
Opportunity Area 5
Communication between parties is inefficient.
From paper to final prototype.
Each team member began by first making a version of the visions we wanted to pursue. After each had created his or her own prototype we discussed the merits of each before consolidating them down into a singular vision of the app.
Afterwards, we imported the drawings into balsamiq so that we could test the usability, usefulness, and desirability of our application. In total, we tested the prototype with six other peers, two employees of PNC, and three actual users of PINACLE. Between each usability test we made significant improvements.
We then wanted to test the visual components of our application and see whether or not the colors were appropriate, the visual hierarchy was strong enough, and if the animations resonated with the operators.
To achieve this we developed a prototype within Flinto. With Flinto, we were able to create a more realistic application yet avoided having to spend time programming a real app. We also used our mid-fidelity application during our eye tracking study which allowed us to further perfect the placement and appearance of elements on the screen.
As the technology lead, I opted to program the final prototype within Ionic, a framework built on top of AngularJS and Cordova. With Ionic, we were able to develop a functional application that presented all of the features we designed exactly how we would recommend them to be implemented.
All screens were created with the final color palette, icons, fields, button labels, direction prompts, content placeholders, and animations. Moreover, with the final prototype, the user could, for the first time, realistically input information and take pictures with his or her mobile device.
The people who made this project a reality.
While designing the solution for PNC, each of us took an equal role in determining the direction of the design and where it ultimately headed. My main contributions can be seen on the right. Shoutouts to Mirae and Tyler for keeping our designs on track, Joyce Líu for making sure our team did not implode, and to Katarina for managing all of the research participants.
Provided research on analogous apps
Conducted several contextual inquiries
Helped synthesize data
Generated the “Life of Transaction” infographic
Gave our team’s presentation at the PINACLE annual conference
Developed our final prototype with the Ionic platform
Served as the primary photographer
Setup project website
Gave the final presentation to several PNC executives