ValuePenguin Credit Card Marketplace

Design Strategy

I had the opportunity to rework the UI completely as this would be a rebuild of the credit card database, so I collaborated with product managers to focus on user needs.

Product manager goals and insights

• Design a marketplace that will engage both low and high intent users

• Low intent users want to see “Top picks” (i.e. credit cards with good ratings and no/low annual fees)

• High intent users want to see personalized suggestions

UI improvements asks/needs

• Display proprietary card data that competing marketplace don’t have (i.e. estimated sign up bonus values)

• Include card data such as star ratings that competing marketplaces offer

• Reduce height of each credit card “tile” to reduce scrolling and increase number of cards visible per screen height

• Keep the UI clean and number of text styles low to improve page performance

• Create a more engaging navigation to other types of credit card marketplaces

Mobile Wireframes

In the initial round of wireframes we focused on the mobile form UI. We wanted to see how many cards are visible with and without the monthly spend form.

• PM wanted all fields in the form to be visible, creating a form that takes up almost the entire screen height and almost no CTAs are visible

• Having the fields in 2 columns reduces the form height, so at least 1 card would be visible

• The best UX is hiding the form by default, so 2 card CTAs are visible

Low Fidelity Mobile Prototypes

Phase 1

The next round we went into low-fidelity prototypes to see how tall each credit card “tile” would be, as this exercise would help determine what card data to display and what to put behind a toggle.

Phase 2

In these prototypes I focused on optimizing the UI of the credit card tiles. The PMs and I agreed the first option is the best option to move forward with.

Desktop Wireframes

PMs asked for:

1. Navigation to other credit card marketplaces

2. Monthly spend form

3. Links to other SEO content

Prototypes

At this stage I began applying the new site UI to the prototype.

Next steps

Run prototypes through Usertesting for usability testing and user feedback.