Vendr
Capture Contracts
Overview
Vendr is a platform for companies to find, buy, renew, and manage SaaS. Within Vendr, my team worked primarily on contract collection and renewal management.
An intiative my team tackled was called Capture Contracts — users had to manually and tediously enter their contract data into Vendr. Our solution enabled users to have their contract data automatically extracted from their contract documents using AI, so that they can have accurate spend reports, on-time renewal reminders, and access to key reference documents for rationalizing renewals.
My role
I owned design for this project while working closely with my product manager and tech lead within my product team. We also worked with another team — the data team, who powered the automatic contract extraction. I also worked with our researcher.
The Problem
To add a contract to Vendr, users must manually enter contract data into a form. This is tedious and the value is unclear, so when users are prompted to add their contract at the end of a Request, they don’t upload the document and/or they never complete the Request.
Users cannot record itemized pricing (“line items”) in Vendr, which they need to reference in order to understand expected spend and potential renewal cost increases. To work around this limitation, they must view the original PDF to find line item data.
Vendr needs to collect structured and accurate contract data, to power buyer insights for our customers. Invaluable buyer insights are crucial for Vendr’s business.
The form to manually add a contract.
Contract overview, which I revamped as part of this project.
Solution Overview
Automatically extract users’ contract data from contract documents using AI. Allow users to easily check extracted fields or fill in fields that were not extracted, by showing the form side-by-side with the contract document.
Let users record contract line items, and show those details in a uniform way for each of their contracts, so users can reference them without needing to open the PDF.
To meet Vendr’s business goal of collecting contract data, make it required for users to upload a final contract document at the end of Requests, without decreasing the completion rate of Requests.
The Design Process
Goals
Reduce time on task for manual contract entry vs automated extraction.
Increase the percent of added contracts with contract PDFs captured.
Maintain the current amount of added contracts.
Capture contract line item data to power other parts of Vendr’s business.
Initial explorations
After aligning on goals, I like to start every project by doing desk research on other solutions, and seeing where I can borrow ideas and where I might do things differently. After desk research, I dove into explorations in the form of whiteboarding with teammates and low fidelity wireframes.
For line items, this meant a lot of conversations between me, my PM, and the data team. We needed to structure line items uniformly across different line item types (contracts can be structured wildly different), and in a way that was easily understandable for the user but also feasible for the data team to auto-extract.
A wireframe that we anchored design discussions around, especially when discussing engineering constraints. I explored future use cases, like bulk uploading contracts.
Higher fidelity iterations + Research
After iterating through low fidelity wireframes based on internal feedback, I moved into higher fidelity. This project consisted of many pieces I needed to iterate on and refine based on both internal and external feedback, but here are some key decisions.
A key decision was the structure for the contract form, which now needed to support reviewing and editing extracted line items.
An early iteration used a stepped form, which would be optimal if extraction could consistently and accurately fill out most fields. Then, the user only needs to review the extracted fields. However, this form was not ideal if the user needs to edit extracted fields.
I moved all fields to a single step, and tried making the extracted line items more human readable. However, this wasn't ideal when comparing and reviewing extracted values, since line items in the contract PDF were almost always in a table.
My final iteration had the extracted line items in a table, so the user could easily review them side-by-side with the original contract.
The form design also needed to communicate to the user which values were auto-extracted, and how they could edit them if needed.
I explored different interactions for editing extracted values. I eventually went with Option C.
To prime the user in understanding the purple sparkle signaled an extracted value, I started seeding that theme from the initial screen to upload your contract file. Today, the purple sparkle pattern is used throughout the Vendr app to signal automated information.
The final design, which succeeded in usability tests. Users understood what the sparkle meant even before seeing the tooltip.
I worked with my researcher to run moderated usability tests for 5 customers. Although they went very smoothly for the most part, the insights resulted in some changes:
Allowing users to add line-item-level discounts manually. Although we could only extract contract-level discounts, participants were confused by not seeing line-item-level discounts as an option.
Creating an empty state for the “User licenses” and “Non-user licenses” subsections of Line Items, so that users understood those were the two options.
Final prototype demo
In summary, this solution solved for Capture Contracts by allowing procurement teams to easily upload their contract documents and have their contract data auto-extracted.
Results
The amount of added contracts with a document attached increased 93% — key for Vendr’s business, and a need of Admin users.
The amount of added contracts dropped by less than 1%.
Adding contracts with auto-extraction takes less than half the amount of time it took for manual entry.
Surveyed beta users noted overwhelmingly that this feature was easy and clear to use (Customer Effort Score of 92%)
Vendr now collects line item data from contracts, which powers the pricing insights we deliver today.
Kudos I received
Some kind words I received from my colleagues 🥹
“Hats off to Carolyn on the design for the new contract entry form. It may not be immediately obvious, but this design is extremely flexible and enables the Spend Optimization and Data Catalyst Pods to be aggressive with small steps and make regular shippable progress in parallel.
It’s not uncommon for designers to fight incrementalism. Carolyn’s design here enables it. 🚀”
“Highkey blown away by how you tied the prototype together 🤯 Carolyn, felt like I was working with an actual working app and not Figma.”