Growth Hacking The New DocuSign Experience

Courses on Node.js, React
and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →


The DocuSign Momentum 2014 conference was a huge success, attended by over 1,200 people and filled with many announcements of new developments. One was a culmination of many years of hard work for DocuSign product engineering — the re-imagined web application dubbed the New DocuSign Experience.

The web app is fast, beautiful and well thought-through. It was a pleasure to watch its live demo on a large screens and hear tons of positive comments from glad DocuSign customers.

Being a part of the growth hacking team and its team lead / ScrumMaster, I had the chance to work on a few important features:

  • Responsive and dynamic homepage: certain sections on the homepage change based on account types and states, e.g., show “Your plan is expiring in X days” for trial users, but “You have Y documents left before reaching your limit” for freemium ones.
  • Visual notifications: special messages conveniently spread across the app, which are triggered dynamically based on user account states (similar to the dynamic homepage).
  • Analytics: removing old page-view-based tools in favor of event-based ones (go Mixpanel!).
  • In-app upgrade: before, it was not a smooth experience and required multiple logins, redirects and was a plain PITA.
  • Landing page for Sign a Document: when users self-sign docs, the recipients (CCs) see a nice page that prompts them to sign up.

The stats are not available yet. But I thought that it might be interesting for someone if I share these tweaks, and compare them with the old behavior. Here is the breakdown.

Dynamic Homepage

Since launching the beta in October, we listened to our users and redesigned the homepage to emphasize the most useful information:

The New DocuSign Experience homepage

The New DocuSign Experience homepage

Our designers and UX also made the most used functions more prominent, e.g., Sign a Document and Upload a File.

For paid users (Professional, Enterprise, etc.), we show a “What’s New” section.

Sidenote: If you like this post and interested in a corporate on-site JavaScript, Node.js and React.js training to boost productivity of your team, then contact NodeProgram.com.

"What's New" section for Professional DocuSign users.

“What’s New” section for Professional DocuSign users.

In the meantime, there are different sections for free trial and freemium users. For example, this account has only 9 days left on its trial:

Prominent section showing features and number of days left for free trial users

Prominent section showing features and number of days left for free trial users

Contrast this with the Classic DocuSign Experience homepage:

[Sidenote]

Reading blog posts is good, but watching video courses is even better because they are more engaging.

A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course!

Go check out Node University which has FREE video courses on Node: node.university.

[End of sidenote]

The Classic DocuSign Experience

The Classic DocuSign Experience

The same approach was implemented for the Account Summary page, on which we have different layouts for different types of accounts. For example, the Account Summary page in the New DocuSign Experience for a freemium account with five documents left:

The Account Summary page in the New DocuSign Experience for a freemium account with five documents left

The Account Summary page in the New DocuSign Experience for a freemium account with five documents left

Let’s compare it to the Classic DocuSign Experience:

The Account Summary page in the Classic DocuSign Experience for a freemium account with five documents left

The Account Summary page in the Classic DocuSign Experience for a freemium account with five documents left

Visual Notifications

Similar to the dynamic homepage section, we strategically placed modals, top banners, header buttons and other notifications.

DocuSign is a mission critical system when someone needs to find a contract from many years ago or sign a buying agreement for their new house (to outbid other buyers). But what if a trial account has expired or the limit of sent documents has been reached? No bueno!

The New DocuSign Experience prominently notifies users if they are close to reaching the limit of documents they can send.

The top banner notifying users about the limit

The top banner notifying users about the limit

And this modal notification explains the benefits of upgrading, e.g., you can send unlimited documents.

Document limit modal is shown after sending documents

Document limit modal is shown after sending documents

Analytics

As more apps become less web-ish and feel more and more like desktop software, the whole notion of page views stops making sense (Bullshit metrics). This is definitely true for our think-client app. We built it using an in-house framework on top of Backbone.js and CoffeeScript, and it often provides myriads of views on a single URL.

It’s important to focus growth on a single metric that reflects the essence of the product/company. This metric is called one key metric (OKM). For us, the OKM is sending documents.

Send Document is the DocuSign one key metric

Send Document is the DocuSign one key metric

In-app Upgrade

It’s just common sense that if upgrading accounts is challenging and requires multiple logins and actions, users will be less inclined to pay. Therefore, the streamlined in-app upgrade flow takes users straight from the New DocuSign Experience no matter what they where doing, automatically logs users into the payment system which determines the best successor plans, and returns back to the work in the app. For example, a Thank You page with a redirect timer:

A Thank You page with a redirect timer

A Thank You page with a redirect timer

Landing Page for Sign a Document

One of the features most heavily used is when people are asked to sign a document either sent to them by email or scanned from a physical format. These people being exposed to wonders of digital age upload a document to DocuSign, sign it and send it to somebody else. This feature is called Sign a Document, and it’s accessible from the homepages (refer to the previous screenshots).

Previously, DocuSign was sending PDFs. Now, the email takes recipients (people who asked for the signed documents in the first place) to the landing page with page view on the left side and a signup clearly featured on the right:

Landing Page for Sign a Document

Landing Page for Sign a Document

This landing page is important because, more than likely, recipients didn’t even know about DocuSign in the first place, otherwise they would have initiated the signing from our service!

In the future, we plan to A/B test this page with 5–7 different layouts and copies.

Summary

Thank you for sticking with me. Personally, I found these changes very creative. They might serve as an inspiration for someone else.

I know that there wasn’t any data in this article, and that the changes are mostly visual tweaks based on intuition, but hopefully time and metrics will soon prove the hypothesis. :-)

Courses on Node.js,
React and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →

--
Azat Mardan
Azat Mardan avatar
https://www.linkedin.com/in/azatm
To contact Azat, the main author of this blog, submit the contact form.

Also, make sure to get 3 amazing resources to FREE when you sign up for the newsletter.
Simple.
Easy.
No commitment.

2 thoughts on “Growth Hacking The New DocuSign Experience

  1. Pingback: One Year with Capital One: Lessons Learned

  2. Pingback: Time to Up Your Node.js Skills

Leave a Reply

Your email address will not be published. Required fields are marked *