Fee Calculator
Endpoint is a digital title and escrow company based in El Segundo, California creating a modern closing experience. With Endpoint's innovative technology buying or selling a home can be done from anywhere with just a few taps.
Create an easy-to-use fee calculator that helps agents, lenders, and sellers understand the cost of their transactions with Endpoint.
Figma, Whimsical, Webflow
Product Designer
Listing agents were not able to calculate what a potential transaction with Endpoint might cost their sellers. Therefore, the Endpoint sales team was spending valuable time and energy collecting the costs from a variety of sources to provide an accurate estimate. In a cross-organization collaboration, we created an easy-to-use fee calculator on the marketing site providing a valuable resource for customers and our internal team.
Home cost calculators are a lead-generation tool across the real estate industry. I began researching home sale calculators from traditional real estate and newer fintech disruptors to gain a better understanding of UI patterns and any unique interactions.
A team favorite, Opendoor's home sale calculator updates in real-time giving the user instant feedback with every keystroke. A minimalist UI with clear type hierarchy focusing on the net proceeds.
With only a few inputs, a person can quickly get a few comparable rates. Sleek design and the personable copy made this a great exemplar.
Endpoint's parent company, First American, is the national player in this space. This robust calculator can provide near-perfect estimates and cover all transaction types. From a technical perspective, this is the one.
WFG's multi-page approach allows for conditional routing depending on a user's inputs. Only showing a few questions at a time helps a user complete the flow in digestible sections only showing relevant inputs.
One of my favorite parts of the design process is getting the whole team in a room and white-boarding ideas, iterating on sticky notes and building something using everyone's strengths. It's magical every time and the best team-building exercise.
Making this project remotely meant finding new ways to collaborate. Thankfully the team at Figma (those glorious souls) recently released FigJam. For the session, we invited team members from Sales, Operations, Product, Engineering, and Design to help us align on the best approach forward.
After aligning on a single-page interface the engineering team began the technical planning on connecting the datasets with the First American Closing Calculator (FACC) API. We encountered a major technical constraint when we realized it would take between 2-5 seconds for each API call to receive the data on the front end. That meant our instantly updated UI was no longer a possibility. We would need to make at least 3 API calls resulting in anywhere from 6-15 seconds of wait time between a user entering data to getting their results.
This meant we needed to implement a loading element to give the user peace of mind that their results were loading while the waited. I quickly prototyped a skeleton loader to match the loading experience in the Endpoint app.
Endpoint's product uses a custom design system. It's fantastic, by the way. And the marketing site uses a different component library. One of the challenges I faced in this project was combining these two visual languages into one. They share similar, but not exact color systems, slightly different input fields, and typography scales.
Because this was to live on the marketing site, it needed to feel a part of that design language. I focused the UI heavily on the marketing library and added a few elements from the product design system to complete the experience like using a side-by-side input and date picker.
This calculator went live in August 2021. There are many iterations to come, and I can't wait to share them with you! Coming soon!