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.
Lead Designer
4 Weeks
Sketch, Crazy Egg, Usertesting.com
Launches July 2021Using 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
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.
$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."
$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."
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.