MHCI Capstone Project with PNC

A comprehensive corporate banking app for accountants

Timeframe

Jan. 2015 – Apr. 2015 (part-time) May 2015 – Aug. 2015 (full-time)

Client

PNC Financial Services Group

Project Type

Capstone project for the Masters of Human-Computer Interaction program.

Team

Matthew Bolaños, Mirae Kim, Joyce Liú, Tyler Porten

My Contributions

UX Research Lead
Designed 9 research and testing activities
Organized 90 sessions with accountants
Evaluated designs
Proposed redesigns
Edited two 40-page reports

We were the first team of UX designers to work on PINACLE Mobile, PNC’s corporate banking app.

Over a period of 6 months, we researched the needs of corporate accountants that use PINACLE everyday to pay vendors and bills. We identified pain points and opportunities, and developed a strategy with short-term and long-term goals.

Our team designed and tested several prototypes with users. We delivered a working iPhone app prototype that showcases our vision for PINACLE Mobile.

Note: Detailed descriptions of the design cannot be shared due to a client NDA.

3-Prong Strategy for PINACLE Mobile

Immediate

Increase PINACLE Mobile’s adoption and improve user retention

User Interface Overhaul

Usability Improvements

Consistent with web application

Mid-term (in 2 years)

Provide access to all essential accounting functions

Enable accountants to initiate payments on their mobile phones

Provide tools that overcome the challenges of working outside of the office

Long-term (5+ years)

Provide features that help accountants with day-to-day tasks

Minimize the day-to-day challenges of accounting

Take advantage of mobile technology

Secure a competitive advantage

Our Solution: User Interface Overhaul

We designed UI improvements that could be implemented immediately to improve PINACLE Mobile’s usability and consistency with the web version.

PINACLE Mobile already has most essential functions.
The only one missing is Payment Initiation.

To make it possible for an accountant to initiate payments from their mobile phone, we needed to enable all of the interactions in a surprisingly complex process.

We observed 16 accountants at different companies to helped us identify all of the people and tools involved. Check out the diagram below to see how these things interact.

The payment initiation process includes checks and balances to prevent errors and embezzlement and requires a lot of documentation for tax audits.

Solution: Our mobile app design accomplished the several goals

1. Facilitate communication between the 6 roles

Vendor

Accounts Payable

Initiator

Approver

Records Clerk

Auditor

2. Provide access to the paper documents that are in their office and make it possible for them document everything

Invoice

Payment Journals

Remittance

Initiation Documentation

Approval Documentation

3. Integrate with the other systems or replace the need for those features

Enterprise Resource Planning (ERP) System

Solution: We used mobile technology to
solve some of the biggest challenges
and secure a competitive advantage

Note: Detailed descriptions of the design cannot be shared due to a client NDA.

28-Week Process

Research

6 research methods helped us to quickly grasp the intricacies of the corporate banking workflow, uncover opportunities for improved efficiency, and identify challenges that accountants face when initiating on the go.

Heuristic Evaluation

We identified 89 critical usability issues through our heuristic evaluation of the current PINACLE web and mobile applications. We presented several recommendations for immediate improvement especially with respect to legibility, information hierarchy, and navigational flow. This was a great way to review the current state of PINACLE and showcase the power of UX design to clients.

Contextual Inquiries

We went directly to 11 accountants who use PINACLE every day to see how it integrates with their workflows. We would never have imagined that payment processing would require so many checks and balances for approval, auxiliary tools like enterprise resource planning (ERP) systems, a dependence on paper documents, or double-checking and, even, re-double-checking efforts! We gained the empathy we needed to advocate for these accountants and drive our best design.

Expert Interviews

We interviewed 5 CFOs to hear their main concerns in corporate banking, especially concerning fraud and differences in international banking practices. They also shared fascinating anecdotal stories that they amassed from years of experience and their visions for the future of corporate banking.

Other Research Methods

Competitive Analysis

We analyzed the mobile applications of 5 direct competitors and 9 personal banking products to discover effective approaches to mobile payment design.

Literature Review

We referenced 23 articles and academic papers which helped us to quickly get up to speed with treasury management strategies and trends.

Influential Analogs

We surveyed popular mobile applications, such as Pinterest and Facebook, to identify mobile design trends that have yet to make it to the corporate banking design space.

Research Synthesis

Research Synthesis activities helped us to review and organize over 500 observations from the contextual inquiries and notes from the expert interviews. We identified workflow inefficiencies, common challenges that accountants face, and unique considerations when designing for accountants. It also helped us to analyze competitive analysis and literature review as it pertained to the corporate banking domain.

Affinity Diagramming

We organized over 500 observations into overarching themes by categorizing each note by intent and task. As we summarized our findings, we made sure to pay careful attention to common observations and notes that we marked as “breakdowns” or challenges that accountants face when using PINACLE. This activity took nearly 20 hours to complete! Yes, it was tiring work, but we found ourselves referencing the Affinity Diagram every day as we envisioned how our design decisions would affect those accountants and resolve the breakdowns.

Consolidated Flow Model

Based on the observations of 11 companies, we created a synthesized flow diagram to capture the end-to-end process of making payments. The diagram exposed the interactions between the many people involved and how tools are passed between them. Each interaction represents a possible breakdown that could stall a payment. For example, slow communication between the payment initiator and approver could cause a delay. We made sure that our designs facilitated these interactions to make the process more efficient.

Territory Mapping

The territory map highlights effective designs that we found during competitive analysis and our review of influential analogs. We hung it in our office to provide inspiration. It encouraged us to push the boundaries of design in the corporate banking domain.

Research Findings

Verification is a crucial task that prevents costly mistakes

Paying the wrong person or the wrong amount might take months to undo and cause unexplainable inaccuracies in auditing reports. At least 2 people verify the manually-entered dollar amounts and 14 digit account numbers before submission. Amounts are recorded in an ERP balance log to ensure accuracy.

Anxiety over missed payments

All interviewed accountants had anxiety over missed payments and even memorized international bank holidays because they could impact automatically scheduled payments.

A heavy reliance on paper despite the desire to “go green”

Even at tech companies, paper documents are ingrained in the workflow. Paper invoices and approval forms are passed around the office and hundreds of pages of records are printed and stored for auditing purposes.

PINACLE has the potential to facilitate secure and automatic communication

The threat of fraud is mitigated through verified communication channels like PINACLE since users must sign in to see messages. Furthermore, accountants want PINACLE to have a larger role in communication. They want automatically-generated notifications that prompt them to complete their part after their colleague is done to minimize the number of tools they need during the initiation process.

Visioning & Concept Validation

We generated 127 concepts that help accountants overcome challenges that they face at work, perform their daily tasks more efficiently, or initiate new payment transactions outside of their office. We presented 8 of the visions to PINACLE operators and to our client to help us select final features.

Storyboards

For each theme in the affinity diagram, we took 5 minutes to independently brainstorm as many ideas as we could. This approach led to 127 concepts. Finally, we tagged 8 visions that we thought met the accountants’ needs best and created cartoon storyboards that represented how the new feature would improve the accountants’ day.

Impact-Feasibility with PNC

Members of the PNC team plotted each vision on the impact-feasibility grid. Some visions were placed in the top right corner, signifying a highly impactful and highly feasible concept that should be pursued. One participant plotted a vision far away from where everyone else put that vision, indicating that from that participant’s unique perspective, they saw an unforeseen implementation challenge.

Speed dating

We used a speed dating format to present 8 of the concepts to 22 PINACLE accountants to see if they could imagine themselves in the scenarios and if the feature’s benefits would be helpful. Their feedback helped us eliminate 3 of the 8 visions.

Prototyping

We followed an iterative design approach with 4 major design cycles. During each 3 week cycle, we designed a new prototype of increasing fidelity and evaluated it with in-person usability testing.

Design Principles

I helped establish these design principles which guided our design decisions.

Place action items at the forefront

PINACLE Mobile should allow operators to quickly interpret what they need to do and access common actions. Operators should only see records that they acted on or are assigned to.

Avoid information overload

PINACLE Mobile should present information with an effective visual hierarchy that does not overwhelm accountants because that would slow them down or cause errors from the distraction.

Minimize training needed

PINACLE operators should be able to use the system with little to no prior training. Operators may not be able to recall complex directions if they only use the app for emergencies, so the designs should be optimized for beginners.

Design Evolution

We followed an iterative design approach with 4 major design cycles, each with a round of usability testing.

Paper Prototypes

To begin, each team member made a paper prototype that integrated the 5 chosen visions. The parallel design process helped us to compare several sitemaps, visual hierarchies, and design alternatives. We then consolidated the best features.

Balsamiq Prototype

To test the basic layout and navigation, we used Balsamiq to render the first digital version of the prototype. The prototype was quick to create because Balsamiq allowed multiple designers to add new screens without the inconsistency of different sketching styles. Usability testers could easily imagine the prototype as a real app because clickable buttons helped them navigate smoothly.

Flinto Prototype

To test the colors, visual hierarchy, button design, and field names we recreated the prototype in Flinto using Photoshop renderings. To usability testing participants, the Flinto app provided a realistic experience without requiring our team to spend time programming a real app. We easily created several versions to A-B test during our eye tracking study which allowed us to further perfect the placement and appearance of elements on the screen.

Working Prototype

We programmed the final prototype using Ionic, a framework for making cross-platform apps using AngularJS and HTML5.The prototype helped us showcase the features exactly how we would recommend them to be implemented. It allowed us usability testers to realistically respond to animations and try complex interactions, such as how easily users input information and upload pictures.

Note: Detailed descriptions of the designs cannot be shared due to a client NDA.

Testing with Users

We tested each version of the prototype with 10-20 participants. We iterated on our designs until participants could complete sample tasks without any guidance and understood how the new features could fit into their existing workflows without explanation. In all, we incorporated feedback from 91 PINACLE operators and fellow designers.

Think-Alouds

We visited participants at their office and asked them to use the prototype to perform sample tasks such as initiating an ACH transaction. This process helped us to verify that the flow of the new features made sense, that the icons clearly introduced the new features, and that the interactions were simple. We performed 33 think-alouds to test all iterations of the prototype.

Eye tracking

We used eye tracking equipment to see where people looked while using the prototype to evaluate the visual hierarchy. It led to discoveries such as the ineffectiveness of directional prompts that were meant to walk new users through a process. People simply did not read them! Testing on new designs demonstrated that we could instead put this information on the “next” buttons to ensure they are read. We performed 9 eye tracking tests using the desktop and glasses versions of the Tobii equipment.

PINACLE User Surveys

We conducted a survey with 81 PINACLE Operators. We tested button icons and prompts to see which were clearest. We also confirmed the receptiveness of new features which helped us to communicate the value of our designs to PNC executives.

Percent of participants who need to initiate new payment transactions in these contexts

Work from home due to a snow storm or inclement weather 75%
At a conference 54%
On vacation for urgent business 38%
Work from home 15%

One finding from the survey is that many participants imagine themselves using PINACLE Mobile in many different contexts outside of their office. We considered how our designs would work each of these contexts, particularly in situations where the accountants feel rushed.

Deliverables

Research Findings and Design Rationale Reports

I was the primary writer of two 50-page reports. The research report showcased the research process and highlight the takeaways. The process of creating this report helped us to evaluate the effectiveness of the research we performed and helped us to pinpoint specific insights to keep in mind during the design phase. The design report included an overview of the proposed features and explanations for the design decisions. This report can be used by our client to help them pitch the concepts for funding and defend proposed designs.

Concept Video

We created a concept video to showcase how the new features will impact accountants. I organized the shoots and provided support on the sets. The first vignette showcased how the new features would help connect accountants to everything they need in their office while initiating on the go. The second vignette illustrated the daily use of the app in the office. The final vignette showed how the features could be expanded upon in the future.

Project Website

We created a public project website that was shared to all PNC employees through their internal newsletter. PNC employees forwarded their praise for our highlighted work. You can visit the website to see this deliverable.

Takeaways

Research Lessons

Develop long-term relationships with research participants to get their most honest feedback.
Have patience with research synthesis. It’s a lengthy process but it’s important for making the research actionable.
Not all research activities will yield surprising findings.

Design and Testing Lessons

Use an effective visual hierarchy to present a lot of information without overwhelming the user.
Propose design alternatives with sketches to help communicate them.
Don’t sweat the details until detail-work becomes the priority. Record small issues for later so you don’t forget them.
Make incremental improvements between usability testers so that known problems do not continue to be distractions.