Artificial intelligence App

UI / UX Case Study


Legal contract analyzer software analyzes agreements, reducing contract cycle times and managing risks for companies.

Designed in figma


Legal contract analyzer is an agreement Analysis Software that is designed to streamline the process of analyzing agreements using artificial intelligence (AI) technology. It helps companies reduce contract cycle times, improve the outcome of negotiations, proactively manage risk, and ensure compliance. This software tool can be used to analyze and evaluate agreements, contracts, and legal documents.


Sign-in/Signup: The software allows users to create accounts and sign in securely.

Upload Agreement: Users can upload agreement documents in various formats, such as Word, PDF, or other common file types.

Analyze Agreement through AI Model: The software utilizes AI technology to analyze uploaded agreements.

Export PDF: Users can export the analyzed agreements as PDF files, making it easy to share and store the analysis results in a standardized format.

Export Excel: The software also allows users to export the analyzed agreements as Excel files, which can be useful for further data analysis or integration with other tools or systems.

Filters: The software provides filters that allow users to sort and categorize analyzed agreements based on specific criteria, such as date, type of agreement, or parties involved.

Search: Users can search for specific keywords or phrases within the analyzed agreements to quickly locate relevant information.

Graphs: The software enerates graphical representations, such as charts or graphs, to visually summarize and present the analysis results.

User Management (Active/Inactive Status): The software includes user management functionality, allowing administrators to manage user accounts and set their active or inactive status.

Overall, the Legal contract analyzer is a powerful tool that simplifies the process of analyzing agreements using AI technology. Its features make it a comprehensive solution for efficiently analyzing and managing agreements. 






UI / UX Design


Artificial Intelligence App

Project Duration

Oct 2022 - Dec 2022 (3 months)

Design Process Journey

We went through the design process journey to provide the best user experience for this project. We carefully researched the user experience and developed an easy process that includes the following steps:

User Flow Diagram

A user flow is essentially a design flow that illustrates how an app will function and how the user will interact with the application to achieve its intended purpose.

Admin Flow Diagram

The admin flow is a design flow that depicts how an app will operate from an administrator’s perspective and how they will use the application to achieve its intended purpose.

Low-fidelity wireframes

At the beginning, once the planning is finalized, we begin by sketching on paper. After sketching, we move on to creating Lo-Fi designs on Figma to convert the sketches into low-fidelity representations. During this phase, we finalize the components and the rough layout of how the application will look.

Tech Stack

Style Guide

This document contains all the design guidelines for each element, specifying how they will appear in the high-fidelity design. The purpose of this style guide is to save time and improve efficiency by providing information on colors, typography, headings, body copy, and image captions. 


The color palettes used in the project are displayed below.


Font family (Inter)

The font family used in this project is Inter. This neutral and flexible sans-serif typeface is the system font for iOS, iPadOS, macOS, and tvOS. Inter offers nine weights, variable optical sizes for improved legibility, four widths, and even includes a rounded variant.


Here are the icons we used throughout the project. 

UI Kit Component

A UI kit, also known as a user interface kit, is a set of design assets that includes various design elements, such as UI components and styles. UI components are elements that convey meaning and provide functionality to users. In this project, we utilized UI kits that included navigation menus, input fields, and tiles to accelerate our progress and achieve our milestones.


These are the various button styles that we used throughout the project, each with different states depending on their functionality and purpose.

Toggles & Selector

These are the different states of checkboxes, radio buttons, and toggle buttons that we utilized throughout the project to provide various options and functionality to users.

Alignments and Grid

We used a 12-column grid system for our project, with margins set to 30 pixels. The size of our icon boxes varied based on the project’s requirements. The height between sections was also set to 30 pixels, while the distance between two sections in the navigation bar was also 30 pixels. To ensure design consistency and responsiveness across all screens, we utilized constraints and auto layout in our design system.