U.S. News

Credit cards

A global vertical component update in our DSM, shifting a largely static component to one with meaningful interactive states to complete the user experience.

The Challenge

For our credit cards product, I was given the task of redesigning an existing detail card to improve user conversion and mobile-friendliness, while still keeping all of the same content visible for compliance.

Role

Lead Designer

Timeline

4 Weeks

Tools

Sketch, Crazy Egg, Usertesting.com

Launches July 2021

Analyzing our Baseline

Using crazy egg, I conducted a heatmap test on our live pages to gauge how the existing component was performing amongst our users

Most users were skipping both CTA's and the information on the detail card, opting for interacting with the read more toggle instead.

It helped me form a few hypotheses to test during my design process:

1) There is too much static content
2) They are presented with a CTA before they can learn or make a decision
3) Unnimportant information is being prioritized too much, like the heading


Including our Users

After combing through which elements were causing the most errors in our experience, I created high fidelity mocks and conducted another round of user testing.

Matt, 38

$60k - $80k / year

Actively Looking

"It's really hard to navigate through this page, but it seems like there's a lot of important information in here. Oh wow, this card has a lot of cool perks I didn't know about, but it's not in my credit range."

Lisa, 24

$80k - $100k / year

Actively Looking

"US News. I've never heard of us (like the plural of you and me) news. I mean I like that they have all this information here for me to see, but it's a like spammy. Like I feel like I'm looking at one giant ad. I think I'd probably use this site for research, but wouldn't apply for my credit card here, I'd go somewhere else."

Working in a Design System

Redesigning within a design system begins with inspecting the component from an atomic level.

My goal was to simplify the existing component by retaining its meaning and functionality, but improving the organismic component with a cleaner, brighter experience.

Clashing hierarchal elements and misused vertical space were making it hard for users to orient themselves to the content, decreasing scanability, user retention, and overall interaction.

To declutter the component, I opted for simplifying many visual elements, including this highlights section which featured a minimum of 10 highlights.

Rather than a vertical list occupying prime screen space, I designed a reel to optimize horizontal space and create a friendlier mobile/desktop experience.



More Projects