This is 8 months of Capstone project with PNC Financial Group. I worked as a UX design lead of team F5(refresh). We helped PNC to set itself apart from the rest of the corporate banking world with intuitive mobile application to empower the people who rely on the corporate banking app PINACLE every single day.
I cannot share final designs because of NDA, but please learn about our design process and research findings below.
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
Research Method #1: Heuristic Evaluations
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: Contextual Inquiries
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: Speed Dating
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
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.
Synthesis Method #1: Affinity Diagramming
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 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.
- Numerous factors impact routine payments.
- Adequate support for verification does not exist.
- People must maintain detailed records.
- PINNACLE does not assist task management.
- Communication between parties is inefficient.
Low-fi: Paper Prototypes
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.
Mid-fi: Flinto Prototype
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.
Hi-fi: Ionic Prototype
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.