← Todos os projetos

Redline MD

UX · UI · Design System · Branding · Webflow · Client-First · Desenvolvimento · Wireframes · Desktop · Mobile
Redline MD

Visão geral

A Redline MD é um serviço americano de revisão de contratos médicos que entrega aos médicos, em 24 horas, um relatório com as marcações de revisão do contrato de trabalho, por um valor fixo de US$199.

O projeto foi entregue como um desafio de design da Foundey. O briefing era simples e difícil: 35% do tráfego do site atual vem do celular, e o celular traz menos de 10% da receita. A tarefa era refazer por completo a landing page do Google Ads, pensada primeiro para o celular, para transformar cliques nos anúncios em envios de contrato.

Meu Papel

Designer e desenvolvedor Webflow do início ao fim. Fiquei responsável pela pesquisa, arquitetura de informação, UX writing, design visual, animação e toda a implementação no Webflow.

Analisei o site da Redline no ar, defini o novo hero pensado para o celular, redesenhei todas as telas, escrevi os textos da página, criei a demonstração interativa do contrato e entreguei no Webflow a calculadora, o consentimento de cookies, os modais e o conteúdo editável pelo CMS.

Principais Contribuições

  • Diagnóstico primeiro. Li o site atual da Redline como um médico leria e listei o que gerava desconfiança: um erro de digitação no logo, três números de economia diferentes, um contador de salário parado em 0%, telas do produto borradas, um link do Google Drive para o relatório de exemplo, o preço de US$199 nunca mostrado ao lado da referência de US$500 de um advogado, um aviso de cookies que cobria um terço da tela no celular, nenhum botão fixo no celular e um rodapé só com o copyright.
  • Hero refeito em torno do retorno. O novo hero mostra o dinheiro e o prazo logo na primeira tela: o preço de US$199 dentro do botão, "US$500 ou mais" logo abaixo e fotos de médicos ao lado de cartões de contrato desenhados em código, para a página parecer médica desde o primeiro segundo.
  • O relatório de exemplo na página. O link do Google Drive deu lugar ao relatório real de 5 páginas, que abre num modal na própria página, com o resumo do contrato, os pontos de atenção e o impacto financeiro redesenhados como ilustrações da marca antes de o médico clicar em Download.
  • Uma demonstração interativa. Um contrato de exemplo com quatro cláusulas marcadas, e cada uma mostra a revisão ao toque: o texto original riscado e a correção em verde, os dois legíveis como frases inteiras.
  • Uma calculadora que qualquer um entende. O médico informa o valor do seguro de responsabilidade profissional e vê quanto custaria a cobertura de cauda, pela regra de até 2x da AMA Insurance. Os termos técnicos ficaram, cada um com uma explicação simples e uma dica ao passar o mouse.
  • Preços lado a lado. US$199 contra US$480 a US$1.950 num escritório de contratos e mais de US$10.000 numa cobertura de cauda que ninguém negociou. A Redline em preto com um selo verde de economia, e o vermelho reservado para o risco.
  • Celular primeiro. Um botão fixo que aparece depois do hero e some no botão final, um envio em 3 etapas sem criar conta, depoimentos num carrossel com pontos e setas e um cartão pequeno de cookies, com opção de aceitar e preferências.
  • Todo o jurídico, na página. Termos, privacidade e política de cookies em modais. As preferências de cookies podem ser mudadas a qualquer momento pelo rodapé.
  • Construído no Webflow com Client-First. O sistema visual do template Longevity reescrito em classes Client-First. Finsweet Attributes no accordion, nos modais, no contador e no slider. Finsweet Cookie Consent no aviso de cookies. Todo o conteúdo editável sem código.
  • Animação que respeita quem lê. As fotos entram voando, os fundos brilham e as barras e cláusulas se animam com a rolagem. Tudo desliga com prefers-reduced-motion.

Impacto

A nova landing da Redline MD foi entregue à Foundey como resposta ao desafio. Ela é um site completo no Webflow, com Client-First, Finsweet Attributes e conteúdo editável no CMS, com o celular como alvo principal, e não como algo deixado para depois.

Todos os depoimentos, selos de segurança, materiais dos fundadores e textos jurídicos são provisórios, pensados para o conteúdo real da Redline. O case registra três perguntas que eu validaria com eles antes de publicar: a promessa de prazo, o volume de contratos informado e quais certificações de segurança mostrar.

O protótipo no ar e o case interativo estão nos links abaixo.

Physician user
Guia de Estilo

Paleta de cores

#E0342F · Red
#B42320 · Red Dark
#1C7A43 · Savings
#0A0A0A · Ink
#FDE3DF · Blush
#FFF4F2 · Blush 2
#F5F5F5 · Surface
#FFFFFF · Paper
Tipografia · Figtree

Contracts, redlined.

ExemploFamíliaPesoTamanhoLineUse
Contracts, redlined.FigtreeExtraBold64px68pxH1
Contracts, redlined.FigtreeBold44px52pxH2
Contracts, redlined.FigtreeSemiBold28px36pxH3
Contracts, redlined.FigtreeMedium20px30pxLead
Contracts, redlined.FigtreeRegular17px26pxBody
Mobile / Redline MD
Feito no Figma
Design de joaomob