Product Designer
Hand.png

BMO eSign: Designing an electronic signature experience ● UX/UI Design

Describing the implementation of eSign on eTasks Portal - BMO

Intro

TEAM

eTasks Portal team, working directly with NACB (North American Commercial Banking) senior executives /stakeholders

ROLE

I was the lone UX/UI Designer on a team with 1 project manager, multiple front-end and back-end developers, 2 business analysts, and 2 QA testers.

I sat in business requirements meetings with senior stakeholders and was tasked with leading the full end-to-end design of this user flow.

TIMELINE

March - October 2022

TOOLS

Figma, OneSpan

 

The Problem

The manual process of scanning and signing documents through emails and PDFs was strenuous and time-consuming for bankers and clients.

Common pain points were:

🤕 Scanning paper documents and/or taking pictures to send to a client for signing

🤕 Requiring the use of external software such as Adobe Acrobat to sign PDFs

🤕 Having to exchange countless email chains with multiple contacts if documents required multiple signatures

In the busy day of a relationship manager and their clients, there needed to be a way to save time and reduce labor so they could focus on more important tasks.

 

Research

Instead of creating an electronic signature technology from scratch, we were wondering if we could leverage existing eSign websites out there, such as DocuSign.

Given OneSpan’s prior experience with BMO and other financial institutions, it only made sense for us to partner up with them and leverage their technology.

One Span’s dashboard in their sandbox environment.

Knowing they would be our partner, I performed a UX Audit of OneSpan’s sandbox environment, to gain information on the overall user experience that would help with this project.

 

What was I looking for? I wanted to know how they —

  • Initiate the signing process

  • Add signers

  • Notify signers

  • Add and manage multiple documents

These 4 things were the main “asks” of the business and it was important to know how we could integrate with OneSpan’s product and take elements from it for our purposes.

Sample of the UX audit

 

The Portal

In 2021, BMO introduced a self-service portal called eTasks where Relationship Managers could keep a repository of their clients, and create checklists for them to upload documents such as financial statements.

We knew we could leverage this portal by introducing an eSign capability where BMO Team Members could create eSign packages for their clients without going through multiple email chains and back-and-forths.

The before and after. The less chains, the better!

 

Task Flow

Given the complexity of the eSign process, it was necessary to make a high-level task flow detailing the essential steps and happy flow to ensure a well-thought-out experience.

Task flow for a BMO Team member creating a new eSign package.

 

The Solution

In October 2022, we successfully launched eSign on the eTasks Portal. Here are some of the features that were implemented.

 

Create an eSign Package - Banker’s View

Add Documents

The BMO Team Member can upload a single or multiple documents to be added to the package for signing. They can rename the documents once they’ve been uploaded, remove them, or add more. 

 

Add Signers

The BMO Team member can add members of their team or from their client contacts to sign the documents.

 

Edit Signature Name

The BMO Team member can edit the name that would appear on their documents when signed. This would be helpful for financial documents that require legal names as opposed to preferred names.

 

Create a Signing Order

The BMO Team Member can create a signing order - where the package has to be signed by one person before it is sent to another, and vice versa.

 

Adding signature blocks

BMO Team Members can scroll through their documents added and drag-and-drop signature fields for those who need to sign.

Once it’s Sent for eSign, all signers added to the document will be notified through email that they have a package ready to sign.

 

Managing eSign Packages

The banker can view the status of their packages

The BMO Team Member can view the status of their respective packages, to see if they’ve been completed or are still waiting to be signed.

 

Signing Ceremony - Client View

The client logs in and signs their documents

The client contact can sign directly from their mobile device.

If they have a mobile phone number associated with their account and click on the call to action in their email, they’re taken directly to their documents for signing after submitting the One Time Password.

The client contact can sign their packages simply by clicking on the ‘Sign’ block.

 

The client can view the documents they have to sign

The client contact can log in through OLBB (Online Banking for Business) to sign their documents.

 

Design Results

How are we doing?

🎉 Since its inception in late 2022, we have achieved significant progress and results!

 

How are we improving?

🧪 Following a model of iterative design, we are using research tools like surveys and heat maps to help improve our product as we continue to increase user adoption and engagement.

 

Conclusion and Takeaways

This was my first project at BMO and my first time working in a cross-functional team with multiple developers and business analysts as the lead UX/UI designer on a project.

This experience taught me how to communicate and work with team members who perform different roles to deliver the optimal product experience and solution.