Juro

Approval workflow


Creating and designing a new feature on the product roadmap, which will let users assign an approver to a contract, before it is sent for signing. This feature had a complex userflow with many edge cases. It was important that every edge case was thought throughout so the main flow would cover any type of user interaction.


Simplyfing the dashboard with a better hierarchy of options


While implementing this feature there was a big challenge with how to integrate the feature in an already heavy-data interface. The solution was to add a simple icon that signifies whether the contract has been assigned to the team user for approval or not. The grey icon signifies that the contract has been assigned to me for approval. The green icon signifies that the contract has been approved by me.


Get at-a-glance information on a contract’s status.


The main dashboard with all contracts in the team, not just those assigned to me. There were multiple iterations on what's the best way to portray the approval process. We decided the simplest, minimalistic way was to just convey it through the approval icon.


Adding members to the team and sharing functions


For creating a contract, first step is to select a template that will determine the type of fields you have to input. The contract editor features fields where you can send the contract for signing or replace the smart fields in the contract. Smart fields are changeable data in the contract like price, date, name etc.

A problem that had to be solved was how to integrate the approval feature inside an already option-heavy interface. The solution was to add a minimal button on the main menu where it would act as a sharing approval.


Tracking team members and changes made to documents


Once you click on the “sharing “ button, a pop-up will appear where you can invite team members to collaborate on the contract, whether it’s commenting, approving or editing. A sharing center was the best solution to integrate the approval workflow in an already complicated flow.

Each circle is filled after that specific step in the lifecyle of the document has been completed. Whether the contract is in draft mode or if it has been approved or sent for signing, the workflow tab will display that.


Conversational approval workflow


Screen of the sharing center after team-members have been added to the contract and how to change their user-rights after they have been added.

A solution to integrating the approval workflow in the existing platform was to integrate it into an internal commenting section where a bot would notify each time the state of the document would change. It would notify when the document has been rejected in the approval process or if it had been approved by the approver.


Internal (team only) versus external (client) comments.


Another challenge was, how do we separate internal commenting between team members on the contract to external commenting, between the people who sign the contract. The solution was to separate the commenting in two tabs, external commenting and internal commenting. This way, the comment section would be separated. Inside the internal commenting, the approval flow would take place. The screen shows the converstional UI between the person who requested the approval, the approver and the conversational bot.

You can find me on linkedin, angellist, twitter and insta or email me at alinacolceag@gmail.com

.