Making Commercial Card onboarding easier
PNC Bank’s Commercial Card clients currently undergo a long and complex onboarding process. Our capstone team was brought on board to envision an expedited & streamlined experience for PNC and their corporate clients.
As the design lead, I guided the visual look of our high-fidelity prototypes to ensure consistency and designed our final design report. In addition to this, I:
» Aided the research leads by conducting usability tests (remote and in person), as well as user interviews and concept validation sessions, in order to uncover design opportunities.
» Created wireframes using Balsamiq Mockups, clickable prototypes using InVision and Atomic.io, and implemented the Card Program Wizard using Framer.js
» Acted as the client liaison between our team & our client sponsors, and organized & scheduled interviews and meetings.
“This project was successful (…) it is going to happen at PNC and is slated for implementation and is on everyone’s roadmap.”
-PNC Bank Treasury Management Group
Our design aims to achieve faster revenue generation and a better client experience on one of PNC’s most profitable products. The current onboarding process is slow (it might take from 6 weeks to a year) and complex, which affects the client’s experience and the speed at which new clients can be signed up.
In order to understand the field and how onboarding worked at PNC, we started out by defining the questions we needed to understand, and chose the the research methods that would aid us uncover design opportunities.
Our research synthesis gave us an insight into why the process is long and inefficient:
The process is decentralized and inaccessible for some teams.
There is no clear protocol for employees to follow.
The client’s data is not effectively propagated or stored.
The client has no fixed point of contact at PNC.
Clients don’t have clear instructions.
Given that there are about 12 teams involved in Commercial Card, we scoped down our solution to three roles. These were chosen based on the impact they have in the onboarding process as well as our usability tests results:
Card Program Wizard
PNC clients (current/prospective)
earn at least $10MM-$30MM
in annual revenue.
Sales Officer (TMO)
are the main point of contact
with clients before
deals are secured.
Sales Associates (SA)
support the TMOs by processing
Keystone is our vision for the future of PNC Commercial Card onboarding: a central system that consists of a client-facing Card Program Wizard, which captures client input, as well as an Internal System that contains onboarding profiles and neatly packages all the information to create custom card programs. Each role involved in the process has a dedicated interface that supports its responsibilities in onboarding.
Card Program Wizard
The first touchpoint in the onboarding process for the client is the Card Program Wizard, which allows prospective smaller corporate clients to find the best card solution for their needs.
By answering step-by-step questions and receiving immediate feedback, clients can receive a summary of their answers/match found and have a more informed conversation with their dedicated PNC Sales Officer.
Once the Sales Officer (or TMO) receives the client’s answers, they will receive a notification in their own view of Keystone’s internal system.
The notification will lead the Sales officer to the client’s new onboarding profile, where they will be able to track the sales progress and the clients’ details.
Keystone facilitates the Sales Associate’s job of compiling client information accurately and overseeing the client’s progress till the end of implementation.
The Process: Research
Interviews & Contextual inquiries: Understanding each team’s role
Interviews were our primary research method. We wanted to understand different teams’ role in the onboarding process, and their perspective on other teams and the client’s responsibility.
We spoke to 24 PNC employees, including salespeople, sales associates, contracts team, implementation managers & engineers and others. Their insights led us to understand their roles and perspectives on the process.
In order to comprehend the tools used, we observed employees using internal systems at PNC Tower and PNC Firstside Center. We examined their daily tasks, the steps required to complete them, and the many information handoffs. This allowed us to find breakdowns and estimate the complexity of steps.
Analogous Domains: Understanding complex onboarding processes
Due to our limited access to PNC Commercial Card clients, it was imperative to examine the customer experience of analogous onboarding processes in other industries. We identified three domains of interest: health insurance, car sales, and visa applications. Interactions in each field involve the transfer of complex information shared with multiple people through various stages over time, a clear parallel to those of card onboarding.
Models & Affinity Diagram: Finding design opportunities
We synthesized our interviews by modeling the workflow from each interviewee’s point of view while reviewing our notes and audio recordings.
We created models based on the sequence, flow and culture of the onboarding process based on our findings.
Our interviews resulted in a total of over 1500 short notes. In order to yield valuable insights from this information, we created an affinity diagram: an organization of interview notes in a three-level hierarchy by grouping them under meaningful categories to quickly identify key issues and stimulate design ideas.
Storyboards: Validating our findings
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.
Three team members in the middle of a session with a PNC employee.
Visioning & Concept validation
Once the main research phase was finished, we started visioning on possible solutions for each of our research findings. These visions were based on our spring presentation with PNC executives, as well as design ideas from our affinity diagram.
Validating our concepts
In order to test our assumptions, provoke reactions and find common needs in the onboarding process, we “speed-dated” our concepts with 9 PNC employees and 3 clients. Two visions stood out based on the feedback we received: a centralized internal system and a client-facing system.
Prototyping & usability testing
We started out by focusing on the Sales Officer and Client views. We sketched each screen’s content, information architecture and user flow. We translated these into Balsamiq prototypes to test with employees and clients. After testing functionality and content, we moved on to Sketch comps that were mocked up using InVision. Out hi-fi prototypes were made in Framer in order to do live demos.
Screen fidelities: an overview
Wireframes (Balsamiq & InVision)
Mid fidelity (Sketch & InVision)
High fidelity (Sketch & Framer.js)
Card Program Wizard: Summary vs. Immediate feedback
To address the lack of clear instructions and guidance for clients, the Wizard breaks down each of the card benefits. The usability tests showed that summaries were not as effective as we assumed.
Clients preferred reading the questionnaire summary on their own time and felt overwhelmed by this information.
By receiving available card benefits based on their answer, the client was able to easily understand PNC card’s flexibility and how it will benefit their company’s finances.
Internal System: Progress bar
To address the lack of consistent client data propagation and fixed point of contact, we came up with a progress tracker. The sales officer will be able to let the client know the progress of their card onboarding.
The initial progress tracker was laid out vertically. Employees from different teams were confused about their responsibility within each stage and were unclear as to whether they needed to keep track of other teams.
The following prototype iterations had a horizontal and color-coded progress tracker. All the major milestones within each stage were included in a much more linear way.
With our proposed solution, we aim to:
» Speed up revenue generation for Card Services by expediting the onboarding process
» Streamline the onboarding workflow and information handoffs between teams within PNC
» Provide a better experience to clients by giving them more agency
Moving forward with this work, we see PNC revolutionizing not only the card onboarding process, but their competitive standing in corporate banking.