About the project
As people become more accustomed to making payments using consumer mobile applications, they begin to expect the same ease-of-use to be found on corporate applications as well. PNC asked our Masters of Human Computer Interaction team at Carnegie Mellon University to design an initiations function – a way to start a transaction on the go – for their treasury management application, PINACLE Mobile. Through our research, we were able to discover ways to improve the experience of making corporate-level payments using the iPhone, in addition to designing the experience of mobile initiations.
Client
- PNC Financial Services, Corporate and Institutional Banking
- Project for MHCI Capstone at Carnegie Mellon University
-
SPRING & SUMMER 2015
Design Process
Research
To understand how accountants use PINACLE, we visited their offices and conducted contextual inquiries and interviews. We also performed literature reviews, competitive analyses, and heuristic evaluations to obtain background information on the field and how the app currently worked.
Synthesis
We consolidated our research findings using methods such as affinity diagramming and flow consolidation to discover areas of PINACLE Mobile which we could improve and expand.
Iterative Prototyping
We created six iterations of our prototype, starting with paper prototypes and ending with a functional iPhone app. Between each iteration, we conducted think-clouds, A/B tests, and surveys to test and improve the usability of our design.
Research Methods
Heuristic Evaluations
We examined the current PINACLE web and mobile applications and evaluated its usability based on a number of guidelines. After a thorough evaluation, we presented PNC with a number of suggestions for improving the application’s usability. The current app used confusing metaphors for a number of its interactions, including using a card metaphor that did not follow the behavior of physical cards.
In addition to providing suggestions on legibility, focus, and flow, we considered how the current PINACLE app used animation, and concluded that PNC could leverage animation to present qualities integral to PNC’s core brand values, such as reliability and security.
Contextual Inquiries
We directly interviewed the accountants who use PINACLE on a daily basis, and observed their workspace and behaviors. By visiting PINACLE operators’ workplaces, we were able to appreciate how people actually used the application.
The contextual inquiries helped us understand the perspective of an accountant who uses PINACLE, and the problems one might encounter when using the application. Our observations were documented in the form of single-phrase notes, which informed our design decisions during our synthesis. We were able to gather unique data from our users, such as their emotional reactions when using the app, the organization of their workplace, and the other tasks necessary to properly use PINACLE.
Speed Dating
To expand on our research, we went to the annual PINACLE User Conference held in Louisville, Kentucky. In addition to giving a presentation on our research findings to the entire user group, we were able to validate potential concepts we had for the application redesign by performing several speed dating sessions with over twenty participants. This helped us narrow the eight visions we had for PINACLE down to our top three.
Synthesis Methods
Affinity Diagrams
After producing over 500 observation and breakdown notes during our contextual inquiries, we organized them into categories that described notes by intent and task. We came up with twelve areas of observation that ranged from security to communication in the workplace.
Throughout our design process, we returned to the affinity diagram to make certain that our designs remained on track and were supported by the data.
Flow Diagrams
After conducting numerous contextual inquiries, we realized that there were more people involved in corporate transactions than we originally estimated. To see the bigger picture and understand who exactly was influenced by PINACLE, we diagrammed all necessary interactions between all of the people and artifacts involved in the process.
The final diagram on the right shows the essential stakeholders who directly and indirectly use PINACLE. Our research helped us identify the complex network of PINACLE users both within and outside of the bank.
Click to expand
What we Discovered
Our insights helped us focus our designs to address the following opportunity areas.
Opportunity Area 1
Payments dates depend on numerous factors
Opportunity Area 2
Adequate support for verification does not exist
Opportunity Area 3
People must maintain detailed records
Opportunity Area 4
PINACLE does not assist task management
Opportunity Area 5
Communication between parties is inefficient
Prototyping
Due to our NDA with PNC, in-progress and final designs won’t be shown here.
Lo-fi Prototype
After synthesizing the data we gathered from our research, we began designing our prototype by first sketching preliminary flows of how the app would work. We shared each of our designs and discussed which aspects to keep or change before consolidating them into a single flow.
We then translated our sketches in Balsamiq to create an interactive paper prototype. We tested our design with six colleagues, two PNC employees, and three bank clients who used PINACLE, to determine how to improve the application’s usability, efficacy, and appeal. After each testing session, we went back to our prototype to address newly discovered issues.
Mid-fi Prototype
We then created mockups of our lo-fi prototype in Photoshop, using designs that we believed would be close to our final product. Using Flinto, we linked our mockups together and created tasks to test the flow we designed for the application. This allowed us to conduct more complex tasks, as the prototype was more dynamic. We conducted a total of 21 usability tests, to validate the visual hierarchy and flow of our design.
We also conducted some of our tests using eye-tracking software, to determine where on the screen our users’ eyes were focused during each task. This helped us discover which elements of each screen engaged our users’ attention, and informed the placement and color of certain components in the final prototype.
Final Prototype
Our final prototype is an iPhone application built using Ionic and AngularJS. It is a functional application that includes the features we recommended to PNC for their PINACLE redesign. This prototype adds animations and other functionality that allows the user to realistically accomplish tasks they would do at their workplace. We tested the prototype with 16 participants before making final adjustments and delivering the app to PNC to use as a guideline in their PINACLE Mobile development pipeline.
The Team
Matthew Bolaños
Tech Lead
Mirae Kim
Design Co-Lead
Joyce Liú
Project Manager
Tyler Porten
Design Co-Lead
Katarina Shaw
Research Lead
