Overview

As part of our initiative to develop a robust Document Management System (DMS), we focused on creating an intuitive and efficient feature for setting up digital signatures. This feature is essential for ensuring accountability, traceability, and streamlining the sign-off process for documents within our platform. The redesign leveraged the Ant Design UI library, emphasizing usability and a major overhaul of the user experience.

Challenge

The primary challenge was to create a user-friendly interface for setting up digital signatures while ensuring that the process remained secure and compliant with legal standards. The previous solution was overly simplistic and failed to provide a comprehensive overview of the set signers and their required signatures, making the sign-off process cumbersome.

The old user interface for setting signatures

Solution

We redesigned the existing solution by leveraging the Ant Design UI library to improve the UI and overhaul the user experience. The key features implemented in this redesign included:

1. Document orientation check:

   • Implemented an alert system that warns users if the document orientation is incorrect with the message: "Document orientation affects signature display, please check in the correct orientation if needed."

2. Adding and removing signers:

   • Users can add signers by clicking the "+ Add signer" option, selecting the user, and confirming their selection.

   • Signers can be removed by clicking the "x" option that appears when hovering over the signer's name.

3. Adding, moving, and deleting signature fields:

   • Users can select a signer and click on the signature box to place a signature field on the document.

   • Signature fields can be repositioned using a drag-and-drop interface.

   • Signature fields can be deleted if necessary.

4. List of signatures:

   • Each user has a list of all their signatures, with an option to remove a signature if needed.

5. Signature requirement:

   • Ensured that each user must have at least one signature box; otherwise, the document cannot be sent for sign-off.

   • If a user is added as a signer but does not have a signature box, the requester can add signature boxes or remove the user from the signers list.

   • Display a failure message if a user has no signature box: "Each signer must have at least one signature box."

6. Feedback on success and failure:

   • Display a success message to the requester: "Document has been successfully sent for signing."

   • Provide failure notifications for the requester if there are issues.

Document orientation check

Results

The redesigned digital signature setup feature significantly improved the user experience, making it more intuitive and efficient. Users can now easily manage signers and signature fields, ensuring that documents are properly set up for digital signatures. The addition of real-time feedback and a comprehensive signature management system enhanced the overall usability of the DMS, leading to higher user satisfaction and better compliance with legal standards.

This case study highlights our commitment to delivering user-centric solutions by combining strong design principles with effective management and quality assurance practices, ultimately enhancing the overall user experience on our platform.