PNC Comparison Tool Redesign
During my summer internship, I led the proposed redesign of PNC’s web comparison tool for an improved experience on desktop and mobile.
Due to previous agreements, the designs shown here do not contain any PNC assets or branding.
PNC’s comparison tool lives on PNC.com and can be accessed through pages for various products such as credit cards and bank accounts. The tool itself is one of the most-used apps on PNC.com.
This was one of three large parallel projects I worked on during my eight-week internship. I handled the project’s beginning phases all the way through hand-off at the end of my internship. I was the project lead during all stages up to the end of my internship.
Identifying Stakeholders and Needs
To begin analyzing different stakeholders and needs, I started with a base level binary classification of users: those who have and those who haven’t applied for a credit card in the past. Users who are applying for their first credit card generally need more guidance through the process of shopping for cards, while users who have experience shopping for cards need more autonomy and know what they’re looking for.
Identifying Pain Points + Opportunities
When I was assigned the project, PNC had already done extensive user testing on their existing comparison template. Here were some of the most pertinent concerns and suggestions for moving forward, both from my own personal audit of the tool, as well as concerns that arose from user testing and interviewing.
Lack of user autonomy.
The existing doesn’t allow for any user-autonomy. Once a user clicks compare from the product router page, they were immediately taken to a comparison table with three products pre-selected. Users aren’t able to first build their comparison.
Confusing Comparison Editor
Users were highly confused by the comparison editor, used to modify a comparison. Users found it hidden and out of the way,
Compromised on Mobile.
The previous template has a severely compromised experience on mobile, and different products can’t be compared side-to-side. Users must instead view a single product at a time through a drop-down interface.
In order to understand more about how other financial institutions laid out the information architecture for their comparison tables, I created an InVision board with a color-coded system to compare how different companies ordered information in their comparison templates. I also consulted published industry research to see which categories (fees, benefits, etc), were most important to customers when shopping for a credit card.
After doing my research, I synthesized several key ideas—
Allow users to choose and customize their product selections before viewing the table. Embed cues so that the comparison feels fully customizable.
Equity on Mobile.
The redesign must be created with mobile in mind, and support side-by-side comparisons on mobile platforms.
Improved Visual Hierarchy.
Creating such an information-dense tool—especially on mobile—is no easy feat. I knew paying extra attention to the details regarding typography and information hierarchy would be important.
Revamping the User Flow
I began the re-design process by re-organizing and improving the user flow.
The old user flow took users directly from the product router page to a comparison table with pre-filled selections. Users could not make any selections or “shop” before seeing the table. For example, this user flow requires an extra step if the user would like to compare Card B to Cards A and D. This is a huge point of friction, especially if the specific product the user wished to compare wasn’t in the pre-filled selection, or if the user only wishes to compare two products.
The new user flow adds a change to the product router page with more granular compare call-to-actions. When a user decides to compare Card B for example, a new mid-step comparison builder interface allows users to choose exactly which products they’d like to compare with Card B. In this case, the user wants to compare Cards B, A, and D.
Wireframing and Design Process
Comparison Builder Interface
I explored two different comparison interfaces to allow users to build their comparison. This did not exist previously in the old design.
This interface slides up from the bottom of the screen when a user starts creating a comparison. It sits on the bottom edge of the screen, allowing the user to continue scrolling on the product router page.
This interface presents a modal window where users create their comparison all in one step. When the user clicks “Compare” next to a specific product, the modal window is pre-populated with that initial selection, providing immediate context to their comparison building experience.
Product Comparison Suggestions on Desktop
In designing the interface for building the comparison, I experimented with building in product suggestions. My research found that consumers often have specific comparisons in mind, or that they think of specific categories when it comes to cards (“points,” “miles,” “cashback,” etc). I wanted to explore how I could aid in creating these comparisons for the user, especially if PNC gradually expands their card lineup and logical comparisons become harder to find.
Comparison Table Interface
Adding and removing products
The new interface for adding and removing products is directly built into the table. Since the maximum number of comparisons is between three different products, options for adding products are displayed in one of the empty column(s) whenever the table is not fully populated. An “x” clearly communicates how users can remove products from their comparison. Suggested comparisons are also built into this interface.
Another addition to the interface for both desktop and mobile were “tool-tips,” which educate users on financial terminology to aid them in their shopping experience.
Core Comparison Table Desktop Interface
Core Comparison Table Mobile Interface
At the end of my internship, I delivered two fully functional Invision prototypes of the overlay comparison builder interface, as well as the comparison table interface. The prototypes included all possible comparison permutations/combinations for both desktop and mobile. I also worked with the user testing and research team to set up user testing for the prototypes before I left by identifying scopes to focus on and by creating benchmarks for validation.
I also planned and scheduled a hand-off meeting, where the team and I outlined future steps for the design, as well as reviewed key areas that I wanted the user research and data team to focus on. I also presented the project in its entirety on the last day of my internship.