Sub-pagination

In step 2 of this project-management financial transaction process, the user can select multiple accounts to solve their need for this transaction. After they have selected all of the accounts in step 2, they move on to step 3, which is where they enter “explanations” for each account in the transaction.

If they selected multiple such accounts to pull the money from in step 2, then step 3 will actually involve “sub-steps” - one for each account in the entire transaction.

Since the pagination in the footer indicates the major steps in the process, I had to solve this sub-step design problem in a different way.

I arrived at this “sub-pagination” approach.

The “major” step’s pagination dot becomes larger than the normal major-step dot (larger than it appears in other major steps). This allowed the sub-step pagination dots to be seen as subservient to the major step’s dot.

The final consideration in this approach was how would sub-step dots scale-up if there were a lot of accounts in the transaction (which would mean a lot of sub-steps)? For this case, I simply showed a small text representation in the place of the sub-step dots. E.g., “3 of 17”.