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.
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
Archive

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

Contextual Inquiries


Expert Interviews

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

Consolidated Flow Model


Territory Mapping

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

Impact-Feasibility with PNC

Speed dating

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
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
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.
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

Eye tracking

PINACLE User Surveys
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%
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.