Finplan Avatars #2

Continuing on the redesign of the “FinPlan” (Financial Plan) process of a large project-management application, here I present another use-case that warranted the use of avatars.

Once the user submits the two-sided transaction request, an approval process is commenced. The approval process is comprised of multiple levels of approvals (a hierarchy of managers), as well as approvals on “both sides” of the transaction (managers on the “from” and the “to” must approve the transaction at each workflow level).

Here the user is viewing the confirmation step after they have submitted their request. The goal is to present the user with confirmation of what they submitted, while also illuminating that state of the request as it relates to the approval workflow.

Due to concepts such as “auto approval levels”, the request that they just submitted might be beyond the first level. Thus, in the examples shown here, we see cases where the request is currently at level 2 or level 3 (level 1 means it has not received any approvals yet).

The graphical workflow-level indicator in the middle shows which level the request is currently at. If there is only one approver at a particular level, we show their name and contact icons. If there are more than one such approver, we show an “avatar stack”. Clicking the avatar stack would bring up a popup with further contact details about all of the approvers.

This example on the right shows the state of an avatar stack if one of the “to” approvers had already approved. The green checkmark badge indicates which of the possible approvers actually approved it.

The reason this entire avatar stack appears with a reduced opacity is that the change request is now only waiting on the “from” side.