Enhancing engagement of an interactive mortgage calculator by 54% through redesign
Project Timeline: 8 weeks
My Role: UX Lead & Researcher
Team: Product Manager & Product Designer
Tools: SurveyMonkey, Google Surveys, UserTesting, Figma
Background
In early 2018, SmartAsset set out to redesign its Mortgage Calculator to improve user engagement. Despite high traffic and typically successful SEO strategies, the calculator struggled engage users and rank well on Google. This discrepancy highlighted underlying user experience (UX) issues that needed to be addressed.
Goal: Enhance the UX of SmartAsset's Mortgage Calculator to improve user engagement metrics and search engine results page (SERP) rankings
Approach
Following the Design Thinking framework, I concentrated on understanding our users and the problem space, collaborated with the designer to develop and test design concepts, and partnered with the working group to finalize a well-validated solution.
Empathsize & Define: These early phases aimed to understand the user base, identify usability issues, and conduct an informal competitive analysis to understand and define the problem space. This was done through on-site surveys and analytics (n = 105 for survey, 10k+ mo. visitors for analytics) and usability testing of the existing calculator experience (n = 20). Key research questions as follows:
Who is the primary user of the Mortgage Calculator?
What are the main usability issues with the current design?
Ideate, Prototype, & Test: Once project scope and direction were defined, I collaborated with the Product Manager and Product Designer to develop and test possible solutions, focusing on uncovering the most impactful features to deliver.
1. Who is the primary user of the Mortgage Calculator?
Research uncovered the following insights and empathy map associated with the user base
Primary Audience: First-time homebuyers early in the buying process (not experienced homeowners, as initially assumed).
Mobile Usage: 60% of users accessed the calculator on mobile, prompting a mobile-first design approach.
Empathize & Define
2. What are the main usability issues with the current design?
Inputs were tailored to current homeowners, creating friction for first-time buyers.
Overwhelming content overshadowed the calculator inputs.
Users had to scroll excessively to see updates after adjusting inputs.
The page layout was cluttered, causing user fatigue.
Ideate, Prototype, & Test
Once the project goals and design scope were defined, we explored and tested multiple design features with our users, including:
Swipe vs. Tab: Tabs proved more intuitive for displaying output
Expand / Collapse vs. Button: A button reduced scrolling and improved data access
The Redesign
After a number of design iterations and testing sessions, the following updates were made:
Added a sticky output on mobile to support "playing around" behavior
Restructured inputs to align with first-time homebuyer needs
Collapsed secondary inputs and content to reduce user fatigue
Modernized visuals and added a methodology section to explain calculations
Outcomes
The redesign led to significant improvements in user engagement and SEO performance:
User Engagement:
Clicks per user increased by 53.7% overall (78.7% on mobile)
Average session duration increased by 26.1% overall (31.4% on mobile)
SERP: SERP position improved from 19th to 4th, landing on the first page of Google
Learnings
Challenge Assumptions: Research revealed unexpected insights about primary users, fundamentally reshaping our approach to the calculator redesign.
Prioritize Mobile-First: Focusing on mobile reduced unnecessary elements and streamlined the design process.