PNC Online Banking Redesign

Working within security, technical, and legal limitations whilst still allowing research and data to drive the creation of an intuitive banking platform.

Role: Senior Product Designer

Problem:

The financial sector is filled with countless technical, legal, and security constraints that have prevented these companies from modernizing. At Prophet Agency, we faced these same problems when redesigning the payment platform for the world bank PNC. Despite these roadblocks, we still wanted to design a platform that exceeded the clients expectations and accomplished our overall goal:

Create an intuitive experience that enables users to complete tasks more efficiently, and empower them to make data-driven decisions to impact immediate and future business success.

Research and Information Architecture:

Phase 1: Review existing client research obtained prior to kick off and conduct additional client/customer research as needed to determine overall redesign objectives.

The following is an excerpt from the interview script we used with PNC customers that was aimed to further understand how they generally use the platform:

Phase 2: Project roadmap and conduct Design Workshop to rapidly generate ideas across various platform use cases and user tasks.

We conducted recurring workshops with the client in order to further develop the project roadmap, key problem areas, and to brainstorm potential solutions.  

Phase 3: Converge on key problem areas to address for business/client impact and clarify success metrics.

One of the pain points that surfaced through our client and customer research was based around a mandatory security measure. In summary, as an added layer of security many banks access an online database called Fiserv that validates both users and accounts prior to a customer making a payment. This process did not happen instantaneously and therefore caused friction and confusion at multiple points throughout the payment experience. As an unavoidable step, we were forced to develop a creative and intuitive solution that allowed users to make payments whilst their information was being validated and protected in the background.

The flow diagrams below demonstrate the roadblocks a user may encounter due to the constraints created by Firserv:

Found in Fiserv.png
Not found in Fiserv.png

Ideate:

Information from the research phase was then synthesized into experience journey maps that defined user journeys, micro-moments and touchpoints. This flow demonstrated our understanding of the complex problems surrounding Fiserv, and more importantly our intuitive solutions.

Current State Blueprint_ Payments.png

Wireframes:

User Journey Maps were translated into wireframes and eventually interactive prototypes which were then rapidly refined through an iterative testing process. Below is an example of the ‘Payments’ journey that was translated into both mobile and desktop wireframes and eventually a prototype for user testing:

Desktop

Mobile

User Testing Results:

These results demonstrated that our proposed User Flow solved the issues surrounding Fiserv in a frictionless and intuitive way.