Seller's Netsheet Output - Comparison view
Home Seller Calculators for Responsive Web
WACO Title was experiencing a massive drop in organic visits to their site due to an outdated design for their Seller's Proceeds Netsheet and Financing Calculators that wasn't responsive. In order to draw more visitors looking to sell their homes, they needed a modern look and feel with a responsive approach to the design.
In order to design a component library that was consistent with the established brand styles, I started with a styleguide initiative where I worked with the project stakeholders to define:
Primary and secondary color palette
Field and Form patterns
Seller's Proceeds Netsheet Calculator:
The Seller's Netsheet needed to provide a clear view of all the output data without the need to scroll.
For pricing comparisons, it was necessary to design the calculators to be stacked horizontally (3 max).
Each individual output needed to be editable, the design approach allowed for each column to expand vertically to display the input view.
Responsive Design Approach
Since sellers and realtors commonly make calculations on the go, all the calculators on the site needed to respond well when viewing on a mobile screen. The examples below show the landing, input, and output view for the calculator on mobile.