Project Overview

NOTE: This is a design challenge for the Remittance Dashboard component.

Project Overview

NOTE: This is a design challenge for the Remittance Dashboard component.

Smartcare processes financial transactions (ACH and credit card) for its child care centers. Once the funds are available, Smartcare remits the money to the center’s bank account. Smartcare will then also create a remittance (once the funds are distributed to the center) which is a downloadable PDF that will outline the payment amount for the center including any fees deducted (Smartcare collects a small transaction fee for ACH and credit card payments processed through our system).

Smartcare processes financial transactions (ACH and credit card) for its child care centers. Once the funds are available, Smartcare remits the money to the center’s bank account. Smartcare will then also create a remittance (once the funds are distributed to the center) which is a downloadable PDF that will outline the payment amount for the center including any fees deducted (Smartcare collects a small transaction fee for ACH and credit card payments processed through our system).

The Problem.

Since the downloadable remittance does not populate in the center’s remittance list until the funds have been distributed, the center does not have any visibility into what is happening when the remittance is processing.

Current Remittance UI Component

The main things that the center wants to know when the remittance is processing are:

How much they should expect to get paid

When they should expect to receive the funds

What’s the status of the remittance (Processing, Funded, Failed, etc.)

The Solution.

The Solution

Create a UI that will give the center organizations visibility into the three items above for all remittances (even those that are still processing).

How can I check the status of my payment?

In providing the user with a quick view for each remittance, I chose to display the status with a color indicator element to reference the current standing of the payment.

How can I check the status of my payment?

In providing the user with a quick view for each remittance, I chose to display the status with a color indicator element to reference the current standing of the payment.

Let's incorporate a toggle feature for the status display

For easy viewing for each remittance, I created a "View/Hide" status button that would work as a toggle feature to show and hide each payment status.

Let's incorporate a toggle feature for the status display

For easy viewing for each remittance, I created a "View/Hide" status button that would work as a toggle feature to show and hide each payment status.

Remittance Status Component

I created a clean and simple display component to provide the user with the details of the remittance that includes the total amount to be processed, the date of the processing, deposit information and any processing fees (if included).

Remittance Status Component

I created a clean and simple display component providing the user with the details of the remittance that includes the total amount to be processed, the date of the processing, deposit information and any processing fees (if included).

Shawna Stephens