Duration

6 months

Role

Product designer

Product designer

Team

Context

VitalSign is a French LegalTech start-up offering B2B eSignature services. When they reached out to our team at Single Quote, they had one request: that we design a tool to allow their customers to go from contract creation to signature all from one place. After six months of collaboration, the result of that request is CustomCM, a browser-based solution aiming to simplify the contract lifecycle management process. For this project I was the sole designer, in charge of researching, ideating, designing, and implementing the whole product by working closely with our client.

Research learnings

We didn't know much about the "contract lifecycle management process" (scary term) before starting this project. Thankfully, VitalSign's customers were kind enough to share with us how they handled the signature process during user interviews. We mainly learned that:

Most contracts are written in Word or Google Docs

The main contract format is PDF

Files are stored on shared hard drives or cloud solutions (Google Drive, One Drive...)

Signee information is collected prior to sending contract through email communication

Signature status is updated manually in ERP or spreadsheet

It was clear to us how tedious the process was, and how much of it could be automated.

Contributions

Design system

Throughout the design process, I built a design system with reusable components. I wanted a modern and clean look with great legibility to allow future users to focus on what matters most: writing contracts. I also created various branding assets based on the colors and typography we chose for the tool.

Signatures manager

Keeping track of your contracts can be tricky, and boring. Spreadsheets do the job but are prone to user error. ERPs are… well, ERPs. VitalSign users voiced their frustration, and we heard them, so we came up with a dashboard that automates most of their tasks.

With the signatures manager, users can quickly send, view the status, and filter through contracts. They're also able to use PDFs or contracts made within VitalSign and send reminders to pending signees. This saved users considerable time, automating the way they update and keep track of all their contracts.

Contract editor

What does the process of creating a contract look like? According to VitalSign users, it looks something along the lines of: open an existing template in Word or Google Docs, scour the document for elements that need to be replaced, copy & paste signee information from an email, export the contract as a PDF. And I'm not even talking about what comes after that. But what if there was another way? What if we allowed people to create contracts that weren't limited by the format they're exported in? What if contracts were dynamic? That's precisely what we explored and… turned into reality.

VitalSign's version of a dynamic document editor allows users to add typed variables (text, date, number) and decide whether or not they need to be filled in by the signee later on. Users can also use formulas to dynamically render variables based on signee input. That's it. Contracts were now dynamic and allowed whoever had to sign one to enter information themselves. No more back & forth through email. For the text editor, we kept it as simple as possible, adding features users told us were necessary to create their documents.

Contracts library

VitalSign users are mostly over 35 years old, working in admin, accounting, or HR, with a varying level of technical literacy. For these reasons, it was important that whatever solution we came up with felt familiar to them, removing any kind of learning curve (at least trying to). So when it came to automating the storage process of signed contracts, we decided to not reinvent the wheel and use established patterns.

The result is a simple file library, similar to other tools VitalSign users have been using in the past. They can create folders, reorganize their files, open them, and move them around. Simple. But now users don't need to manually transfer files from VitalSign to their cloud storage solution. And that made them happy.

Signatures, contacts, templates

There is a lot more features to go over, like how we handled the signature process from a signee's perspective, how we allowed users to import their contacts from Gmail and Outlook, or how we facilitated the creation and use of contract templates. We put a lot of care into answering all the pain points users pointed out to us when interviewing them.

Achievements and learnings

Designing and building this product was a great challenge and taught our team a lot. Our agency built this for a client that was very satisfied with the result, which was a victory for us. Today, thousands of contracts have been handled through VitalSign. But as a product designer, it's always difficult to measure the success and iterate on features when handing off an entire product to a client. I also would have liked to test things more. It was great talking to users to understand their needs, but it would have been great to validate our ideas with them.

Final deliverables look nice, but a lot more went into this project. Want to learn how VitalSign came to life, from research to ideation to handoff?

Final deliverables look nice, but a lot more went into this project. Want to learn how VitalSign came to life, from research to ideation to handoff?

Copy email address

Copy email address

Get in touch and I’ll get back to you asap