Legal Tech UX Design Design System React

JourneyLaw

Humanized Legal Management Platform

JourneyLaw lawyer dashboard and the case calendar

01

Executive Summary

JourneyLaw is a SaaS legal management platform designed to modernize and simplify the administration of legal cases. As the lead UX/UI Designer and front-end developer with over 15 years of experience, I led the digital transformation of this platform that revolutionizes how legal professionals manage their cases. The project showcases my ability to create intuitive digital experiences that solve complex challenges in the legal sector, implementing a scalable multi-tenant system with a modern, accessible interface that truly connects with users.

02

The Challenge

Legal professionals were struggling with outdated tools that created daily frustrations: unnecessarily complex interfaces that wasted valuable time, fragmented workflows scattered across multiple applications, repetitive tasks that could—but weren't—being automated, limited scalability that hindered growth and client management, and inconsistent experiences across devices that disrupted productivity.

Design System

Design System

The design system implements a "Warm Professionalism" philosophy that conveys trust and sophistication while maintaining warmth and accessibility.

Color Tokens

Primary, secondary, and neutral system tokens built for contrast and consistency.

Deep Brown
#2C1B0C · RGB 44, 27, 12

Primary color for headers, important text, and brand representation

Warm Taupe
#C5B4A3 · RGB 197, 180, 163

Secondary color for backgrounds, cards, and containers

Text Dark
#111827 · RGB 17, 24, 39

Headings and primary text

Text Medium
#6B7280 · RGB 107, 114, 128

Body text and secondary info

Background Light
#F3F4F6 · RGB 243, 244, 246

App backgrounds

Surface White
#FFFFFF · RGB 255, 255, 255

Card surfaces

Typography Scale

Primary Typeface: Inter (Headings & Body Text)

XL Heading
30px / 400
Main section headings and page titles
The quick brown fox jumps over the lazy dog
Large Heading
24px / 400
Section titles and modal headers
The quick brown fox jumps over the lazy dog
Medium Heading
18px / 400
Card titles and content groups
The quick brown fox jumps over the lazy dog
Body Text
16px / 400
Primary content text
The quick brown fox jumps over the lazy dog
Small Text
14px / 400
Secondary information, labels, and captions
The quick brown fox jumps over the lazy dog
Extra Small
12px / 400
Fine print and legal disclaimers
The quick brown fox jumps over the lazy dog

UI Component States

Interactive primitives sharing token geometry, borders, and typographic rules.

Buttons

Primary Action Secondary Ghost

Form Inputs

Default State
name@company.com

Value Proposition

We developed a comprehensive solution with these key elements:

  • User-centered experience: Intuitive interface that minimizes the learning curve
  • Optimized workflows: Automation of repetitive processes for lawyers
  • Adaptive design: Works perfectly on desktop and mobile devices
  • Multi-tenant model: Secure data separation between different law firms
  • AI integration: Automatic document analysis and intelligent recommendations

Design Process

01

Discovery & Research

I began with an intensive research phase to build genuine understanding: conducting user interviews to uncover key requirements like centralized case management, document automation, and AI-powered predictions, identifying differentiation opportunities through a simplified interface, AI integration, and mobile-first approach, and establishing clear KPIs to measure success.

02

Information Architecture

I completely redesigned the application structure to match users' mental models: developing an intuitive organization system that reflects how attorneys actually think about their cases and reducing the steps needed for common tasks, eliminating friction points.

03

Design System

I developed a modular design system that balanced consistency with flexibility, implementing a 'Warm Professionalism' philosophy with a carefully crafted color palette, typography system, and modular components.

04

User Testing

Multiple rounds of testing with 8 attorneys from different specialties ensured we were truly meeting user needs, with A/B testing to validate different approaches and data-driven iterations based on task success rates, average time per task, and System Usability Scale scores.

Interactive Prototype & UI Screens

Explore key flows and high-fidelity screens from the product architecture.

Results & Impact

87%

Increase in client retention

43%

Reduction in administrative work

62%

Faster document preparation

28%

Increase in billable hours captured

JourneyLaw demonstrates my ability to transform a complex domain into an intuitive, valuable digital experience. The project represents a perfect balance between user-centered design, robust technical implementation, and effective business strategy. As the lead UX/UI Designer and front-end developer on this project, I applied my years of experience to create a product that not only looks and works exceptionally well but generates real, measurable impact on legal professionals' daily work.

Similar challenge?

Have complex software that needs clarity?

Let's talk directly—I'll tell you what makes sense to tackle first.

Let's talk about your project