How We Optimized Our eSignature Experience for Awesomeness

A successful product or service can never really be “finished” in today’s tech world. New data is always streaming in, prompting updates and developments to happen at the speed of light, and if you think your solution is done and dusted, your business may as well be, too.

This has never been more true than in today’s digital economy, where people expect products to be simple, work fast, and save them significant time.

Preparing a document for signature, for example, can be a cumbersome and time-consuming task. There are usually various types of fields, multiple signatures required, an order by which the signers should sign the document, and the danger of doing it all over again from scratch if something goes wrong.

When we set out to optimize Nitro’s eSignature experience, we wanted to streamline this process and eliminate any unnecessary steps while making it as fast, easy, and convenient as possible to apply and request signatures.

What did we try to accomplish through the redesign of Nitro’s eSignature flow?

  • Increased confidence and clarity
  • Fewer steps and less time to complete the flow
  • Increased discoverability and learnability
  • Easy error recoverability
  • Increased satisfaction
  • Decreased dropoff rate

To give you a peek into the UX process behind Nitro’s signature flow redesign, we’ll run through our former eSigning process, highlighting some common user pain points. Then, we’ll go through the new signature flow and explain why we made certain decisions for the redesign.

Nitro’s Former eSignature Flow

Prior to the update, our eSignature experience consisted of several steps a user would have to take before sending a document out for a signature. First, they would have to decide, in advance, who needed to sign the document: options were Just Me, Me and Others, or Just Others.

1

There was no way to change this later in the process; if a signer had forgotten to include someone, the user would have to restart the process.

Then, right after the signers were chosen, users were presented with a screen to enter the names and emails of their recipients.

2

This presented a few issues for our users:

  • Uncertainty. They were not sure what to expect or how the system would behave. Users were not 100% confident they were doing everything correctly. They weren’t sure if they’d be able to change or add new recipients later.
  • Uneasiness. There was an uneasy feeling of the possibility of forgetting to add someone, without the ability to change it later. Confidence in the product wasn’t where we wanted it to be.
  • Error recoverability. If a user made a mistake, i.e. entered a wrong email or misspelled a name, there was no way to fix it later in the signature flow.

After entering names and email addresses, users that had selected Me and Others as signers would have to drag and drop their own signatures and fields onto the document.

04

What’s missing on this screen?

Discoverability. This was less than optimal in the earlier version and kept some users guessing. Only after playing with the system for a little bit were they able to figure out that they had to drag and drop the fields onto the document.

Clarity. Users didn’t realise at the start—which signer are they dragging the fields for? Themself? Someone else?

What’s next? Users were not sure where the ‘Continue’ button would bring them. How do they get to add fields for someone else?

Only when users clicked ‘Continue’ would they be brought to the screen where fields could be placed for someone else, which was not easily predictable.

Then, they would have to drag and drop fields for each recipient, which were hidden under a dropdown menu.

05

After that—the experience was fairly streamlined: we provided a simple, familiar interface with a pre-written message that users could easily customize. There was also the option to CC someone without requesting their signature, and the documents could be saved as reusable templates as well.

001

The Revamp

A vast amount of research and testing went into the eSignature flow re-design. Our purpose here was to increase usability and overall user confidence in Nitro’s eSignature offering.

Reduced Steps & Improved Usability

We nixed the Just Me, Me and Others and Just Others requirement. Research showed that some people hesitated when faced with the decision.  We thought—why shouldn’t they be able to select signers and add or modify them right in the document view, all throughout the preparation? Thus, we made it so.

  • Users can now add and delete as many signers as they want without going backwards in the process, in case they’ve forgotten to add a field or a signer.
  • Users can see all signers and fields in one place. They have a full view of signers, fields and the document.
  • Signers and fields are color-coded, allowing people to quickly scan a document and know which fields belong to which signer.
08 copy

First Time Use

All first time users will be presented with a handful of tooltips explaining how the flow works. (There aren’t too many—we know you just want to get your stuff done as quickly as possible!) This increased discoverability and learnability, which automatically increased user satisfaction. We’ve also included general tooltips throughout the signing experience for added clarity.

002

The Small Details

Micro interactions and tiny details can add positive surprise and impact into any product. Our users may not even notice them, but in my opinion, if a user doesn’t notice something that was intended, it only means one thing: great design and execution. It saves time and increases satisfaction.

  • Field snapping. We have observed how users place fields on a document and have noticed some frustration if the fields didn’t snap and looked misaligned. This is now a functional part of the new experience.
  • Precise positioning. To ensure exact placement of signatures and form data, users can see precisely where the signers’ names, signatures, titles etc. are going to be positioned on the document once applied.
  • Power-user shortcuts. Think going to another side of the screen to drag another field onto the document is a too much of a reach? Add a new field from the pop up of previous field. Simple!

Preview

The last step of the flow before sending the document out is to compose a custom message (or use the handy pre-drafted one) and CC others if they need to be kept in the loop.

In the previous version of the flow we didn’t offer a preview, but we learned that users prefer to have a review screen just to make sure they haven’t forgotten anything (like fields or signers). A quick glance at the preview is usually enough to boost users’ confidence that they are doing everything correctly.

Some of the extra stuff, such as an option to save as a reusable template gives a user powerful tools to take their productivity even further.

003

I’m proud to say that we have accomplished all of our goals with this redesign. We achieved fewer steps, improved discoverability and learnability, implemented easier error recoverability, and, most importantly, increased user satisfaction levels which increases overall confidence.

However, as I mentioned before, software products are never finished. There is always room to improve and optimize. We pledge to listen to your feedback and constantly create better, smarter products and awesome experiences that boost your productivity.

Check out the new eSignature flow in action, right here.