pnc-cover.jpg

Keystone

Keystone

 

Project Details

Team size: 4 

Duration: 7 months (Jan 2016 - Aug 2016)

Role: Planning, executing, and analyzing UX Research; creating high-fidelity mockups, animations, and project website.

Research skills: interviews, research synthesis, requirements gathering, visioning, storyboarding, service blueprint

Design skills: information architecture, wireframing, lo-fi & hi-fi prototyping, graphic design, web design

Introduction

PNC Commercial Card solutions are sought after for their state-of-the-art technology and attractive benefits. However, the card onboarding process suffers from inefficiency due to long delays, miscommunications, and rework. We envisioned a solution that pinpoints key issues and provides actionable insights for PNC to provide a better client experience for one of the most profitable products.

 

Problem Space

We were initially given the following prompt: digitize a largely paper-based onboarding process to generate a streamlined workflow.

Ultimately, we determined that paper is not the issue— in fact, much of the paperwork exists in digital form. Our research unveiled five key issues that could serve as opportunity areas for change.

pnc2.jpg

Decentralized and Disorganized

The onboarding process lacks a uniformly accessible system for tracking its progress for the client and PNC 

Absence of a Clear Protocol

The division of role responsibilities and information handoffs between teams is not consistent 

Inconsistent data propagation

Communications between PNC and the client are not effectively stored, retrieved, or forwarded inside PNC 

No Fixed Point of Contact

The client does not have a fixed point of contact guiding them throughout the entire process 

Clients Need Simple Instructions

Clients benefit from clearly defined and accessible directions to navigate an already complicated process

 

Deliverables

In architecture, the Keystone is the most vital piece in the construction of a masonry arch; without it, the arch cannot support itself. Likewise, our system centrally binds together all the components of a complex process.

 A high-level overview of our proposed customer onboarding system.

A high-level overview of our proposed customer onboarding system.

Card Program Wizard

pnc5.png
It’s nice to be able to see the progress on my cards from a portal like this. I had to make many phone calls to PNC to find out when I was onboarding.
— Commercial Segment Customer

Understanding financial terms can be challenging for commercial card clients. With Keystone, the client’s first touchpoint is a product decision tree that collects basic information to determine their card program fit. 

 Communications via email can get buried quickly in overflowing inboxes. With Keystone’s dedicated client portal, the client can easily access all instructions and documents from PNC in one secure place.

Communications via email can get buried quickly in overflowing inboxes. With Keystone’s dedicated client portal, the client can easily access all instructions and documents from PNC in one secure place.

By using simple language, step-by-step instructions and immediate feedback, we prepare the client for a follow-up call with the Sales Officer.  

The client feels more confident and knowledgeable going in, and the Sales Officer is better equipped to sell the right program. 

 

INTERNAL SYSTEM

pnc6.gif

Sales Dashboard

Keystone's dashboard displays the Sales Officer's current action items and active clients. This centralization keeps them updated and allows quick task execution. 

Onboarding Profile

Currently, multiple people enter client information into several different systems, which naturally leads to redundancies and mistakes. Collecting all relevant data in one place facilitates organization and accuracy.

Resource Manager

An easy drag-and-drop interface allows the Implementation Manager to quickly assign implementations coming down the pipeline to a suitable Engineer on their team.

Additionally, both Managers and Engineers are given access to the onboarding profile shown previously for client information required for implementation.

 
pnc8.gif
 

REDEFINED WORKFLOW

pnc9.png

One of our most important deliverables was to provide a detailed service blueprint that not only streamlined the current onboarding process, but also demonstrated how Keystone could be easily integrated into it.

 

VALUE PROPOSITION

pnc10.png

Implementing a comprehensive system like Keystone is an immense undertaking. PNC can use our work as a basis for a complete information architecture.

  • The product decision tree can be created independently and tested with commercial clients in the near future
  • Sales Officers can use captured data to better communicate the client’s needs down the pipeline
  • Resource management for Engineers would be greatly facilitated by workload visualizations 

Moving forward with this work, we see PNC revolutionizing not only the card onboarding process, but their competitive standing in corporate banking.

 

RESEARCH

The purpose of the project's research phase was to build a strong foundation to guide future design directions. Our overarching goals were to:

  • Unpack PNC's Commercial Card onboarding process
  • Empathize with stakeholder perspectives
  • Discover current breakdowns due to human or technological error
  • Identify and opportunity areas that will inform a possible solution
 

UNDERSTANDING THE PROBLEM SPACE

pnc11.png

Literature Review

Reading articles, reports, and other literature helped us determine that a great onboarding experience is the key service differentiator for clients, who conduct personal banking online and expect corporate banking to be similarly accessible.

Analogous Domains

We identified three domains of interest: health insurance, car sales, and U.S. visa applications. Each domain's onboarding process involves information collected and shared by many people through various systems over long periods of time.

Competitive Analysis

We assessed some of PNC’s direct competitors and compiled the current range of corporate card offerings. Since directly comparing internal processes was not feasible, we evaluated the usability of corporate card applications available online.

 

TAKING A CLOSER LOOK

Interviews & Contextual Inquiry

We spoke with PNC employees whose work involved card onboarding at different capacities, ranging from occasional to full time. Because the process is so complex, it was necessary to create a broad system view for ourselves before narrowing our design scope to just the primary users.

Heuristic Evaluation

We did a heuristic evaluation of PNC's current onboarding systems. Results revealed they often lacked of field validation, interface consistency, and visual organization.

 

SYNTHESIZING DATA

pnc12.jpg

Models

We modeled the onboarding process from each interviewee's POV by reviewing our notes and audio recordings. Individual models were then consolidated into one model collectively representing the entire onboarding process. 

pnc13.png

Affinity Diagram

We organized our interview notes in a three-level hierarchy by grouping them under meaningful categories to quickly identify key issues and generate future design ideas. Once we determined what seemed like the most pressing issues, findings validation was the logical next step in our research.

We returned to PNC intending to see which problems provoked what types of responses. Each salesperson was presented with a scenario derived from our findings in storyboard form. The results from these sessions informed our choice to feature five major findings from our research.

 

DESIGN

Upon completion of the research phase, our overarching goals were to:

  • Verify and prioritize opportunity areas with clients and PNC employees.
  • Create lo-fi, mid-fi, and hi-fi prototypes through iterative design and user testing
  • Finalize a vision for the future of PNC Commercial Card onboarding

Visioning

At the culmination of our research, it was time to use our analyses to generate design ideas. We invited our PNC mentors and guests to do a visioning session with us. In order to do this, we used three methods to gauge PNC’s reaction to the opportunity areas we identified and vocalize their concerns. Overall, these exercises helped scope and prioritize our design ideas.

 
pnc18.png

We did our own Cost/Benefit analysis, with the axes of cost (to us in time and effort) and benefit (impact on the onboarding process). Considering our research and production timeframe, simply reorganizing
the current workflow was going to be ineffective.

Due to the many variables to account for, a solution without a total system redesign would inherently be incomplete. Using the insights we gained from our visioning session with PNC, we also generated many of our own visions.

pnc17.png

Storyboarding & Concept Validation

Five visions generated through our visioning session were turned into storyboards. To create our project scope, we did “speed-dated” the storyboards with 9 PNC employees and 3 of their clients either remotely or in person.

Two out of the five visions received the most positive feedback. As a matter of fact, they could be incorporated together in one coherent workflow— thus we moved forward with both.

pnc15.png

Vision 1: A central internal system for PNC employees to work on card programs. Information is captured and communicated reliably between teams. Features like pre-populated fields and error validation are incorporated to create workflow efficiency.

Vision 4: A client facing portal that helps clients understand the basics of PNC card services, including offered benefits, customizable features, and enrollment guidelines.

pnc14.png

Prototyping

Each of our prototypes were developed through a similar process. We began by creating the prototype’s content and purpose, information architecture, user flow between screens, and finished with layout and visuals.

The first stage for the client prototype was to figure out the decision tree.Paper prototypes were turned into wireframes using Balsamiq Mockups to test the question wordings and flow with PNC employees and clients for content clarity and overall usability.

 At each stage, we narrowed down the scope and features to include in the high fidelity prototype

At each stage, we narrowed down the scope and features to include in the high fidelity prototype

Positive feedback led us to develop a more detailed version. We used Sketch to take a first stab at the visual design and used Atomic.io to add interactivity to our screens and test their usability.

The last step was to finalize the visual details, including branding and animation. We refined the mid-fidelity screens made in Sketch and implemented interactivity with a browser-based prototype using FramerJS.

 

USABILITY TESTING

Using digital prototyping tools, we created interactive views of the internal system. We tested these prototypes with PNC employees in those respective roles.

To check the interfaces’ usability, we tested them using cognitive walkthroughs with fellow students. The results of our usability tests were important in determining the final details for each prototype.