HOME AFFORDABILITY CALCULATOR
Redesigned a Home Affordability Calculator page for LendingTree.
The original design layout
The image you see below is a wireframe image of the original design layout of a Home Affordability Calculator page. The page looked more like a widget style calculator that can be embedded to a content web page. When LendingTree was going through a rebrand, I gave this calculator a fresh new look, that improved the user experience for consumers applying for a mortgage loan.
Wireframe of the original design layout
The new design process
I created many variations of the new layout, the creative manager provided feedback, and there was one design that they felt was headed in the right direction. I also reviewed the design layout with the front end developer to determine if it was feasible. After getting approval from management, and the front end developer, I was able to make updates to the new layout design.
Wireframe of the new design layout
Breaking down the new design
Calculator Form Breakdown
Calculator Form Breakdown 2
Color Palette
The final design
The final design resulted in a positive outcome for LendingTree. There was a higher conversion rate by adding the big green “Call to Action” button. The new calculator layout, the form field input design, and green “Call to Action” button have become the new templates for all calculators at LendingTree. I designed the majority of calculators with the new design layout. The home affordability calculator is live and can be viewed here.
Final Design Desktop
Final Design Mobile