Defining Goals

The platform’s commenting system was unintuitive, requiring excessive clicks and lacking clear organization, making it difficult to track discussions. Additionally, manual metadata extraction for contracts was inefficient and error-prone. Users needed customizable metadata fields and a reliable way to verify AI-extracted data, particularly from scanned PDFs, to ensure accuracy and trust in the system.

1. Improve Commenting System Usability

• Simplify navigation and visibility of comments to reduce excessive clicks.
• Enhance visual organization to help users track discussions by context or user.

2. Automate Metadata Extraction

• Reduce manual effort by automating client information and payment detail extraction.
• Minimize errors and increase efficiency for legal teams managing contracts

3. Enable Custom Metadata Fields

• Provide users with the ability to define and extract metadata fields based on their unique contract needs.
• Improve system flexibility to adapt to various contract structures.

4. Enhance AI Metadata Verification

• Ensure users can easily verify and correct AI-extracted metadata.
• Improve AI accuracy, especially when handling scanned PDFs, to build user confidence in automated processes.

Problem statement

The platform's commenting system and metadata extraction processes were inefficient, requiring improved usability, automation, and AI verification for a more seamless user experience.

Our Approach to designing

To enhance usability and efficiency, we redesigned the commenting system for better accessibility, automated metadata extraction to reduce manual effort, introduced customizable metadata fields for flexibility, and implemented OCR-based extraction for scanned PDFs. These improvements streamlined workflows, increased accuracy, and provided users with a more intuitive and adaptable platform.

1. Simplified and Intuitive Commenting System

• Collected user feedback to identify issues such as excessive clicks and clutter.
• Redesigned the layout to be more compact and Word-like, reducing cognitive load.
• Introduced filters for better tracking and easier access to tagged comments.
• Simplified language and repositioned icons for a more streamlined experience.

2. Automated Metadata Extraction for Efficiency

• Mapped essential fields like client details and payment terms to machine learning models.
• Implemented a verification tool allowing users to confirm or correct extracted data.
• Integrated a feedback loop where user corrections improved future extractions.
• Reduced manual effort while ensuring metadata accuracy through machine learning

3. Custom Metadata Fields for Greater Flexibility

• Designed an interface allowing users to define custom metadata fields.
• Implemented automated guidance for date fields and manual entry for text fields.
• Provided configurable options to adapt to different contract structures.
• Ensured continuous testing and refinement to meet diverse user needs.

4. OCR-Based Extraction for Scanned PDFs

• Evaluated OCR technologies and tested usability prototypes.
• Implemented text recognition to convert scanned PDFs into editable formats.
• Highlighted key sections to guide users in verifying extracted metadata.
• Created a feedback loop storing verified corrections to enhance OCR accuracy over time.

Dev Approach & System

To ensure a seamless and visually consistent experience, we designed a structured yet flexible design system for the Spotdraft.

This included:

• A carefully curated color palette to maintain brand identity
• Typography guidelines for readability and aesthetic appeal
• A reusable component library to streamline UI elements
• A collection of images and animations to enhance user engagement

Collaboration & Implementation

• We provided the development team with a detailed walkthrough of the app’s structure, features, and animations to facilitate smooth execution.
• To enhance understanding and collaboration, we developed an interactive Figma prototype, enabling the team to navigate the user journey and experience interactions firsthand.
• This approach bridged the gap between design and development, ensuring an efficient and cohesive final implementation.