top of page

Finance Web App web app that streamlines the onboarding of commercial real estate documents, with a focus on key terms in loan agreements, mortgage notes, and risk-controlling derivative agreements.

Derivative Logic - Finance Dashboard

Lead Product Designer

Oct ‘20 - Jan ‘21

UI, UX, Research, UJM, Flow


Derivative Logic is an independent hedge advisory firm that combines expertise in the financial derivative market with a proven track record in hedge structuring and execution, specializing in interest rate and currency derivatives such as interest rate caps, swaps, FX forwards, and options.

The company offers a comprehensive range of independent and impartial hedge advisory services to various clients, including corporations, real estate developers, investors, tax-exempt entities, Native American tribes, not-for-profits, and municipal borrowers. Our strength lies in consistently delivering cost savings and securing the best hedging terms for our clients.

Regarding the Derivative Logic web app that I have been tasked with designing, it is intended to be a web application focused on onboarding commercial real estate documents. Specifically, the app will concentrate on extracting and analyzing the specific terms within loan agreements, mortgage notes, and derivative agreements that control risk.

About Derivative Logic

Steve reached out to me to design a web app focused on onboarding commercial real estate documents. Specifically, the app would concentrate on extracting and analyzing the specific terms within loan agreements, mortgage notes, and derivative agreements that control risk. I agreed to meet as part of my freelance business back then.

Start of the Project

It's a new web app for the company, so I need to design all the main screens. There were a lot of problems, and a few more that I found during the research. The following are the problems:

  • Manual and Time-Consuming Processes:
    Any businesses in the commercial real estate industry still rely on manual methods for reviewing and processing documents, which can be slow.


  • Risk Assessment 
    Analyzing complex terms within loan agreements, mortgage notes, and derivative agreements can be challenging and prone to human error, leading to potential financial risks.


  • Scalability
    As the volume of commercial real estate transactions and associated documents increases, there is a growing need for a centralized platform that can efficiently manage everything in one place.


For this project, our user base encompasses a range of user personas, including small and medium-sized companies in the real estate sector for B2B purposes. However, our primary focus is on the B2C persona, specifically users who own a house or apartment with loans and possess real estate and loan documents. Due to time constraints, we concentrated solely on the main persona and conducted prototype testing with a small group of users.

Main Persona

  • A user who has real estate and loan documents.

Other Personas

  • Small Real Estate company 

  • Medium Real Estate company 

User Persona

A comprehensive map of the user experience when engaging with the derivative logic dashboard, demonstrating each UI screen and scenario. We focused only on the main screens and flows for the
Proof of Concept. It's important to note that some flows that are missing and will be added later on.

  • Dashboard  -> Loans -> Specfic Loan

  • Reminders

  • Analytics 

  • Currents Rates

  • Users

  • Reports

  • Documents

Flow of the Screens
by Notes

Please find below the UI screens from our web app, illustrating the derivative logic dashboard.
These screens offer a visual representation and flows of the dashboard in the web app.

UI Screens

In the Home Page -> Dashboard flow, users can access a comprehensive overview that includes summary data, a portfolio chart, loan amounts categorized by maturity, lender exposure, and details about the overall loan portfolio.

Home Page -> Dashboard

In the Home Page -> Dashboard -> Specific Loan flow, users have the ability to seamlessly access detailed information about a specific loan directly from the dashboard. This includes a comprehensive array of data such as the current balance, interest rate, monthly payment, maturity date, and a breakdown of loan payments, offering users a thorough understanding of the loan's financial dynamics and related information.

Home Page -> Dashboard -> Specfic Loan

Within the Home Page -> Analytics workflow, users can invest significant time and resources in calculating intricate financial metrics such as rate cap, defeasance, yield maintenance, and swap. The application streamlines this process, offering users the optimal rate proposal, thereby maximizing efficiency and minimizing the resources expended on these financial analyses.

Home Page -> Analytics

My Role and Challenges 

Role - Product designer 
As a Product Designer I held complete design-ownership over the project. 

The client initially reached out to me online, expressing enthusiasm about a compelling app idea. Upon sharing some initial details, the client mentioned having established branding and expressed the need for a well-crafted design for their dashboard app.

Embarking on this project was an enjoyable endeavor. It involved undertaking both the UX and UI design for the entire application. Given the client's novice status in the realm of app development and design, I took on the role of guiding them through the entire process, ensuring clarity and understanding at each step. It was a rewarding experience collaborating with the client to transform their vision into a visually appealing and user-friendly application.


  • How do you create a design that is both modern yet tailored to cater to older customers?

  • How do you communicate to the client the importance of concentrating solely on the primary workflows for the POC?

Despite the challenges presented by the project, I successfully addressed them by employing effective UX design and maintaining open communication with the client. The journey involved numerous alterations in the UI design, as the client expressed a desire to imbue the design with a more mature and adult-friendly aesthetic. In the end, I am confident that the app has emerged as a successful and well-executed project.

Within the Home Page -> Current Rates workflow, users can access information on the current interest rates and analyze rates from the previous year. Furthermore, users have the ability to monitor real-time changes in the current interest rate market.

Home Page ->
Currents Rates

In the Home Page -> Reminders workflow, users can view and manage loan-related events within the Reminders section. The calendar displays upcoming events and tasks for the user or other designated users on the specified day.

Home Page -> Reminders

In the Home Page -> Users workflow, users are presented with a overview of individuals or entities authorized to inquire about the current status of loans. This feature is specifically designed for companies or individuals seeking assistance in effectively monitoring and managing their financial standing. By providing a centralized hub for user access, this screen facilitates seamless collaboration and transparency, empowering users to stay informed about their financial positions and ensuring efficient tracking of loan statuses.

Home Page -> Users

In the Home Page -> Reports workflow, the screen offers a comprehensive display of the loan portfolio, rate overview, and an analytical portfolio chart. Additionally, it provides a year analysis showcasing the loan amount distributed by maturity and lender exposure. Users have the flexibility to either generate a new report or edit an existing one, granting them control over their reporting preferences and enabling a tailored approach to accessing and analyzing crucial financial data.

Home Page -> Reports

In the Home Page -> Documents workflow, the screen shows a overview of documents, displaying all loan payments. Additionally, it offers users the option to conveniently share payment documents via email, allowing for a quick preview through a pop-up window, or to download the document in PDF format for offline access. This functionality enhances user flexibility in managing and sharing essential financial documentation.

Home Page -> Documents

bottom of page