The Kickoff

A Mobile-Friendly Signer Experience

Hundreds of thousands of documents are signed using HelloSign every month. Since a big percentage of them are contracts and agreements happening on the go, it was imperative for us to optimize the experience for mobile devices.

The Kickoff

The Kickoff

Before the redesign, our signer page was nearly impossible to use on mobile devices. We wanted to change that and provide our users (and our users' users) an experience that's seamless across the board. 

We kicked off the project with a competitive analysis by digging deeper into what some of our competitors were offering as far as signing options were concerned. We realized that our signer experience lacked some of the best qualities that we found in other signer experiences. To put our hunch into a more concrete, measurable hypothesis, we took to usertesting.com. It was the perfect platform to test our experience against a few others, mainly to set a baseline for us to work with.

 

 👆🏽 Low fidelity wireframes to get the juices flowing.     After gaining invaluable insight from the competitive analysis and user testing, we started to brainstorm solutions for the problem that we were trying to solve. We came out with two main observations that drove the rest of our decisions:  1. It's extremely painful to read and fill out detailed documents on a small screen.  2. As users scroll through long form documents, it's easy for them to lose their place in the document.  These conclusions helped us go back to the drawing board to brainstorm solutions that address some of the top concerns.

👆🏽 Low fidelity wireframes to get the juices flowing.

 

After gaining invaluable insight from the competitive analysis and user testing, we started to brainstorm solutions for the problem that we were trying to solve. We came out with two main observations that drove the rest of our decisions:

1. It's extremely painful to read and fill out detailed documents on a small screen.

2. As users scroll through long form documents, it's easy for them to lose their place in the document.

These conclusions helped us go back to the drawing board to brainstorm solutions that address some of the top concerns.

1_getstarted_2.png
blank.png
The Solution

The Solution

To address the concerns mentioned above (and a few others), we introduced a static navigation bar at the top of the page that would guide the user through the entire experience. The navigation bar has a 'required fields' counter which tells the user how many required fields are left to fill out. It also has a 'next' button that takes the user to the next field that they need to fill out, regardless of where he/she is on the document.

Another neat interaction that we implemented was to zoom the user in to the document and anchor them to the first field as soon as they click on 'get started' on the initial screen. This helps with the legibility of the document, making it a lot easier to read and browse through the content.

 👆🏽 Signature creation screens.

👆🏽 Signature creation screens.

 Our initial goal was to increase the conversion rate from 23% to 70% on mobile and we ended up exceeding that goal by increasing the conversion rate form 23% on mobile to 75%.  We also saw a jump in desktop conversion rates. It went from 75% to a healthy 81%. 

Our initial goal was to increase the conversion rate from 23% to 70% on mobile and we ended up exceeding that goal by increasing the conversion rate form 23% on mobile to 75%.

We also saw a jump in desktop conversion rates. It went from 75% to a healthy 81%. 

 We've recently added a couple of nice features to our signer page: 1. The ability to delegate a document to someone else (if you're not the right person to sign the document). 2. The ability to decline a document.

We've recently added a couple of nice features to our signer page: 1. The ability to delegate a document to someone else (if you're not the right person to sign the document). 2. The ability to decline a document.

5_delegate_comment.png
blank.png
6_confirmation.png