A widely adopted digital Signature tool with a large fanbase gets a Mobile-friendly makeover.
Product: Authentisign by Instanet | Project duration: 18 months
Roles: UX/UI Design and Direction, User Research, Component Library updates, On-boarding, Post-Launch Feedback
The Problem:
The existing eSignature app has brand recognition, but a poor reputation for being “clunky” and out of date. Users enjoy the tools, once they can figure them out, but want a nicer looking experience. Getting new agents to use the eSignature tool is a challenge, because they are used to modern-looking tools like our competitor: DocuSign.
The Solution:
Speak with agents, trainers, and brokers to understand what they like and dislike about the current app. Uncover users’ main needs with a eSignature tool. Perform competitive analysis. Conduct multiple rounds of user validation to ensure that the new UI works for various agents across the US and Canada.
The Plan:
- Conduct user discovery research. Focus on the agents’ (aka: the end user) needs; not their bosses, trainers, or board members. This will increase agent adoption.
- Perform competitive analysis on other eSignature solutions, both in the real estate space and related fields. Identify any competitive weak spots or gaps in usability in their preferred solutions.
- Distill down the agent’s eSignature needs and find opportunities for automation. (Such as Machine learning or document scanning to detect signature lines.)
- Make it easy for them to get all the party, MLS, and transaction information into the document.
- Present UI mockups to users and iterate based on their feedback, stumbling points, points of praise, and “eureka” moments until we get a user satisfaction score of 7.5 +
- Build our flat mockups using our revised Design System (v3).
- Update our React component library with any new assets so other products can take advantage of them.
- Share our findings with the organization, including those in Marketing and Sales, so that the points of praise about the new design can be leveraged.
- Perform a “soft launch” with a select group of users to monitor their response and see if there are any stumbling points with the redesigned product.
- Before the official launch, embed Pendo into the new app so that:
a) we can monitor usage, user paths, and “UI hotspots.”
b) we can add on-boarding tips to the UI easily
c) feedback forms can quickly be added and monitored by Product
The Findings
- Agents want regular updates on the status of eSignature packages, since the real estate deal successfully closing relies on the documents being signed and returned on time. (Or before other offers have been submitted.)
- Agents desperately want an eSignature solution that works better on a mobile device or tablet.
- Agents want to be able to create an eSignature packet on-the-go and then immediately pass their device over to their client for signature.
- There are Machine Learning opportunities to:
- Detect signature fields on PDF documents and eForms.
- Create “tool templates” that place Signature blocks, Initial blocks, and other interactive elements onto the form without the user needing to specify where each is placed.
- Suggest missing fields or annotations.
- After capturing signatures, detect how many signatures are on the document, even if our eSignature tool was not used or it was a “wet signature” with a pen on paper. (This number can then be compared against how many were needed.)
- A good chunk of users rarely log in to the product (5 – 6 times a year) so it needs to be very self-explanatory. On the flip side, the high-earning agents log in constantly and don’t want to be bogged down by “fluff” and wizard-style walk throughs.
- Many users found the icons and terms within Authentisign to be vague, unhelpful or difficult to interpret.
UX/UI Design
This redesign was one of the first to formally adopt the Helix Design System components. It was built with Helix 1, and will eventually be updated to Helix 2.
Below are screenshots of the actual Authentisign app in a browser window.
The End Results:
We launched a brand new eSignature product early in 2020 and noticed an immediate up-tick in the number of eSignature packages being created and sent. Based on in-product ratings, the new eSignature tool was rated a 4.5 out of 5! Users were spending less time creating digital signature forms, due to the new interface, and our support calls gradually started to diminish.
We swapped bulky toolbars and under-used tools for sleeker side tabs that held far more useful tools. We heard from brokers and trainers that the new UI was infinitely easier to train on. And agents began creating YouTube and social media reviews on the new Authentisign, praising the new look and sharing tips on how they like to use it within their work flow.
Over 29 million eSignings are created every year across Canada, the US, and Mexico. Authentisign is a module within Lone Wolf’s Transactions application. This app alone creates USD $38,000,000 revenue per year.