42 KiB

Raw Blame History

stepsCompleted

inputDocuments

date

1
2
3
4
5
6
7
8
9
10
11
12
13
14

prd.md

product-brief.md

research.md

brainstorm.md

prd-validation-report.md

2026-03-08

UX Design Specification - Jus IA Start Kit

Author: Gabriel Vaz Date: 2026-03-08

Executive Summary

Project Vision

O Jus IA Start Kit é um assistente web que funciona como "tradutor de intenção jurídica": o advogado responde perguntas sobre seu caso em linguagem jurídica e é redirecionado ao Jus IA com um pedido otimizado pronto para gerar resultado de alta qualidade na primeira tentativa. A experiência abstrai completamente o conceito de prompt engineering — o advogado nunca vê um prompt, nunca edita código, nunca precisa saber como falar com IA.

A mecânica central é um fluxo híbrido: perguntas estruturadas (determinísticas) coletam dados do caso, seguidas de refinamento contextual por IA (não-determinístico) que captura nuances. O resultado é montado nos bastidores e entregue ao Jus IA via URL parametrizada ou fallback copy-paste.

Target Users

Dra. Carla — A Resistente Pragmática (primária): Advogada autônoma, 42 anos, trabalhista. Nunca usou IA, gasta 2-3h por petição. Precisa de resultado comprovável na primeira tentativa, sem investir tempo aprendendo. Abre o Start Kit no celular entre audiências, via link de WhatsApp.

Dr. Rafael — O Sobrecarregado Digital (primário): Advogado autônomo, 29 anos, usa ChatGPT diariamente mas itera 3-5 vezes por petição. Sabe que IA pode ajudar mas não sabe formular o pedido certo. Precisa de um atalho que elimine o ciclo de tentativa-e-erro.

Dr. Marcos — O Dono de Escritório (secundário): Sócio, 50 anos, equipe usa ChatGPT sem governança (Shadow AI). Precisa padronizar o uso de IA na equipe sem supervisionar cada pedido. Deep links por área funcionam como ferramenta de governança.

Key Design Challenges

Dois perfis opostos de confiança: a mesma interface precisa transmitir segurança e credibilidade para quem nunca usou IA (Carla) e eficiência/velocidade para quem já usa diariamente (Rafael).
Abstração total do prompt engineering: linguagem 100% jurídica, zero vocabulário técnico de IA. O produto deve parecer "ferramenta jurídica", não "ferramenta de IA".
Mobile-first entre audiências: fluxo completável em <5 min com uma mão, em tela pequena, com conexão potencialmente instável.
Continuidade em MPA: cada etapa é um page load — o progresso precisa ser visualmente claro e a experiência fluida, sem sensação de formulário burocrático.

Design Opportunities

"Momento aha" no preview: a tela que mostra o pedido montado com fundamentação jurídica específica é o ponto de materialização do valor — oportunidade de criar confiança, surprise-and-delight, e conversão.
Educação implícita via perguntas: o fluxo ensina o advogado o que é relevante para um bom pedido sem que ele perceba que está aprendendo — o UX pode amplificar esse efeito.
WhatsApp como experiência de entrada: OG tags, deep links por área, experiência de "abrir link e já estar no fluxo certo" — a primeira impressão é no mobile via WhatsApp.

Core Experience Definition

Core User Action

O advogado responde perguntas sobre seu caso e recebe um pedido otimizado pronto para o Jus IA. Do ponto de vista emocional, existem apenas dois momentos: "estou respondendo perguntas sobre meu caso" e "recebi meu pedido pronto". Tudo entre eles deve ser invisível.

Experience Principles

Transição IA invisível: Perguntas geradas por IA devem ser indistinguíveis das perguntas estruturadas. Quando possível, perguntas da IA devem oferecer opções pré-definidas (seleção), não campos de texto abertos. Quando texto livre for necessário, usar placeholders específicos e contextuais (ex: "Ex: não pagava horas extras e exigia trabalho aos sábados") — nunca campos genéricos vazios. O advogado não deve perceber que mudou de fase determinística para não-determinística.
Velocidade é respeito — quantificada: O fluxo inteiro (primeiro toque → botão "Gerar no Jus IA") deve ter no máximo 4-5 telas de perguntas. Se o advogado conta mais de 5 etapas no indicador de progresso, já parece longo. Perguntas devem ser agrupadas agressivamente por "momento mental" — na mesma tela, perguntas que pertencem ao mesmo contexto decisório (ex: "Regime de Trabalho" + jornada contratual se CLT). Perguntas de momentos mentais diferentes (ex: "Há registro de ponto?" vs "Existem testemunhas?") vão em telas separadas.
Um momento mental por tela: Cada tela tem uma decisão principal, com sub-perguntas relacionadas agrupadas abaixo. Isso reduz page loads em MPA (de 8-11 para 4-5) mantendo clareza cognitiva. Progressive enhancement com JavaScript para transições sem reload quando disponível.
Preview = fundamentação jurídica como contrato de confiança: O valor do preview não é mostrar o prompt — é mostrar artigos, súmulas e jurisprudência que o advogado reconhece. Quando Dra. Carla vê "art. 59 da CLT, Súmula 85 do TST", pensa: "isso eu conheço, isso é real". A fundamentação jurídica visível é o momento de conversão — a linguagem dela validando a máquina.
Linguagem 100% jurídica: Zero vocabulário técnico de IA. O produto parece "ferramenta jurídica", não "ferramenta de IA".

Critical Success Moments

Primeira pergunta (<3 segundos): O advogado abre o link (WhatsApp, deep link) e em menos de 3 segundos está respondendo a primeira pergunta relevante sobre seu caso. Sem onboarding, sem cadastro, sem explicação.
Preview com fundamentação jurídica: A tela que mostra o pedido montado com artigos específicos da CLT e súmulas do TST. Este é o momento de materialização do valor — "a máquina sabe o que é relevante pro meu caso".
Redirecionamento ao Jus IA: O clique final que leva ao Jus IA com tudo pronto. O resultado gerado na primeira tentativa valida toda a experiência anterior.
Momento de recuperação: Quando o advogado erra uma resposta ou quer voltar. O botão de voltar deve ser visível e óbvio. O browser back deve funcionar perfeitamente em MPA. Voltar nunca pode perder respostas já dadas nas telas seguintes. Confiança quebra quando o advogado sente que perdeu trabalho.

Effortless Interactions

Toque único por decisão: Cada pergunta deve ser respondível com um toque (seleção, toggle, chip). Texto livre é exceção, não regra.
Agrupamento por momento mental: 2-3 perguntas relacionadas por tela, máximo 4-5 telas no fluxo completo.
Placeholders contextuais: Quando texto livre for necessário, exemplos específicos guiam a resposta (ex: "Ex: demissão sem justa causa em 15/01/2026").
Progresso visual claro: Indicador de progresso mostra 4-5 etapas — nunca mais que isso.

Desired Emotional Response

Primary Emotional Goals

Para Dra. Carla (nunca usou IA): Segurança → Surpresa → Confiança. Ela precisa sentir que está no controle (perguntas familiares sobre seu caso), ser surpreendida pelo resultado (preview com fundamentação jurídica que ela reconhece), e sair confiante de que a ferramenta funciona.

Para Dr. Rafael (usa IA mas itera): Alívio → Revelação → Empoderamento. Ele precisa sentir alívio ao ver que as perguntas certas estão sendo feitas (não precisa pensar no prompt), revelação ao entender que o problema era o pedido e não a ferramenta, e empoderamento ao ter um caminho repetível.

Para Dr. Marcos (dono de escritório): Controle → Praticidade → Tranquilidade. Precisa sentir que tem controle sobre como a equipe usa IA (deep links por área), que a solução é prática (sem admin panel, sem configuração), e tranquilidade de que a qualidade está garantida (base verificada do Jus IA).

Emotional Journey Mapping

Momento	Emoção Desejada	Emoção a Evitar	Mecanismo UX
Abrir o link	Curiosidade confiante	Desconfiança, "mais uma ferramenta"	Linguagem jurídica desde o primeiro pixel, sem menção a IA/prompt
Primeira pergunta	"Isso é sobre o meu caso"	"Estão pedindo meus dados"	Pergunta relevante e específica, não genérica
Durante o fluxo	Fluidez, progresso	Tédio, burocracia, "formulário do governo"	Toque único, progresso visual, 4-5 telas máximo
Pergunta da IA	"Boa pergunta, não tinha pensado nisso"	"Por que está perguntando isso?"	Pergunta contextual que demonstra inteligência sem parecer aleatória
Loading da IA	Expectativa positiva	Ansiedade, impaciência	Indicador com microcopy: "Analisando seu caso..." (não "Processando...")
Preview	Surpresa + validação	Desconfiança do resultado	Fundamentação jurídica visível (artigos, súmulas) — a linguagem do advogado
Redirect	Satisfação, "funcionou!"	Medo de perder o que foi feito	Confirmação visual antes do redirect, opção de copiar
Resultado no Jus IA	"Por que não fiz isso antes?"	"Preciso refazer tudo"	Prompt bem construído = resultado na primeira tentativa

Micro-Emotions

Críticas para o sucesso:

Confiança > Ceticismo: Cada elemento visual deve reforçar credibilidade institucional (Jusbrasil como âncora de confiança)
Competência > Confusão: O advogado nunca deve se perguntar "o que devo fazer agora?" — a próxima ação é sempre óbvia
Progresso > Estagnação: Cada toque leva visivelmente adiante — barra de progresso + feedback imediato

A evitar ativamente:

Ansiedade: "Estou colocando dados do meu cliente aqui?" → Microcopy: "Seus dados não são armazenados"
Frustração: "Perdi o que já respondi" → Estado preservado no browser back
Condescendência: "Isso é para quem não sabe usar IA" → Linguagem de profissional para profissional

Emotion-Design Connections

Emoção Desejada	Decisão de UX
Segurança	Sem login, sem dados retidos, disclaimer visível mas não invasivo
Competência	Microcopy em linguagem jurídica, perguntas que demonstram expertise do sistema
Velocidade	Toque único, agrupamento por momento mental, indicador de progresso compact
Surpresa positiva	Preview com artigos/súmulas específicos — "a máquina sabe direito"
Controle	Botão voltar visível, browser back funcional, opção de copiar antes do redirect

Emotional Design Principles

Credibilidade antes de tudo: A primeira impressão determina se Carla continua ou fecha. Cada pixel deve comunicar "ferramenta jurídica profissional", não "startup de IA".
Inteligência demonstrada, não declarada: Não dizer "nossa IA é inteligente" — mostrar fazendo perguntas que o advogado reconhece como relevantes.
Progresso como recompensa: Cada resposta leva visivelmente ao resultado — o advogado sente que está construindo algo, não preenchendo formulário.
Transparência sem sobrecarga: "Seus dados não são armazenados" uma vez, discreto. Não repetir em cada tela.

UX Pattern Analysis & Inspiration

Inspiring Products Analysis

1. WhatsApp — Experiência de entrada e compartilhamento

O que faz bem: preview de links (OG tags) cria primeira impressão antes do clique. Compartilhar é o gesto mais natural. A maioria dos advogados brasileiros (90%) usa profissionalmente.
UX lesson: O link compartilhado precisa ter preview rico e auto-explicativo. O advogado que recebe deve entender o valor antes de clicar.

2. iFood / Rappi — Fluxo de seleção em poucos toques

O que faz bem: Categoria → Subcategoria → Customização em 3-4 telas. Decisões por toque único. Progresso visível. Funciona perfeitamente em mobile com uma mão.
UX lesson: Nosso fluxo (Tipo de tarefa → Área → Subtipo → Perguntas → Preview) deve ter a mesma fluência. Cada tela uma decisão principal. Chips e seleções, não campos de texto.

3. Nubank — Confiança em mobile para produto financeiro

O que faz bem: Tom profissional mas acessível. Linguagem clara sem jargão técnico financeiro. Feedback visual imediato em cada ação. Funciona como "ferramenta financeira" sem parecer "app de banco".
UX lesson: O Start Kit deve parecer "ferramenta jurídica" assim como o Nubank parece "ferramenta financeira" — sem parecer que é IA por trás.

4. Typeform — Fluxo conversacional um passo por vez

O que faz bem: Uma pergunta por tela cria sensação de conversa, não formulário. Transições suaves. Progresso visual. Lógica condicional que pula perguntas irrelevantes.
UX lesson: O agrupamento por "momento mental" é nossa versão otimizada deste padrão — conversacional mas mais eficiente que uma pergunta por tela.

Transferable UX Patterns

Navigation Patterns:

Seleção por chips (iFood): Para tipo de tarefa, área do direito, subtipo — toque único, visual claro
Stepper linear (Nubank onboarding): Indicador de progresso 4-5 etapas, sempre visível no topo
Deep link direto (WhatsApp): Entrada no fluxo exato via URL — pula seleção inicial quando possível

Interaction Patterns:

Progressive disclosure (Typeform): Mostrar perguntas condicionais apenas quando relevantes (ex: jornada contratual só aparece se CLT)
Chip selection (Material Design): Respostas pré-definidas como chips tocáveis, sem dropdown
Inline validation (Nubank): Feedback imediato ao responder, sem esperar submit

Feedback Patterns:

Skeleton loading (Nubank): Durante chamada LLM, mostrar estrutura da próxima tela com shimmer
Microcopy contextual (Typeform): Texto helper que guia sem explicar demais
Success celebration (Duolingo): Micro-animação no preview para marcar o "momento aha"

Anti-Patterns to Avoid

Formulário longo com scroll: Advogado entre audiências não vai scrollar. Uma tela = uma decisão.
Dropdown menus em mobile: Dropdowns são péssimos em touch. Sempre chips ou radio buttons.
Loading genérico ("Carregando..."): Não comunica valor. Usar microcopy contextual ("Analisando seu caso...").
Explicação antes da ação: Não mostrar tutorial ou onboarding. A primeira tela já é a primeira pergunta.
Linguagem de chatbot: "Olá! Sou um assistente de IA..." — este framing afasta a Dra. Carla imediatamente.

Design Inspiration Strategy

Adotar diretamente:

Chip selection para todas as perguntas de seleção (iFood/Material)
Stepper linear compact no topo (Nubank)
OG tags ricas para preview no WhatsApp

Adaptar ao contexto:

Progressive disclosure do Typeform → agrupamento por momento mental (2-3 perguntas/tela)
Tom conversacional do Typeform → linguagem jurídica profissional
Celebração do Duolingo → micro-feedback sutil no preview (profissional, não gamificado)

Evitar explicitamente:

Chatbot UI com balões de conversa — parece IA, afasta Carla
Onboarding/tutorial antes do fluxo — barra de entrada
Multi-step wizard com 8+ etapas — parece burocracia

Design System Foundation

Design System Choice

Decisão: Tailwind CSS + componentes custom leves (sem framework de componentes)

Rationale for Selection

MPA mobile-first: Tailwind funciona perfeitamente com server-rendered HTML — sem dependência de JavaScript framework pesado
Performance: CSS utilitário gera bundles mínimos. Cada page load carrega apenas o CSS usado — crítico para 3G entre audiências
Customização total: Sem overhead de Material Design ou Bootstrap que traria componentes desnecessários e visual genérico
Boring technology: Tailwind é estável, bem documentado, ampla comunidade. Sem risco de lock-in ou abandono
Velocidade de desenvolvimento: Utility-first permite iterar rapidamente no MVP sem criar sistema de design complexo

Implementation Approach

Base: Tailwind CSS v4+ com configuração customizada de design tokens
Componentes: HTML semântico + classes Tailwind. Componentes server-side (templates/partials), não client-side
JavaScript: Minimal — progressive enhancement para interações que melhoram a experiência (transições, validação inline) mas não são obrigatórias
Ícones: Heroicons (já integrado com Tailwind) para consistência visual

Customization Strategy

Design tokens customizados no Tailwind config: cores, tipografia, espaçamento, border-radius
Componentes reutilizáveis via templates/partials do backend (não React/Vue/Svelte)
Preflight reset + base styles para consistência cross-browser
Sem tema escuro no MVP — foco em uma experiência visual coesa

Core User Experience

Defining Experience

"Responda sobre seu caso e receba um pedido jurídico otimizado pronto para gerar resultado na primeira tentativa."

Este é o equivalente do Start Kit ao "Swipe to match" do Tinder — a interação que, se perfeita, define o produto. O advogado descreve seu caso respondendo perguntas e recebe um artefato jurídico (pedido otimizado) que funciona de primeira. A mágica é: as perguntas certas extraem as informações certas, sem que o advogado precise saber o que é relevante para um bom prompt.

User Mental Model

O que o advogado espera: Uma consulta estruturada. Semelhante a quando um colega mais experiente pergunta sobre o caso antes de ajudar: "Qual o vínculo?", "Quanto tempo?", "Tem registro de ponto?". O advogado entende perguntas — faz isso todo dia com clientes.

O que NÃO espera: Um chat com IA. Não espera campo de texto livre para "descrever seu caso". Não espera ter que saber o que é relevante. Não espera vocabulário técnico de IA.

Modelo mental correto a reforçar: "Estou consultando um sistema especialista que sabe fazer as perguntas certas sobre meu tipo de caso."

Workarounds atuais:

Carla: escreve petição do zero, 2-3 horas. Copia modelo de colega.
Rafael: copia prompts do Google, itera 3-5x no ChatGPT. Gasta 1h tentando.
Marcos: equipe usa ChatGPT sem padrão, resultados inconsistentes.

Success Criteria

Critério	Indicador	Meta
"Isso funciona de primeira"	Resultado no Jus IA sem reformulação	>70%
"Foi rápido"	Tempo do primeiro toque ao redirect	<5 min
"Não precisei aprender nada"	Conclusão sem abandono	>60%
"Vou mandar pra colega"	Tráfego por referral/WhatsApp	>30%
"Não perdi nada ao voltar"	Estado preservado no browser back	100%

Novel UX Patterns

O Start Kit combina padrões estabelecidos de forma inovadora:

Padrão estabelecido (familiar): Fluxo de seleção tipo e-commerce (categoria → subcategoria → detalhes). O advogado já faz isso no iFood e Nubank.

Inovação invisível: A transição de perguntas determinísticas para perguntas geradas por IA. O advogado não percebe que mudou de fase — as perguntas da IA são renderizadas identicamente às estruturadas (chips, seleções, placeholders contextuais).

Padrão novo que precisa de validação: O preview como "contrato de confiança" — mostrar fundamentação jurídica antes do redirect. Este é o ponto de risco: se o preview for confuso ou parecer "prompt", quebra a confiança. Se mostrar artigos/súmulas reconhecíveis, cria o "momento aha".

Experience Mechanics

1. Initiation:

Advogado recebe link via WhatsApp, post do Jusbrasil, ou acesso direto
Deep link pode pré-selecionar área (ex: /trabalhista/horas-extras pula seleção inicial)
Se link genérico: primeira tela = "O que você precisa?" com chips de tipo de tarefa

2. Interaction (4-5 telas):

Tela 1 — Tipo + Área: "O que você precisa?" [Petição Inicial] [Contestação] [Pesquisa] + Área do direito [Trabalhista] [Cível] (agrupados se deep link não pré-selecionou)
Tela 2 — Subtipo: Subtipos da área selecionada como chips (ex: [Horas Extras] [Rescisão Indireta] [Dano Moral])
Tela 3 — Dados do caso: Perguntas estruturadas agrupadas por momento mental (empregador PJ/PF, regime, jornada, período — todas no mesmo contexto "relação de trabalho")
Tela 4 — Refinamento contextual: Perguntas da IA + determinísticas restantes, renderizadas identicamente (registro de ponto, testemunhas, pagamento parcial). Loading state: "Analisando seu caso..."
Tela 5 — Preview + Redirect: Pedido montado com fundamentação jurídica + botão "Gerar no Jus IA →"

3. Feedback:

Barra de progresso no topo atualiza a cada avanço (4-5 steps)
Seleção de chip: feedback visual imediato (cor + check)
Loading IA: skeleton com shimmer + microcopy ("Analisando seu caso...")
Preview: fundamentação jurídica destacada visualmente (badges com artigos/súmulas)

4. Completion:

Preview mostra o pedido montado em linguagem jurídica (não o prompt raw)
Fundamentação jurídica como badges clicáveis (art. 59 CLT, Súmula 85 TST)
Botão primário: "Gerar no Jus IA →" (redirect via URL parametrizada)
Se URL excede limite: fallback com "Copiar pedido" + link direto para Jus IA
Microcopy: "Seus dados não são armazenados após o redirecionamento"

Visual Design Foundation

Color System

Paleta primária — Confiança jurídica:

Token	Cor	Uso
`primary`	Azul escuro (#1E3A5F)	Ações primárias, header, elementos de confiança
`primary-light`	Azul médio (#2E5A8F)	Hover states, links
`accent`	Dourado/âmbar (#D4A843)	Destaque, badges de fundamentação jurídica, CTA secundário
`surface`	Branco (#FFFFFF)	Background de cards e áreas de conteúdo
`background`	Cinza muito claro (#F8F9FA)	Background geral das páginas
`text-primary`	Cinza escuro (#1A1A2E)	Texto principal
`text-secondary`	Cinza médio (#6B7280)	Texto auxiliar, placeholders

Paleta semântica:

Token	Cor	Uso
`success`	Verde (#059669)	Confirmação, progresso completo
`warning`	Âmbar (#D97706)	Atenção, fallback copy-paste
`error`	Vermelho (#DC2626)	Erros de validação
`info`	Azul claro (#0284C7)	Dicas, microcopy informativo

Rationale: Azul escuro + dourado = vocabulário visual de escritórios de advocacia, tribunais, e instituições jurídicas brasileiras. Transmite credibilidade e profissionalismo sem parecer tech startup. O dourado/âmbar para badges de fundamentação jurídica cria destaque sem parecer gamificado.

Acessibilidade: Contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande. Primary (#1E3A5F) sobre branco = ratio 8.2:1 (passa AAA).

Typography System

Typeface:

Primary (headings): Inter — clean, profissional, excelente legibilidade em mobile. Sem serifa para modernidade sem perder seriedade.
Body text: Inter — mesma família para consistência. Pesos variados para hierarquia.
Fallback: system-ui, -apple-system, sans-serif

Type scale (mobile-first):

Token	Size	Weight	Line Height	Uso
`heading-1`	24px (1.5rem)	700	1.3	Título da página
`heading-2`	20px (1.25rem)	600	1.35	Seções
`heading-3`	16px (1rem)	600	1.4	Subtítulos
`body`	16px (1rem)	400	1.5	Texto principal
`body-small`	14px (0.875rem)	400	1.5	Microcopy, helpers
`caption`	12px (0.75rem)	400	1.4	Disclaimers, labels

Desktop scale: +2px nos headings (heading-1: 28px, heading-2: 22px). Body mantém 16px.

Spacing & Layout Foundation

Base unit: 4px (0.25rem)

Spacing scale:

Token	Value	Uso
`space-1`	4px	Gap mínimo entre elementos inline
`space-2`	8px	Padding interno de chips, gap entre chips
`space-3`	12px	Padding interno de inputs
`space-4`	16px	Margem entre elementos de formulário
`space-6`	24px	Margem entre seções dentro de uma tela
`space-8`	32px	Margem entre seções principais

Layout:

Mobile: Single column, 100% width com padding lateral de 16px
Desktop: Max-width 640px centralizado — o fluxo não precisa ser wide, mantém foco
Cards: Background white, border-radius 12px, padding 16px, sombra sutil
Chips: Height 44px mínimo (touch target), border-radius 8px, padding horizontal 16px
Botões: Height 48px, full-width em mobile, border-radius 8px

Accessibility Considerations

Touch targets: Mínimo 44x44px para todos os elementos interativos
Contraste: WCAG AA (4.5:1 texto normal, 3:1 texto grande)
Focus indicators: Outline visível para navegação por teclado (:focus-visible)
Semantic HTML: <form>, <fieldset>, <legend>, <label> corretos para screen readers
Skip links: Não necessário — cada página é curta e focada em uma decisão

Design Direction Decision

Design Directions Explored

Considerando o contexto do produto (MPA mobile-first, público jurídico conservador, necessidade de confiança), a equipe convergiu para uma direção única clara — não há necessidade de explorar 6-8 variações para um produto de fluxo linear com foco funcional.

Chosen Direction: "Consulta Jurídica Digital"

Conceito: O Start Kit visualmente se posiciona como uma consulta estruturada digital — profissional, limpo, sem distrações. A estética evoca a seriedade de um escritório de advocacia moderno, não uma startup de IA.

Elementos-chave:

Header minimal: Logo (se houver) + indicador de progresso. Sem navegação, sem menu — o fluxo é linear
Cards de conteúdo: Fundo branco com sombra sutil sobre background cinza claro. Uma pergunta/agrupamento por card
Chips de seleção: Azul escuro outline, preenchimento sólido ao selecionar. Cantos arredondados (8px), nunca quadrados
Botão primário: Azul escuro sólido, full-width em mobile, texto branco. Único CTA por tela
Preview card: Fundo branco com borda dourada sutil. Badges de fundamentação jurídica em dourado/âmbar. Visualmente diferente das telas de perguntas para marcar o "momento aha"
Tipografia: Peso 600 para perguntas (heading-3), peso 400 para helpers. Hierarquia clara

Design Rationale

Público conservador: Advogados de 42-50 anos associam credibilidade a visual clean e institucional, não a interfaces coloridas ou experimentais
Foco funcional: O produto é um fluxo utilitário de 4-5 telas — sofisticação visual excessiva atrasa o loading e distrai do objetivo
Mobile-first: Cards empilhados em coluna única com chips é o padrão mais eficiente para toque com uma mão
Diferenciação no preview: A tela de preview é o único momento que merece destaque visual (borda dourada, badges) — é o ponto de conversão

Implementation Approach

Tailwind CSS com design tokens customizados (cores, tipografia, espaçamento)
Componentes como partials server-side (não SPA)
Mobile-first: estilos base para mobile, media queries para desktop
Performance: CSS inline crítico + Tailwind purged para bundle mínimo

User Journey Flows

Jornada 1: Fluxo Principal (Dra. Carla — Petição Trabalhista via WhatsApp)

flowchart TD
    A[WhatsApp: recebe link] --> B[Abre no celular]
    B --> C{Deep link específico?}
    C -->|Sim /trabalhista/horas-extras| E[Tela 3: Dados do Caso]
    C -->|Não - link genérico| D[Tela 1: Tipo + Área]
    D --> D2[Tela 2: Subtipo]
    D2 --> E
    E --> F{Perguntas determinísticas completas?}
    F -->|Sim| G[Loading: Analisando seu caso...]
    G --> H[Tela 4: Refinamento IA + perguntas restantes]
    H --> I[Tela 5: Preview com fundamentação]
    I --> J{URL < 2000 chars?}
    J -->|Sim| K[Botão: Gerar no Jus IA →]
    J -->|Não| L[Fallback: Copiar pedido + link Jus IA]
    K --> M[Redirect para Jus IA]
    L --> M
    M --> N[Resultado na primeira tentativa]

Detalhamento por tela:

Tela 1 — Tipo + Área (skip se deep link):

Header: indicador de progresso (step 1/5)
Pergunta: "O que você precisa?"
Chips: [Petição Inicial] [Contestação] [Pesquisa de Jurisprudência] [Parecer] [Contrato]
Pergunta condicional: "Qual área?" — [Trabalhista] [Cível]
Botão: "Continuar →"

Tela 2 — Subtipo (skip se deep link específico):

Header: indicador de progresso (step 2/5)
Pergunta: "Que tipo de [petição trabalhista]?"
Chips: [Horas Extras] [Rescisão Indireta] [Dano Moral] [Acúmulo de Função] [...]
Botão: "Continuar →"

Tela 3 — Dados do caso (agrupamento por momento mental):

Header: indicador de progresso (step 3/5)
Grupo 1 "Relação de Trabalho": Empregador PJ/PF | Regime CLT/PJ/Autônomo | Jornada contratual
Grupo 2 "Período": Data início | Data fim (ou "ainda empregado")
Grupo 3 "Detalhes específicos": Horas extras estimadas/semana | Banco de horas?
Botão: "Continuar →"

Tela 4 — Refinamento contextual:

Header: indicador de progresso (step 4/5)
Loading state: skeleton + "Analisando seu caso para perguntas específicas..."
Perguntas renderizadas como chips/seleção quando possível:
- "Há registro de ponto?" [Sim, eletrônico] [Sim, manual] [Não havia controle]
- "Existem testemunhas?" [Sim] [Não]
- "Houve pagamento parcial de HE?" [Sim, parcial] [Não, nenhum]
Se texto livre necessário: placeholder contextual "Ex: não pagava horas extras e exigia trabalho aos sábados"
Botão: "Ver meu pedido →"

Tela 5 — Preview + Redirect:

Header: indicador de progresso (step 5/5 - completo)
Card com borda dourada: "Seu pedido otimizado para o Jus IA"
Conteúdo: resumo do pedido em linguagem jurídica
Badges dourados: [art. 59 CLT] [Súmula 85 TST] [art. 71 CLT]
Botão primário: "Gerar no Jus IA →"
Link secundário: "Copiar pedido" (sempre disponível)
Microcopy: "Seus dados não são armazenados"

Jornada 2: Dr. Rafael — Acesso Direto

flowchart TD
    A[Post Jusbrasil / Anúncio] --> B[Abre link genérico]
    B --> C[Tela 1: Tipo + Área]
    C --> D[Tela 2: Subtipo - Rescisão Indireta]
    D --> E[Tela 3: Dados do caso]
    E --> F[Tela 4: Refinamento IA]
    F --> G[Preview: art. 483 CLT + alíneas]
    G --> H[Rafael: 'O problema era o pedido!']
    H --> I[Redirect Jus IA]
    I --> J[Resultado melhor que ChatGPT]
    J --> K[Compartilha link com colegas]

Jornada 3: Overflow de URL (Edge Case)

flowchart TD
    A[Caso complexo - muitos dados] --> B[Fluxo normal até Preview]
    B --> C{Sistema verifica tamanho URL}
    C -->|>2000 chars| D[Fallback UI]
    D --> E[Exibe pedido completo]
    E --> F[Botão: Copiar pedido]
    E --> G[Link: Abrir Jus IA]
    F --> H[Advogado cola no Jus IA]
    G --> H
    H --> I[Resultado completo - sem truncamento]

Jornada 4: Dr. Marcos — Deep Links como Governança

flowchart TD
    A[Marcos descobre Start Kit] --> B[Testa fluxo cível]
    B --> C[Gosta: fluxo guiado = governança]
    C --> D[Copia deep links por área]
    D --> E[WhatsApp escritório: links por especialidade]
    E --> F[Júnior trabalhista: /trabalhista/...]
    E --> G[Júnior cível: /civel/...]
    F --> H[Equipe usa Start Kit → Jus IA]
    G --> H
    H --> I[Shadow AI eliminado]

Journey Patterns

Padrão de navegação linear: Todas as jornadas seguem fluxo linear (forward-only com opção de back). Sem branches, sem side-navigation. Simplicidade é feature.

Padrão de entrada flexível: Deep link pula telas de seleção já respondidas na URL. Link genérico começa do início. Ambos convergem para o mesmo fluxo de perguntas.

Padrão de entrega dual: URL parametrizada como default, copy-paste como fallback. Ambos levam ao mesmo resultado. Transparente para o advogado.

Flow Optimization Principles

Menor caminho para valor: Deep links reduzem de 5 telas para 3 (skip tipo + área + subtipo)
Não perguntar o que já sabemos: Se veio por /trabalhista/horas-extras, não perguntar tipo, área ou subtipo
Estado preservado no back: O advogado pode voltar e mudar respostas sem perder progresso
Loading honesto: Refinamento IA tem latência real — melhor mostrar skeleton com microcopy do que fingir instantaneidade
Fallback invisível: O advogado não precisa saber que houve overflow de URL — a UI se adapta silenciosamente

Component Strategy

Design System Components (Tailwind base)

Componentes padrão disponíveis via HTML + Tailwind classes:

Componente	Uso no Start Kit	Customização
Button	CTAs primários e secundários	Cores do token, full-width mobile, 48px height
Input text	Campos de texto livre (exceção)	Placeholder contextual, border focus com primary
Radio/Checkbox	Seleções básicas	Estilizado como chip (custom)
Progress bar	Indicador de etapas	Stepper segmentado (custom)

Custom Components

1. ChipSelector

Purpose: Seleção de opções tocáveis (tipo tarefa, área, subtipo, respostas)
Anatomy: Container com chips em grid/wrap. Cada chip: texto + optional icon + estado selecionado
States: Default (outline azul), Hover (background azul claro), Selected (fill azul, check icon), Disabled (cinza, opacity 50%)
Variants: Single-select (radio behavior) | Multi-select (checkbox behavior)
Touch target: Mínimo 44px height, padding 12px 16px
Accessibility: role="radiogroup" ou role="group" + aria-checked por chip. Navegação por teclado (arrows)

2. StepperProgress

Purpose: Indicador de progresso linear no topo de cada tela (4-5 etapas)
Anatomy: Barra horizontal com segmentos. Segmento preenchido = completo, atual = highlight, futuro = outline
States: Completed (fill + check), Active (fill + pulse sutil), Upcoming (outline)
Compact: Apenas barra visual, sem labels de step — mobile não tem espaço
Accessibility: role="progressbar" + aria-valuenow + aria-valuemax

3. PreviewCard

Purpose: Exibição do pedido montado na tela de preview (momento aha)
Anatomy: Card com borda dourada | Título do pedido | Resumo em linguagem jurídica | Badges de fundamentação | CTAs
States: Default | Loading (skeleton) | Overflow (com fallback copy-paste visível)
Special: Borda dourada (accent) diferencia visualmente das telas de pergunta
Accessibility: <article> semântico + heading para o título

4. LegalBadge

Purpose: Badge visual para artigos de lei, súmulas e jurisprudência no preview
Anatomy: Pill shape com ícone de balança/livro + texto (ex: "art. 59 CLT")
Visual: Background dourado/âmbar claro, texto escuro, border-radius full
States: Default (static display — não interativo no MVP)
Accessibility: role="status" — informação complementar, não ação

5. LoadingState

Purpose: Indicador de loading durante chamada LLM (refinamento IA)
Anatomy: Skeleton da próxima tela (shimmer) + microcopy contextual
Microcopy: "Analisando seu caso..." (nunca "Carregando..." ou "Processando...")
Duração esperada: 2-5 segundos
Accessibility: aria-busy="true" + aria-live="polite" para anunciar quando carregou

6. CopyFallback

Purpose: Fallback quando URL excede limite — botão copiar + link
Anatomy: Textarea read-only com pedido completo | Botão "Copiar pedido" | Link "Abrir Jus IA"
States: Default | Copied (check icon + "Copiado!" por 2s)
Accessibility: aria-label="Copiar pedido para a área de transferência"

Component Implementation Strategy

Phase 1 — MVP Core (todas as jornadas):

ChipSelector, StepperProgress, LoadingState, PreviewCard, LegalBadge, CopyFallback
Todos os 6 componentes custom são necessários para o fluxo mínimo

Não há Phase 2/3 — o MVP é lean. Novos componentes só quando houver novas features.

UX Consistency Patterns

Button Hierarchy

Nível	Visual	Uso	Exemplo
Primary	Fill azul escuro, texto branco, full-width mobile	Ação principal por tela (uma única)	"Continuar →", "Gerar no Jus IA →"
Secondary	Outline azul, texto azul	Ação complementar	"Copiar pedido", "Voltar"
Text	Sem borda, texto azul, underline	Link contextual	"Seus dados não são armazenados"

Regras:

Máximo 1 botão primary por tela
Primary sempre no bottom da tela (thumb-friendly em mobile)
Secondary + Text empilhados abaixo do primary quando necessário

Feedback Patterns

Tipo	Visual	Microcopy	Duração
Seleção	Chip muda de outline para fill + check	—	Instantâneo
Validação inline	Borda vermelha + texto erro abaixo	"Selecione uma opção para continuar"	Persistente até corrigir
Loading IA	Skeleton shimmer + texto	"Analisando seu caso..."	Até resposta do LLM
Success (copy)	Check icon verde + texto	"Copiado!"	2 segundos
Progresso	Stepper segmento preenchido	—	Instantâneo ao avançar

Form Patterns

Princípio central: Minimizar inputs de texto. Máximo de seleções, mínimo de digitação.

Tipo de input	Quando usar	Implementação
Chip single-select	Perguntas com 2-6 opções definidas	ChipSelector variant="single"
Chip multi-select	Perguntas onde múltiplas opções são válidas	ChipSelector variant="multi"
Text input	Dados específicos sem opcões pré-definidas	Input com placeholder contextual
Date picker	Período do contrato, datas	Input type="date" nativo (mobile-friendly)

Validação:

Inline: erro aparece abaixo do campo ao tentar avançar
Nenhum campo obrigatório sem indicação visual clara
Botão "Continuar" desabilitado até campos obrigatórios preenchidos

Fluxo linear:

Forward: botão "Continuar →" (primary, bottom da tela)
Back: botão "← Voltar" (secondary, top-left) + browser back funcional
Estado preservado: ao voltar, respostas anteriores mantidas

Sem navegação global:

Sem header menu, sem sidebar, sem footer links durante o fluxo
O fluxo é uma experiência focada — o único destino é avançar ou voltar

Deep link entry:

URL determina ponto de entrada no fluxo
Telas já respondidas pela URL são puladas
Stepper reflete corretamente o ponto de partida

Empty States & Edge Cases

Situação	Tratamento
Subtipo não disponível	Mensagem: "Este tipo ainda não está disponível. Veja os fluxos disponíveis:" + chips dos fluxos existentes
Erro de rede durante IA	Retry automático 1x. Se falhar: "Não conseguimos analisar seu caso agora. Tente novamente." + botão retry
URL overflow	Transição silenciosa para CopyFallback — sem mensagem de erro
JavaScript desabilitado	Fluxo funciona 100% via MPA (form submit + page load). Progressive enhancement é opcional

Responsive Design & Accessibility

Responsive Strategy

Filosofia: Mobile-only com adaptação desktop. O produto é projetado para celular entre audiências. Desktop é bônus, não prioridade.

Mobile (320px - 767px) — Experiência primária:

Single column, full-width com padding 16px
Chips em grid de 2 colunas ou stack vertical (depende do tamanho do texto)
Botão primary full-width, fixo no bottom quando necessário
StepperProgress compact no topo

Tablet (768px - 1023px):

Mesma experiência do mobile, com max-width 640px centralizado
Chips podem ser 3 colunas se espaço permitir
Sem mudanças estruturais — o fluxo é linear e funciona igual

Desktop (1024px+):

Max-width 640px centralizado com background cinza
Card de conteúdo em white sobre background — visual de "formulário focado"
Botão primary não é full-width — max-width 320px centralizado
Preview card pode ter layout horizontal para badges se espaço permitir

Breakpoint Strategy

Breakpoint	Value	Abordagem
Base	0px+	Mobile-first — todos os estilos base
sm	640px	Chips em grid 2-col
md	768px	Max-width container ativado
lg	1024px	Desktop refinements (padding, card shadows)

Não há breakpoint xl — o produto não precisa de layout wide. 640px max-width é suficiente para fluxo linear.

Accessibility Strategy

Nível alvo: WCAG 2.1 AA — não é prioridade formal do PRD para MVP, mas seguir AA como guideline garante boa UX para todos e evita retrabalho.

Checklist por componente:

Componente	Requisito
ChipSelector	`role="radiogroup"`, `aria-checked`, keyboard arrows
StepperProgress	`role="progressbar"`, `aria-valuenow/max`
PreviewCard	`<article>` + `<h2>` semântico
LegalBadge	Text content sufficient (no icon-only)
LoadingState	`aria-busy`, `aria-live="polite"`
CopyFallback	`aria-label` no botão copiar
Buttons	`<button>` nativo (não `<div>` com onClick)
Forms	`<label>` + `<fieldset>` + `<legend>` corretos

Color contrast:

Texto primary (#1A1A2E) sobre white: 16:1 (AAA)
Primary button (#1E3A5F) texto white: 8.2:1 (AAA)
LegalBadge text sobre accent background: verificar ≥4.5:1

Keyboard navigation:

Tab order lógico (top-to-bottom)
Focus visible em todos os interativos
Enter/Space para ativar chips e botões
Arrow keys para navegar entre chips no mesmo grupo

Testing Strategy

Responsive testing:

iPhone SE (375px), iPhone 14 (390px), Pixel 7 (412px) — variação mobile
iPad (768px) — tablet
Desktop Chrome/Firefox/Safari (1280px+)
Throttle 3G para simular "entre audiências"

Accessibility testing:

Lighthouse accessibility audit (meta: >90)
Tab-through manual em cada tela
VoiceOver (iOS) para testar screen reader no mobile
Color blindness simulation (protanopia, deuteranopia)

Implementation Guidelines

HTML:

Semantic HTML5 (<main>, <form>, <fieldset>, <article>, <nav>)
Labels associados a todos os inputs
Lang attribute: <html lang="pt-BR">

CSS (Tailwind):

Mobile-first: base styles sem media query = mobile
@screen sm/md/lg para overrides progressivos
Relative units: rem para font-size, % para width
min-h-[44px] para todos os touch targets

Progressive enhancement:

Base: HTML forms com submit (funciona sem JS)
Enhanced: JS para transições suaves, validação inline, copy-to-clipboard
Graceful degradation: se JS falha, MPA form submit funciona normalmente

42 KiB Raw Blame History

UX Design Specification - Jus IA Start Kit

Executive Summary

Project Vision

Target Users

Key Design Challenges

Design Opportunities

Core Experience Definition

Core User Action

Experience Principles

Critical Success Moments

Effortless Interactions

Desired Emotional Response

Primary Emotional Goals

Emotional Journey Mapping

Micro-Emotions

Emotion-Design Connections

Emotional Design Principles

UX Pattern Analysis & Inspiration

Inspiring Products Analysis

Transferable UX Patterns

Anti-Patterns to Avoid

Design Inspiration Strategy

Design System Foundation

Design System Choice

Rationale for Selection

Implementation Approach

Customization Strategy

Core User Experience

Defining Experience

User Mental Model

Success Criteria

Novel UX Patterns

Experience Mechanics

Visual Design Foundation

Color System

Typography System

Spacing & Layout Foundation

Accessibility Considerations

Design Direction Decision

Design Directions Explored

Chosen Direction: "Consulta Jurídica Digital"

Design Rationale

Implementation Approach

User Journey Flows

Jornada 1: Fluxo Principal (Dra. Carla — Petição Trabalhista via WhatsApp)

Jornada 2: Dr. Rafael — Acesso Direto

Jornada 3: Overflow de URL (Edge Case)

Jornada 4: Dr. Marcos — Deep Links como Governança

Journey Patterns

Flow Optimization Principles

Component Strategy

Design System Components (Tailwind base)

Custom Components

Component Implementation Strategy

UX Consistency Patterns

Button Hierarchy

Feedback Patterns

Form Patterns

Navigation Patterns

Empty States & Edge Cases

Responsive Design & Accessibility

Responsive Strategy

Breakpoint Strategy

Accessibility Strategy

Testing Strategy

Implementation Guidelines

42 KiB

Raw Blame History