I designed a user-friendly and visually engaging mortgage calculator to assist users in understanding their mortgage payments and financial commitments over time.
Client
Transunion
Release

Overview: I designed a user-friendly and visually engaging mortgage calculator to assist users in understanding their mortgage payments and financial commitments over time. The calculator is divided into four intuitive tabs: Payment Breakdown, Payment Over Time, Balance Over Time, and Balance/Payment Breakdown. Each tab provides detailed and interactive insights to help users make informed decisions about their mortgages.


1. Payment Breakdown:

  1. This tab provides a clear breakdown of the monthly mortgage payment based on national average rates.
  2. Users can input key variables such as home price, down payment, loan term, interest rate, and ZIP code.
  3. A colorful pie chart illustrates the distribution of principal & interest, property tax, and homeowner's insurance.
  4. Additional filters include PMI and HOA fees, allowing users to customize their calculations.

Primary tab view of mortgage calculator

2. Payment Over Time:

  1. This tab provides a visual representation of how mortgage payments are allocated over time.
  2. Users can see the breakdown of each payment into principal and interest components for each month of the loan term.
  3. The interactive chart helps users understand how their monthly payments evolve, with a focus on how the interest portion decreases and the principal portion increases over time.
  4. Key metrics and trends are highlighted to provide users with a comprehensive view of their mortgage payment dynamics.


3. Balance Over Time:

  1. This tab displays the evolution of the loan balance, principal paid, and interest paid over the loan term.
  2. A dynamic line chart helps users visualize how their payments affect the loan balance over time.
  3. Key metrics such as the loan amount, total interest paid, total cost of the loan, and payoff date are prominently displayed.

4. Balance/Payment Breakdown:

  1. This tab offers a detailed amortization schedule breakdown.
  2. Users can view monthly payment details, including the allocation to principal and interest, along with the remaining loan balance.
  3. The expandable table format ensures that users can access comprehensive data for each payment period.

Design Approach:The design prioritizes clarity and ease of use, with a clean layout and intuitive navigation. The visual elements, including charts and tables, are designed to be easily interpretable, even for users with limited financial knowledge. The use of color enhances the user experience by making the data more accessible and engaging.

Conclusion:This mortgage calculator design combines functionality with aesthetic appeal, providing users with the tools they need to understand and manage their mortgage payments effectively. It reflects a commitment to user-centered design and practical financial tools.

Let's get in touch

Have a project in mind? Let's build something great together!

Contact Me

Follow my art

Instagram

@aldo_art