Implementation of a Design System at LegalSpot

Project Duration

October 2022 – March 2023

Team

4 members

Industry

LegalTech

Collaboration Scope

It and business consulting

Web application development

Product Design

What is LegalSpot?

LegalSpot is a startup developing an AI-powered SaaS platform aimed at accelerating the work of legal departments by fully automating the document lifecycle. By integrating features such as task management, document editing and management, and automation for contract generation and compliance verification, LegalSpot enables companies with in-house legal departments to reduce their document cycle times by up to 60%.

Collaboration Goals

Drag LegalSpot aimed to begin developing application functionalities as quickly as possible, skipping the creation of a foundational Design System. This decision soon revealed significant drawbacks:

New functionalities often lacked consistency.
Modifying existing features required numerous meetings to align on design decisions.

To address these challenges, our team collaborated with LegalSpot to establish a streamlined process for creating new functionalities and simplifying developers' workflows. The project aimed to achieve the following:

Reduce development time for new functionalities.

Minimize UI errors and inconsistencies, ensuring a cohesive user experience.

Develop a process that facilitates the addition of new features and modifications to the existing interface efficiently.

How did the collaboration proceed?

Code Audit and IT Consulting

Interface Analysis

We analyzed the existing interface and codebase to identify common elements and minimize the cost of creating the Design System.

Design System Creation

We developed a comprehensive Design System in Figma, enabling rapid prototyping and mockup creation.

Implementation

We created component code to facilitate quicker development of new features and views using reusable elements.

We were pleasantly surprised by how smoothly the collaboration went with iMakeable’s team.

Tomasz Kozak

Founder Legalspot

We analized the application interface to reduce the costs of implementation.

Interface Analysis

We began by assessing the existing functionality and interface elements to build upon the team’s prior work. A detailed list of already-created interface elements was compiled, and a roadmap was devised for future features and their design.

Transferred existing components to the Figma project.

Established typography, colors, grid, and interface elements collaboratively with the LegalSpot team.

By leveraging pre-existing components, we avoided imposing major changes on the developers and used their prior work to accelerate future functionality creation.

We designed a system that helps developers work faster

Design System and New Feature Design

Using ready-made components, we designed a Design System that provided developers with a library of elements—such as buttons, sections, and layout guidelines—for assembling new features more quickly and efficiently.

Next steps included:

Developing the code for new Design System components.
Standardizing the code of existing components to ensure consistency.

This allowed the LegalSpot team to focus on building new functionalities while we demonstrated how the Design System could streamline their work.

Ready to go components and design system helped the team work faster

Implementation

Our process and design reduced development time for tasks of similar complexity by 75%, based on measured performance.

The Design System:

Ensured consistency across functionalities.

Enhanced the team’s efficiency by providing a set of standardized components, principles, and guidelines to maintain uniform aesthetics across the application.

Visual and functional inconsistencies were eliminated, and reusable components helped accelerate development and reduce interface-related errors.