OUTCOME
overview
ideation
final design
Takeaways

trusli

An AI-powered management platform for procurement teams.

Team

Jason Wang (UX Designer)

Role

UX Design
Visual Design

Tools

Figma

TImeline

Mar 2023 (4 Weeks)

Overview

At its core, Trusli is a comprehensive platform designed to empower procurement professionals in efficiently managing tasks, purchase requests, and negotiation processes. The platform's reputation is bolstered by its remarkable capabilities, notably its innovative source and negotiation tool tailored to address the intricate landscape of contract markups and fallbacks.

Design objective

The primary objective of this design initiative is to integrating Chat GPT into contract creation. Trusli aim to provide users with a comprehensive tool for creating, editing, and customizing contracts seamlessly. This AI-driven approach will eliminate the need for external tools like Microsoft Office, fostering a streamlined and error-free workflow.

OutCome Summary

01. Trusli crafts contracts through Generative AI in seconds, streamlining your experience for efficient results.

Lightweight augmented visuals in the menu guide visitors through basic gestural tutorials and a designed route or a personalized one.

02. Trusli explains contracts through Generative AI

Trusli leverages generative AI to simplify contract complexities, offering users clear, accessible explanations to ensure full understanding and smarter decision-making.

03. Easily add new provisions to the contract

Trusli's intuitive platform enables users to effortlessly add custom provisions, complete with customizable parameters to fit any contract's needs.

What is trusli

A platform to to empower procurement professionals in managing tasks, purchase requests, and negotiation.

0.1

Trusli ContractPro

image

0.1

Trusli's Features

FLOW

Challenge

Streamlining the current contract creation experience?

The software currently only allows the client to upload contracts to Trusli but cannot draft them within the app. This results in a fragmented workflow that requires the client to use multiple tools like Word, leading to inefficiencies and errors in the contract process.

1
Draft contracts on a document editor
2
Upload to Trusli
3
Finalize on Trusli

0.2

Trusli's Current Flow

FLOW

project objective

Improve workflows by uploading contracts and utilizing AI/ ML to help user negotiate terms

The primary objective is to fuse Chat GPT's generative AI into Trusli, revolutionizing contract creation by allowing users to not only generate but also personalize contracts to their preferences. A crucial element of this integration will be a parameter setting feature that adjusts contract favorability, directly impacting negotiation outcomes.

1
Draft contracts via AI directly on Trusli's "ContractPro"
2
Finalize on ContractPro

0.3

Project Objective

FLOW

research

Landscape Analysis

My research into generative AI in platforms like Chat GPT, Bingchat, Spellbook, and Notion informed me about current technologies, highlighting benefits and drawbacks to refine our wireframe designs. This analysis sparked valuable design conversations that influenced our UX strategy.

1.1

Landscape Analysis

research

PLanning

Optimizing User Flow: Streamlining Contract Management with AI Integration

Starting with a collaborative sketch of the user journey with the PM, we pinpointed the critical junctures where AI integration could most impactfully streamline contract creation. Our core aim is to empower clients to swiftly select and personalize contract types, driving efficient decision-making within a unified application.

1.0

Document Side Panel

IDEATION

Wireframing

Design for Contract Creation

In this section, I explored two distinct design strategies for enhancing the contract creation experience. On the left, we have the Conversational UI, which engages users through interactive dialogue.

Conversely, the traditional form-based design presents a more conventional approach, offering structured fields for data entry.

Our team has decided to proceed with the Conversational User Interface (Image on the left) for our current project phase, recognizing its potential for creating a more engaging and intuitive user experience

2.0

Document Side Panel

Wireframe

Wireframing

Wireframing Document Interface with AI-Powered Customization

Our contract creation screen is designed to merge simplicity with advanced AI capabilities. At its heart lies the document view, providing a central stage for contract review and editing.

The right panel (Figure 2.2), a dynamic parameter sidebar enhances user interaction, featuring drop-down menus for selecting provision titles and a unique 'favorability switcher'. This innovative tool allows users to adjust the terms' favorability, prompting the AI to automatically rewrite the terms to match the specified parameters.

2.1

Contract Document Interface

Wireframe

2.2

Document Side Panel

Wireframe

Wireframing

Many iterations to integrate AI

2.3

Concept 1: AI via Tooltip

Wireframe

Pros: The design intuitively indicates the good relationship between the user's highlighted text and the AI's capabilities, with an effective dropdown prompt menu that facilitates easy selection of AI functions.

‍Cons: The current design tends to obscure too much of the contract document, potentially hindering the user's ability to review content comprehensively. The design lacks a universal access point for AI functionalities, limiting interaction opportunities when text selection is not needed or desired.

2.4

Accessing AI via Tooltip

Wireframe

Pros: The chatbot design is familiar to most users, facilitating easy adoption and interaction. It provides straightforward access to interaction history, allowing users to revisit previous exchanges and actions. The format offers enhanced flexibility and fluidity in user interactions, supporting a wide range of queries and commands.

‍Cons: The design tends to takes too much screen real estate, and the chat bubble hampers the user's ability to effectively review lengthy content. Require more effort to communicate with the software.

2.5

Final Design: Taskbar AI Integration

Final direction

To improve interface efficiency, I streamlined the bulky dual-layer header into a single taskbar, making space for essential editing tools and enhancing the contract customization process.

I integrated an universal AI access point into this toolbar, making AI functionalities an integral, easily accessible part of the user experience. Clicking the AI button reveals an input bar with a Prompt menu dropdown, offering immediate access to relevant options and significantly simplifying AI interaction. This redesign optimizes productivity by minimizing steps to engage with AI.

final design

Demo: Contract Creation via Trusli

Project Takeaways

Designing for User-Centric Customization
We ensured users could tailor contracts precisely by introducing features like customizable contract provisions and a dynamic 'favorability switcher', seamlessly enhancing document personalization and effectiveness.
Streamlining Workflow with Intuitive AI Integration
Our final design integrated AI into the taskbar for efficiency. Simplified access streamlined workflow, enabling seamless contract drafting, customization, and finalization.
Harnessing AI for Enhanced Contractual Clarity
Deploying generative AI tools in Trusli accelerated contract drafting and simplified legal jargon. Clear, accessible explanations empowered users for informed decisions, fostering transparency in negotiation.
Next Project: LORA