Agreet

AI-Powered Contract Drafting Platform

🧠 The Challenge

Agreet needed a responsive web platform that let users draft, edit, and risk-analyse legal agreements through an AI chat interface, as well as upload third-party contracts for AI-driven analysis and editing. The target audience ranged from lawyers to small business owners and landlords, meaning the experience had to feel professional enough for legal use, yet simple enough for non-legal users.


As the sole Freelance Product Designer on the project, the challenge was to design a system with genuinely complex interactions (AI chat, inline text editing, commenting, paragraph amendments, risk flagging) that worked equally well with a mouse on desktop and touch gestures on mobile.

 

🎯 The Goal

  • Design a responsive platform covering landing pages, authentication flow, dashboard, and the core AI-powered editor
  • Make the contract editor’s advanced functions (commenting, amending, replacing text, risk review) intuitive on both desktop and mobile
  • Benchmark against existing AI contract tools to identify gaps and opportunities
  • Keep stakeholders aligned throughout via short, frequent check-ins rather than long design reviews

 

💡 My Role

As a freelance Product Designer, I owned the project end-to-end:

  • Produced the initial project plan and timeline, presented to stakeholders before design work began
  • Conducted competitor analysis on the two existing players in the space to define Agreet’s differentiators
  • Decided and validated the responsive scope: which features needed full mobile support versus desktop-only
  • Wireframed and designed the Create Agreement flow, Editor, Dashboard, and Landing Pages
  • Ran usability testing throughout the Editor design phase, given how function-dense that screen was
  • Handed off fully specced desktop and mobile screens directly to the development team

 

🔍 Discovery & Research

I began with a competitor analysis of the two existing AI contract tools on the market, looking specifically at what they offered and where gaps existed that Agreet could fill. This shaped an early, important decision: the product needed to be genuinely responsive, not desktop-only, but not every feature made sense on mobile either.

  • Mapped out which features belonged on web, which needed full mobile parity, and which could stay web-only
  • Defined the four core areas of the product: Create Agreement & Editor, Dashboard, Login, and Landing Page, each scoped as its own timed phase
  • Prioritised the Editor first, since it was both the most time-intensive to design and the screen requiring the most stakeholder input

🧪 Key Findings from Research

  • Existing competitor tools handled AI-assisted editing reasonably well on desktop, but mobile interaction patterns for commenting, replacing text, and amending paragraphs were largely unaddressed; this became a clear opportunity for Agreet
  • Users creating a new agreement needed more than one entry point: some had detailed notes ready to paste in, some preferred a single-sentence description, and others simply wanted to upload an existing file; this led to the three-method “Create an Agreement” flow
  • Subscription-based AI tools in the dashboard space generally separated project management (files, search, settings) from the core creation flow, a pattern worth following so the Editor didn’t get cluttered with dashboard-level functionality

🎨 Design Process

This was a freelance engagement with a fixed project plan, so the work was structured into four timed phases rather than one continuous design pass. I started with the Editor, since it was the most time-intensive screen and needed the most stakeholder input, allowing development to begin on it early while I moved on to the remaining screens.

See in Figma
Phase 1 — Create an Agreement & Editor

Starting with the Create an Agreement flow (three entry methods: notes, single sentence, file import) and the Editor, I wireframed every function end-to-end, chatbot interactions, review mode, closing/deleting a document, and agreement editing before any visual design, since these screens involved the most stakeholder decisions around functionality.

Once stakeholders approved the wireframes, I designed the Editor in Figma, keeping them aligned through short, frequent check-ins on colour, typography, functions, and the desktop/mobile split. Given how dense this screen was (text editing, inline comments, paragraph amendments, word replacement, AI chat, review mode, risk flagging), I ran extensive usability testing to make sure every function felt natural with a mouse on desktop and with touch gestures on mobile.

Phase 2 — Dashboard

With the Editor in development, I moved to the Dashboard, researching subscription-based AI tools for patterns around navigation, project files, and account management before wireframing Grid View, Import, Search, Project Files, Settings, Support, and the desktop menu / mobile hamburger menu split.

I then designed the full Dashboard UI in Figma, covering Create Agreement entry points, search, project files, settings, payment, and account actions. Phase 2 also absorbed the time originally budgeted for Phase 3’s design work (see below), which let the Dashboard get extra design attention.

Phase 3 — Login (process change)

Phase 3 was originally scoped for designing the Login screens and Legal Region Selection. In practice, the development team decided to integrate login directly with their existing authentication system rather than work from a dedicated design. Instead of wireframes and UI screens, this phase became a series of flow-mapping sessions with engineering, where we agreed on the steps and edge cases together, and the screens were ultimately built using their system’s native components. We reallocated the time saved to Phase 2, giving the Dashboard more design depth.

Phase 4 — Landing Page

Having previously designed landing pages for The Kingdom Bank and Nove Group, this phase moved quickly. I was able to carry over proven patterns (hero structure, trust signals, clear CTAs) and adapt them to Agreet’s brand and audience, wireframing and designing this section in a fraction of the time the Editor had taken.

Handoff

Delivered fully specced desktop and mobile screens for the Editor, Dashboard, and Landing Pages directly to the development team, along with the agreed login flow documentation from our joint sessions with engineering.

📊 Scope & Deliverables

Agreet has not launched publicly as of writing, a common outcome for freelance engagements once the handoff is complete. The scope delivered was substantial: a fully designed, responsive AI contract editor with complex interaction patterns resolved for both desktop and mobile, a complete dashboard, and landing pages, all handed off ready for development.

 

🧠 Reflections & Learnings

Working on an AI-driven product pushed me to think differently about interaction design, especially around how much control to give the user versus the AI, and how to make that balance feel trustworthy rather than confusing. The Editor’s complexity also reinforced how valuable early, frequent stakeholder check-ins are on a project like this: locking in function-level decisions early meant the rest of the product could be designed with confidence and speed. I’d welcome the chance to work on more AI-native products in the future; it’s a space where the interaction patterns are still being figured out, and that’s exactly the kind of challenge I enjoy.