UX Improvement: Solving the "No Data" Problem in Financial Document Interfaces

As developers, we often focus on the happy path—when everything works perfectly and data loads as expected. But what about when there's no data to display? In our recent update, we tackled this common but often overlooked UX challenge by implementing modal notifications for missing financial documents. The Problem: The Dreaded "No Data" Scenario Users need to be able to access their financial documents, for this case it would be their statements and tax documents that would need to be readily available. But what happens when there is no data available? What do we show the user then? Previously before this implementation, it would just show an empty table or nothing at all—confusing users and likely causing more problems once live in production. This would probably lead to users asking, "Where are my documents and statements?" The Solution: Informative Modal Notifications Our solution was clear: implement modals for both the statements and the 1099-K form when none are available. We also implemented the functionality to allow users to download their statements and 1099-K forms when available: Statements that aren't available yet Form 1099-k documents that haven't been generated Statements and 1099k document be downloadable Instead of leaving users wondering why they can't see their documents or download them, this implementation provides: Clear explanation of the current status Information about when documents might become available A way to download the document when available No statements available There are currently no statements for this period. Statements will appear here once they become available. The code above shows the basic structure for the no statements modal, and we also use this modal for other UI displays. This starts with the parent container with the class of no-statement-modal, followed by the box modal structure capturing the content which will be displayed when there is no content or statements available. When using this modal for other implementations such as no tax documents available, or no 1099-K forms, or other similar situations, you can simply replace the h3 header and p element accordingly. This creates a basic error modal or no-data-available notification that simply lets the user know what data is not available—informing them there is not any data available and not leaving them assuming something is broken. The Javascript async function loadStatements(userData, statementId = "2025-01") { const statementList = document.querySelector(".statement-list"); // clear existing content statementList.innerHTML = ""; if (!userData || !statementId) return null; try { const statementDocRef = doc( db, "userProfiles", userData.email, "statements", statementId ); const statementSnapshot = await getDoc(statementDocRef); if (statementSnapshot.empty) { // show no statements modal showNoStatementsModal(statementList); return; } statementSnapshot.forEach((doc) => { // get data from each document const statement = doc.data(); // create html structure const statementItem = document.createElement("div"); // download url const downloadUrl = statement.downloadUrl || "#"; statementItem.innerHTML = ` ${statementItem.title} ${statementItem.year} View Details `; statementList.appendChild(statementItem); }); } catch (error) { console.log("Error occurred loading data: ", error); } } // helper function function showNoStatementsModal(container) { container.innerHTML = ` No statements available There are currently no statements for this period. Statements will appear here once they become available. `; } Adding CSS for Polished Look .no-statement-modal-content { display: none; /* until testing is done */ flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem; } .no-statement-modal-content .no-statement-icon, .no-form-1099k-icon { padding: 10px 16px; background-color: #f3f4f6; border-radius: 25px; } .no-statement-icon i, .no-form-1099k-icon i { color: #9ca3af; } .no-statement-description, .no-form-1099k-description { font-weight: 500; text-align: center; margin: 0; } Conclusion By implementing these modal notifications, we've significantly improved our application's user

Mar 23, 2025 - 18:05

UX Improvement: Solving the "No Data" Problem in Financial Document Interfaces

As developers, we often focus on the happy path—when everything works perfectly and data loads as expected. But what about when there's no data to display? In our recent update, we tackled this common but often overlooked UX challenge by implementing modal notifications for missing financial documents.

The Problem: The Dreaded "No Data" Scenario

Users need to be able to access their financial documents, for this case it would be their statements and tax documents that would need to be readily available. But what happens when there is no data available? What do we show the user then? Previously before this implementation, it would just show an empty table or nothing at all—confusing users and likely causing more problems once live in production. This would probably lead to users asking, "Where are my documents and statements?"

The Solution: Informative Modal Notifications

Our solution was clear: implement modals for both the statements and the 1099-K form when none are available. We also implemented the functionality to allow users to download their statements and 1099-K forms when available:

Statements that aren't available yet
Form 1099-k documents that haven't been generated
Statements and 1099k document be downloadable

Instead of leaving users wondering why they can't see their documents or download them, this implementation provides:

Clear explanation of the current status
Information about when documents might become available
A way to download the document when available


                class="no-statement-modal"
                id="no-statement-modal"
                role="dialog"
                aria-labelledby="no-statement-title"
                aria-describedby="no-statement-description"
              >
                 class="no-statement-modal-content">
                   class="no-statement-icon">
                     class="far fa-file-alt" aria-hidden="true">


                   class="no-statement-title">No statements available
                   class="no-statement-description">
                    There are currently no statements for this period.
                    Statements will appear here once they become available.

The Javascript

async function loadStatements(userData, statementId = "2025-01") {
  const statementList = document.querySelector(".statement-list");

  // clear existing content
  statementList.innerHTML = "";

  if (!userData || !statementId) return null;

  try {
    const statementDocRef = doc(
      db,
      "userProfiles",
      userData.email,
      "statements",
      statementId
    );

    const statementSnapshot = await getDoc(statementDocRef);



    if (statementSnapshot.empty) {
      // show no statements modal
      showNoStatementsModal(statementList);
      return;
    }

    statementSnapshot.forEach((doc) => {
      // get data from each document
      const statement = doc.data();

      // create html structure
      const statementItem = document.createElement("div");

      // download url
      const downloadUrl = statement.downloadUrl || "#";

      statementItem.innerHTML = `
      
        
          
        
        
          ${statementItem.title}
          
${statementItem.year}
        
      
      ${downloadUrl}" class="statement-action">
        
        View Details
      
      `;

      statementList.appendChild(statementItem);
    });
  } catch (error) {
    console.log("Error occurred loading data: ", error);
  }
}

// helper function
function showNoStatementsModal(container) {
  container.innerHTML = `
  
                
                  
                    
                  
                  No statements available
                  
                    There are currently no statements for this period.
                    Statements will appear here once they become available.
                  
                
              
  `;
}

Adding CSS for Polished Look

.no-statement-modal-content {



  display: none; /* until testing is done */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

.no-statement-modal-content .no-statement-icon,
.no-form-1099k-icon {
  padding: 10px 16px;
  background-color: #f3f4f6;
  border-radius: 25px;
}

.no-statement-icon i,
.no-form-1099k-icon i {
  color: #9ca3af;
}

.no-statement-description,
.no-form-1099k-description {
  font-weight: 500;
  text-align: center;
  margin: 0;
}

Conclusion

By implementing these modal notifications, we've significantly improved our application's user experience. Instead of leaving users confused when data is missing, we now provide clear, helpful information about the status of their documents.
This approach can be applied to any situation where data might not be available yet, helping users understand what's happening and when they might expect to see their data. Remember, handling the "no data" scenario is just as important as handling the happy path!
What strategies do you use to handle missing data in your applications? Share your thoughts in the comments below.