Contract management platform
Design team of 2
Justin Wong, UIUX Designer
Direct impact to the demo prototype used to define an MVP, which has been shown to investors and during workshops partnering with WCC (World Commerce & Contracting).
Report to the CEO and the operation manager for design stand-up
Product goal
An contract management platfrom that leverages AI to auto-simplify contracts with the end goal of providing effective negotiation deals for buyers and sellers. The app streamlines the negotiation process by cutting out the process of redlining and communicating through juggling multiple third-party channels(message, email, video, phone call).
My contribution was focusing on the product goal to auto-simplify contracts, in which users store and organize contracts and legal clauses.
Theme
Productivity, workplace app, technical legal web app.
Environment
Early-stage startup in pre-seed series
wore a lot of hat; fast turnaround; close to the business need as I reported to the CTO
Skills
Internal interviews, mapping, wireframe, prototyping, motion design
My responsibility
● Synthesize research findings into insights ● Identify user pain points and usability issues
Evaluate the usability of previous design flows
Understand and define design goals based on research
Research and learn about machine learning frameworks filed for patents
Define design scope and solution with the founders, a UX designer, developers, and clients
Suggest strategies to improve usability in the user flow and to increase the product’s value proposition
● Ideate and prototype design solutions in low and high-fidelity
Constraints
Limited design guidance
Limited access to data
Limited engineering resource
10 user interviews from targeted users
Research
The research team conducted research including 10 zoom interviews with stakeholders who have been involved in negotiation from various companies ranging from general consul, procurement manager, real estate manager, to manager director
Interview Protocol
Based on the user interview note, the research team mapped out their research findings of negotiation and contracting in affinity diagrams; they synthesized our findings into 3 target groups - Primary Negotiator, Key-decision Maker, Supporting Role. Next, the research and design teams narrowed down to these frustrations
Negotiation problems
- cognitive noise long pages of contract in which complex legal language is often difficult to understand by non-lawyers
- misaligned decision making due to different incentives/misinformations when multiple stakeholders( legal, finance, sale etc.) involved in negotiations
- outdated collaboration tools(internal and external) - email/phone calls
- many contracts stored in different places for negotiation, losing time on communication & forming aligned strategies
- transactional business interaction
- static legal-centric contract relationships
- lack of resiliency & trust
- Heightened due to remote work
Negotiation challenges
Tools used during negotiation
Define what to design
Based on our research, we figured in order to provide effective negotiation, our platform should centralize negotiation and contract management as one. So that we can streamline the process of the end-to-end negotiation process all in one place.
We first needed to focus on designing a user-friendly flow for the pre-negotiation stage to simplify contract, so legal language can be better communicated to business people like sales and purchasing agents
Our solution
Contract analyzer (AI & manual highlights on key terms)
Self-service clauses library where supporting teams can organize preapproved clauses as reusable components in contract.
Contract assistant
Furthermore, the company had an idea of a smart assistant but wasn’t sure how to execute that. So my design team pitched on having an interactive chatbot as a “contract assistant”.
User flow
Grey area - the area of my contribution
1.
AI-generated Contract
The goal is that the Bot can help reduce the manual work user go through to creating a contract. I drafted the conversation by observing how legal communicates with Sales.
In addition, based on user interaction, the chatbot would guide users to choosing the right clauses, which will be used for creating a contract.
2.
Self-service Clause Library
Legal team and other supporting teams can organize pre-approved clauses as reusable components in contract and upload media like images/videos to make clauses more understandable.
Goals
Integrate WCC Tips to get inspired by design patterns for contract
Clarify the classification of clauses
Make it more distinguishable between the view and edit modes
Problems
Business
I followed the business goal in integrating Intellext platform with WCC resources. But it wasn’t clear if users would find the WCC Tips integration to be useful.
I had a fast turn-around, but if I had more time, I would’ve done a discovery research to see if users would find WCC tips to be helpful.
By the end, we decided to remove the Tips concept from the clause screen.
User
It wasn’t clear to the user which is editable & which is view-only.
Iteration sketch
V1 - Clause library + a button for opening WCC Tips
Design Change
View screen (everyone can view)
Edit screen ( only enable by team with permission)
The border around the content shows it can be edited
One edit button allows editing all contents
The drop-down button shows user to expect a drop-list
Edit media button allows user to add and delete media
Clause library dashboard
Improved the visual search and added tag filter as well as adding the WCC Tips as a contract resource
3.
Contract analysis * live
by AI-extracting terms + manual extracting terms & contract modification by user *in development
Reduce contract reading time by AI scan on extracting important terms to a term sheet, which would be used for strategic negotiation
AI discovers and maximizes contract value
My sketch of the new layout, in which those desired features are arranged
Previous design
The user experience was poor in the contract analysis. User had to go through a list of each term and find one by one on the contract, which was time-consuming. Also, we wanted to incorporated editing ability on this screen which we didn’t have
4.
Contracts Comparison * live
This feature was requested by the customer, who said they often received multiple versions of the contract from their counter-party. They would like to spend less time comparing contracts.
V1 - toggle tab
Initially, to keep the contract legibility, our design showed one pdf, with tabs to toggle different documents. However, during user testing, this design did not make it clear to the client because the toggling feature was not a familiar design to them
V2 — side by side
We changed to a design that has contracts side by side. This view made it more clear to the client.
However, there were issues with this design.
Color is not friendly for color blindness
Color is often associated with the meaning of accurate and wrong
V3 - side by side
In the end, we went with the dark version with filled highlights
User couldn't grasp the filter icon, so I added a label to make it clear
Added the labels of content changes
Removed the redundant scroll bar as the centered scrollbar syncs both doc
Used complementary color that passes accessibility
Auto-zoom-in when clicking on a content change
Light version
Underline vs Fill
Dark version
My impact
Successfully executed our design into a prototype and MVPs, which gained us traction and showcased our feature update that solves our customer needs.
Influenced the team to involve the design team early by demonstrating that design thinking is crucial to the process to get to their perceived nice-looking product.
Contract simplification in the pre-negotiation stage
🤖 Suggests personalized move to creating simplified contract by AI contract assistant
Pitched to CEO the use of chatbot - contract assistant as a global feature to help user with creating a contract/starting a negotiation
⚙️ Reduces the steps of AI terms extraction to quickly discover and maximize contract value
Revised the user flow with more intuitive and efficient steps considering both auto and manual inputs
📈 Increases product value in the contract management
Launched the compare features in the contract library
Clause library
Long-term impact
The smart way to negotiate
📈 Accelerate deal closures
⚖️ Save legal costs & reduce compliance risks
📈 Maximize contract value
If I have more time, I want to map out the navigation holistically to make sure feature hierarchy makes sense.
Takeaways
There were many challenges such as organizational change and low design awareness in the beginning. But it was still a good experience; in my first startup experience, I was given a lot of accountability.
I took initiatives to do more than what I was given. My ability and strong work convinced the founders that UX plays a valuable contribution to our product.
I stepped up from a “Figma designer" as they perceived to a key member who helped identify the customer pain points and brought a unique perspective that improves the value proposition in early discussion.
In Q1 Q2 of 2022, they pivoted to real estate market and I led design in client-facing meetings to conduct early user interviews.
Lead in design planning and specifiying product requirement
Benchmarking on 7 real estate sites
Ideations…
What I’ve learned
How to work with another designer when we have different views on small details; how to break down the feedbacks “yea, I like/don’t like that .” “ Let’s go with the previous design as I have no preference.”
When to be detail-oriented and when to move away from less prioritized tasks from continuous learning e.g technical feasibility, legal space, business plan.
I thought about “what really matters to the user and the business now and future?” “ what work should I focus on when the founders want to try out many ideas?”
Not simply following the business goal from the founders and at times I learned to push back to do user research and market research that they didn’t prioritize.
The most important learning is that design is not a linear process. It’s fluid, and at times, you need to step back to verify your understanding.
Most time, I’ve not been given a clear product requirement; however, I didn’t let that ambiguity blocks my creativity in my design process. Even in defining phase when they struggled with finding the “right” solution and talking about ideas was ineffective, I was able to present their ideas in rough sketches and lo-fi wireframes, which helped them to compare different solutions that were hard to picture.
Besides, I gained a huge interest in legal ⚖️ and expanded my knowledge of negotiation, machine learning, and the US legal system. It was rewarding to work on something that could innovate the traditional way of making and managing legal contracts with efficiency by technology.