Finance Website - Blog Redesign
Overview
Our clients goal was to improve the experience of low intent users landing on popular blog pages & encourage / incentivize users to redirect to related service pages.
Role
UX Designer, CRO Analyst
Tools
Google Analytics, Crazy Egg Heatmap & Session Recordings, Figma
The Process
Research
Conducted a full website audit and heuristic evaluation to uncover entry points, primary user journeys, and key drop-off locations. Analyzed competitor UX/CRO strategies and examined heatmap and session recording data—specifically scroll depth and CTA engagement. This research targeted the primary blog directory and individual article pages as critical areas for conversion optimization.
Design
Using Figma and official brand assets, designed responsive high-fidelity, interactive desktop and mobile prototypes for the blog experience. Informed by technical constraints of the client's Next.js platform, collaborated directly with developers to balance user-centric CRO principles with seamless frontend execution.
Feedback & Iteration
Delivered interactive prototypes for internal client review and compiled feedback around promotional CTAs, content hierarchy, and brand alignment. Iterated on duplicate design files to preserve the original concepts, applying all stakeholder adjustments alongside detailed notes explaining the rationale behind each revision.
Hand Off
Prepared and packaged all final Figma assets to align with Next.js technical specifications, fully vetted by the in-house development team. Delivered a clean hand-off package that enabled the client’s internal team to schedule implementation into their development sprints with complete flexibility.
Primary Blog Page
Before & After
Alternate Hero Design
Update background color to align with brand guidelines, highlighting the H1/H2 and search feature.
Included Blog Category Cards
Use simple iconography and headers to create engaging links to high-level category pages.
Include Category Tags
Add tags to clarify content categories, improving navigation, brand recall and align with competitive trends.
Alternate Second Fold Design
Highlight one article to reduce choice paradox, streamlining the remaining listing designs.
Included Product CTA Sections
Showcase products/USPs; replace with personalized loan suggestions based on client feedback.
Convenient CTAs for Services
Use iconography to distinguish brand-aligned CTAs linking to product pages.
Include Lower-Intent Resource CTAs
Place resource-related CTAs low in the page hierarchy to improve site usage.
Prioritize Original / Video Conent
Feature engaging original series, utilizing a carousel to potentially increase engagement metrics.
Prioritize Original / Video Conent
Feature engaging original series, utilizing a carousel to potentially increase engagement metrics.
Blog Article Page
Before & After
Alternate Hero Design
Centralize key article metadata and image to improve relevance, bounce rate, and user connection.
Include Table of Contents
Replace "similar posts" with jump links based on header tags for immediate navigation; position CTA beneath.
Sticky, Device-Specific CTAs
Position CTAs beneath the Table of Contents (on desktop), utilizing interactive elements (like drag-toggles) to maximize engagement.
Sticky CTA A/B Testing
Test an alternate mobile sticky footer on-scroll to ensure visual consistency and ease of clicking.
Alternate Mid-Blog CTA Design
Apply distinguished design and imagery to embeded CTAs to maximize user attention.
Update Related Articles
Expand section to full page margins, using standard article listing design to improve consistency and engagement; include blog link.