NERDWALLET
Learn & Shop: Article monetization
A scalable solution that empowers users to shop for relevant products earlier in their journey, driving higher revenue for NerdWallet and more leads for our partners.
INTRODUCTION
The current monetization components were time-consuming to implement. Our design team was tasked with creating a scalable solution that enables the Business Development (BD) team to deploy these components independently, reducing reliance on design and engineering resources.
ROLE
TIMELINE
End-to-end design, UX/UI, WordPress implementation, QA
Q3, 2024 - 4 weeks
TEAM
1x Product Design Contractor
1x Business Development Rep
1x Engineer
PLATFORM
Mweb, Desktop
THE RESULTS
A/B test outcomes
+21.91%
Desktop clicks
compared to control
+35.07%
Mobile clicks
compared to control
+128%
Revenue increase
compared to control
BACKGROUND
Why does article monetization matter?
Consumers visit NerdWallet for financial information, reading articles that guide them further down the shopping funnel. We've recently observed significant changes in the following metrics:
Article mClicks
An increasing % of Mortgage mClicks now come from Article mClicks
Organic revenue
An increasing % of home vertical revenue come from Article mClicks
DISCOVERY
The existing entry points have many limitations
User Problem: Limited information
The current product card only allows for 2 quantitative details. Users need more information to feel confident in order to click and move forward.
Business Problem: Technical and design dependencies
BD has to collaborate with engineers whenever they want to add this component to an article, which prevents them from quicky reacting to partner agreements and market changes.
How might we improve user experience while providing flexibility for the business team?
DEFINING REQUIREMENTS
A modular design
The product card should be able to display both qualitative and quantitative information to help users make an informed decision.
WordPress integration
The component should be built as a structured content component in WordPress so the BD team can create and place the component on articles easily and efficiently.
Mobile-first
70% of NerdWallet article readers are on mobile devices. Design their experience first then adapt to Desktop.
MID-FI
Product card exploration
Option A: 4x4 columns
Pros
Existing card pattern
Easy to implement
Cons
Variable card heights
Can’t mix qualitative and quantitative details
Lots of white space
Option B: 2 columns
Pros
Better layout
Easier to scan
Cons
Variable card heights
Can mix qualitative and quantitative details
Lots of white space
Option C: 1 column (Recommended)
Pros
Easiest to scan
Less cognitive load
Easy to implement
Can mix qualitative and quantitative
Cons
Could be too tall if qualitative copy is too long (need to determine a max character count)
MID-FI
Container exploration
With the product card design finalized, I explored how to display them within a container that could be placed on articles. My goal was to create visual balance and hierarchy with the rest of the page content.
Content Design and Layout
Placement
FINAL DESIGN
A modular design
BD can now add or remove all the following elements to create customized components to meet their needs.
Different content and use cases
BD can use the feature to display products across all four lending verticals, both with a variety of content types, while maintaining the same card height and visual consistency.
Mobile and deskop interactions
I designed desktop and mobile to use interaction patterns that work best for each device type.
Desktop (tap) and mobile (swipe) interactions
NEXT STEPS
Scale and iterate
The BD team is already using the feature to monetize across NerdWallet experiences. Future iterations will include:
Making the advertisement tag stand out more
Continue A/B testing different placements, number of cards, etc.
Examples of live components showcasing different lending products
Learnings
📱 Mobile-first
With 70% of users on mobile, I prioritized their experience firsat, adapting the component for desktop second.
⛔️ The importance of design & technical constraints
There’s no such thing as a fully customizable component. Technical and design constraints shape the outcome.
♻️ Reuse and repurpose
To be efficient, I went directly to mid-fidelity and leveraged existing components and patterns that aligned with the use case.