About the company
SpotDraft is a powerful, award-winning end-to-end contract automation platform that helps sales teams close deals 12x faster, automates all of the legal team's manual tasks, and maintains complete control over contracts.
Background
Intelligent contract management tools save legal costs and eliminate losses due to poor negotiation or contract drafting. Spotdraft helps companies create, manage, and review legal contracts. As a part of their product offering, they have built out their editor - think Google Docs - but specifically built for the “contracts” use case. There is no specialized set of tools for legal counsels to review contracts faster. They end up using generic tools like ¯MS Word and Google Docs to review agreements.
My Role
Lead UX Designer - identifying issues, defining problem scopes, prioritizing tasks, designing solutions, conducting testing, and overseeing the implementation process.
Team
Team of 1 Ui designer, 1 founder, 1 product owner, and 1 senior project manager
Timeline
3 months | Jan 2023 - Mar 2023
Client
Companies who love the spotdraft experience
Problem
Statement
How do we increase engagement and promote a feedback loop in Spotdraft ?
UX Metrics & KPIs
User tasks: completion rate, error rate, time on task, ease of completion.
Solution & Impact
01
Reducing the learning curve by adopting commenting UX from Microsoft word (the most used software by lawyers across the world)
02
Improved method of adding, and reading comments in contracts to have a more seamless reading experience.
03
Filtering and notifying: Ensuring the user doesn’t get lost between old and new comments
04
Reaching 12,000 customers
The opportunity
Commenting to provide feedback, is a key use case for collaboration, but this functionality was limited in Spotdraft
The key goal at SpotDraft is to transform the contract drafting and review process - similar to how companies like Adobe and Figma have transformed the design process.
I led the redesign to improve their user experiences for commenting, and collaborating.
Understanding
The contract negotiation process typically involves multiple rounds of revisions and exchanges between the parties involved
The lifecycle of a document begins with creation, then sharing it with others to get feedback, then editing - iterating until the final draft and approval before sending to the external client. Users could not complete this feedback loop in Spotdraft and were leaving Spotdraft to complete their workflows. We were losing users!
It was difficult to give and receive feedback, edit, iterate, and monitor changes in Spotdraft. Discoverability being a top issue, with 8/10 users complaining that they didn’t understand how to comment on the doc. It was difficult to keep track of comments in context to the document especially when the comments were long. Users couldn’t easily view a past comments or changes to the doc.
These had all been customer requests in the backlog, as they solved key use cases for our users to collaborate with their teams and provide feedback. However, because they were unable to do this in Spotdraft, we were forcing their users to use other software like Gdocs for contract negotiation. This created an annoying back-and-forth process for users.
Project Goal & Scope
Our Vision - Spotdraft as a workspace and not a storage space
Unifying a fragmented commenting experience and increase commenting efficiency while making the feature scalable and user friendly
Competitor Research
What are other key players doing in this space space ?
An extensive study on our competitors showed me that spot draft was lagging behind in this key area. We were playing catch up. The client agreed that this was a big problem for users as validated by user interviews and surveys carried out by the team. Our users were mostly using collaborative platforms like gdocs, but the platform lacks essential features needed by legal teams -
Drawbacks -
-
Loss of comments and approvals when new version uploaded
-
Manual clean-up of internal comments before sending to counterparty
-
Lack certain functionalities that legal users typically rely on, such as track changes.
View research doc here
Research Insights
What our users struggled with
“Where do I add comments from”
“A lot of the time I can’t find comments I am tagged in”
“I find it challenging to understand the context of a highlighted text because I can’t see the comment without clicking on it. So I have to frequently click on different highlights just to get context on the agreement”
We engaged the entire Spotdraft team, extending beyond research and design. This made it more collaborative than the traditional sharing feedback loop. To reinforce this, we conducted several internal sharing and brainstorming sessions.
It was clear that we should focus on making the experience more effortless. To make it feel more effortless, we focused on 3 things: speed, clarity, and accessibility.
Before
After
Understanding the system
Not reinventing the wheel
The revamp of the commenting feature while being a standalone one, had to fit cohesively with the rest of the app. So i spent some time understanding the app’s system model and identifying opportunitites for reusing existing components wherever possible.
Identifying edge cases and address design specifications
After I had detailed out the screens involved in the end to end flow. To ensure my opinions weren’t biased I made sure to show the team the designs I was most confident about, get their feedback, conduct guerrilla tests, and then go back to flesh another iteration based on what din’t work. I worked closely with the engineer to understand the technical constraints and edge cases. This step was critical to ensure that the design solution was feasible within our time constraint and can be effectively implemented.
Final Design and Prototypes
Reducing the learning curve for creating comments
The central feature of this project was helping users understand how to comment on the doc. Adopting commenting UX from Microsoft Word we made commenting much more accessible by improving component placement and using a mental model that is familiar to lawyers. Clicking on comments now jumps the users to the exact sections on the contract where it was made.
Scoping comments
Comments are scoped to three levels- Me, Team and External thus completely removing the need to clean up comments before the contract is sent out to the counterparty (external). Now, users can tag their team members in comments and ask them to collaborate on the same document together.
Viewing and filtering file comments
One significant hurdle I faced was navigating technical constraints, especially one that led to the loss of team comments upon uploading a new version. To address this, I implemented a system to retain a record of every comment in the sidebar and created a method to link those comments back to the new version. Now users can filter comments from a single section, enhancing usability.
Overlapping comments
An edge case we tried to solve for was locating and keeping track of comments on a heavily commented/ negotiated document with multiple comments in in a single section/ sentence of the document. However, implementation proved costly for phase 1 and shifting priorities delayed the launch of this feature.
Oppotunity
Not only was this project important because it was one of the top requests we continued to hear from customers, but it also provided tremendous value to the business. We saw commenting and related features as a way to increase user engagement, keep work ( and users) in Spotdraft, and satisfy market demand.
The opportunity for spot draft was specific, we could be a lightweight and ad-hoc tool for review scoping and feedback. Our users were turning to Spotdraft to not only store all their legal contracts in one place but also make changes in their contracts. We prioritized a few key features that would be most valuable and feasible.
-
Threaded and resolved conversations to track the status of work
-
Ability to scope comments to send a contact to the client without all the team comments (reducing scoping time)
-
Receive relevant notifications to be informed and up to date on any new comments on the doc
Exploration and Iteration
1. Comment creation and scoping
Initially I explored many different ways a user would be able to create a comment, from the sidebar, header, comment input. The most intuitive entry point was to add the comment on the doc itself, so we pulled comments out of the side tray. We tried multiple iterations of the comment box component, weighing the pros and cons of each. Inputs from the dev team on feasibility and effort and customer feedback helped validate the solution.
Before
After
-
Comment repository and organization
Part of this project was also taking into consideration the entire commenting experience. To ensure a consistent user experience and streamline development I adopted a UX pattern with clear section division and intuitive interactions. I reduced redundant filters, relocated operational sections to the top right and organised comments in context to the doc.
Problem
Misplaced UI causes mislabelling and a separated experience in comment creation
2. Comment repository and organization
Throughout the project, requirements changed and new constraints were uncovered. One in particular was understanding how the side bar interaction worked. Legal / business users may use the definition section from the sidebar to look up terms in the agreement while commenting as part of their workflow.
The existing site failed to effectively accommodate this switch, resulting in a cluttered layout when both tabs were opened simultaneously. We inadvertently overwhelmed users with an excessive array of features and options impeding their efficiency. I resorted to an overlay feature reduce cognitive overload. By anchoring our document to the left side of the page, we optimized screen real estate across all sizes, maintaining the document positioning when the sidebar was opened. I worked closely with dev to figure a way to enable this switch without losing their work.
Problem
Arbitrary sidebar configuration hinder efficiency and speed in workflow
3. New feature Onboarding
Recognising that the primary issue users encountered was uncertainty about how to initiate comments, we needed a upfront call out to inform users how to use the revamped feature. Initially, we devised an elaborate solution to inform users of the changes. However, during usability testing, we observed users bypassing the onboarding process by simply clicking. Thus, we opted for a straightforward, in-context tooltip approach to facilitate user discovery of the commenting feature. The comment icon is strategically positioned alongside the document to ensure it does not obstruct the text, maintaining consistency in orientation.
Before Over-engineered onboarding modals
After In context onboarding tooltip
Usability Tests
We conducted 18 rounds of usability testing with real users on our iterations to ensure our designs were making user’s workflow more efficient.
Through constant collaboration with dev, we could validate the effectiveness of our designs.
100% of users during usability testing felt the commenting experience was significantly simpler
Result and Impact
The project was a success with our users
-
Significantly improved overall task efficiency by reducing interactions (clicks and search time) needed to find a specific comment by 30%, resulting in a 20.7% increase in user workflow
-
We saw a 40% reduction in time spent on comment creation
-
The project helped the company gain accomplishments, including being recognized by Fast Company as one of the most innovative companies in the world.
Future Scope
SpotDraft AI layered on the Microsoft Word editor
As Spotdraft evolves, recent advancements include the integration of Microsoft Word within the platform and the implementation of AI to collaborate and review contracts up to 5 times faster.
Project Learnings
This was a really exciting and fun project for me to work on as it provided real value, and involved a ton of research and detailed interaction work. I learned some important takeaways in relation to product and business processes
Balancing speed vs perfection
I learned how to define a true MVP and through rapid iteration and learning from failure. i learned how adapt to changes , have the courage to lead with conviction and still deliver the best within strict deadlines.Adapting to a “ good enough to launch” mentality and understanding the value of rapid iteration and learning from failure was a huge shift.
Improve risk tolerance
Learning to embrace risk, to wiegh it against potential reward, and to make peace with the possibility of failure were some important takeaways related to product and business.
Embracing constraints
I had to work under very strict technical constraints. What I realized is that constraints don't necessarily impede creativity, but on the contrary, can provide a lot of focus and direction. I found the most effective approach was to embrace contraints and work together to find counter solutions.
Link to my Figma File here
Spotdraft User
“I love the new commenting experience, its a lot more focused and simple ”
Co-Founder , Rohit Salim
“.. incredible knack for delving into the intricacies of a project, ensuring that every aspect is flawlessly designed. These skills will take you far! ”
