Case Study — CareCloud

CareCloud

Ajudar a replataformar uma suíte clínica de Adobe Flex para React: quatro meses in loco em Miami, um time de cinco UX e fluxos hi-fi testados com médicos de verdade — design entregue lado a lado com os engenheiros que reconstruíam o produto.

Cliente
CareCloud · Health-tech, Miami (via App Theory)
Ano
2017 – 2018
Papel
UX / Product Designer — time de cinco UX
Plataforma
Web app · prontuário clínico (EHR) e gestão de clínica
Contexto
Replataformação de um produto core de Adobe Flex para React
Telas do CareCloud sobre fundo claro: o Productivity Center em destaque, com a revisão de sistemas e o faturamento ao lado

A CareCloud é uma empresa americana de health-tech cuja plataforma roda o lado clínico e administrativo de clínicas médicas — prontuário, prescrições, agenda, faturamento. Quando entrei, pelo estúdio de produto App Theory, a empresa estava replataformando um produto core de Adobe Flex para React.

Entrei como parte de um time de cinco UX, trabalhando in loco em Miami por quatro meses e remoto no resto de cerca de um ano. A missão: redesenhar as telas clínicas para a nova stack e validá-las com quem vive nesse software o dia inteiro — médicos, enfermeiros e recepção.

O que eu fiz

UX research & entrevistasMapeamento de fluxos clínicosPrototipação hi-fiTestes de usabilidade com clínicosDesign de interação e de informaçãoPadrões de UI para a nova stackDesign → código com engenhariaAlinhamento com stakeholdersTrabalho in loco em Miami
~1 anono projeto, do início à passagem de bastão
4 mesesin loco em Miami; o resto remoto
5 UXdesigners no time, mais a engenharia
4módulos: prontuário, e-prescrição, faturamento e agenda
Flex → Reacta migração de plataforma para a qual desenhei
Hi-fiprotótipos testados com clínicos reais

01 — O produto

Um ambiente clínico, replataformado

O produto é onde a clínica toca o dia. O Productivity Center é a base do médico: as tarefas do dia, a carga de consultas, a central de mensagens e as métricas de desempenho, tudo numa tela só. Meu trabalho era deixar essa densidade legível — muita informação, lida num relance, resolvida num clique.

Tudo precisava ser redesenhado para React. O legado era feito em Adobe Flex, uma tecnologia em fim de vida; a reconstrução era a chance de repensar a interface, não só portá-la.

A reconstrução moderna da CareCloud: o painel no desktop e a ficha do paciente no celular, em tema claro e escuro
O mesmo sistema de componentes, do desktop ao celular — e em tema claro e escuro.
01 — Productivity Centerpainel do médico · página inteira
CareCloud Productivity Center: atividade de tarefas, visão de consultas, agenda do dia, central de mensagens e métricas de desempenho
Tarefas do dia, carga de consultas, agenda, central de mensagens e medidores de desempenho numa tela só. Passe o mouse sobre a janela para rolar a página.

02 — O prontuário

O quadro inteiro do paciente, numa só visão

Do painel, o médico entra no prontuário. O Patient Center reúne o paciente inteiro numa só tela — pedidos, próximas visitas, sinais vitais, medicações, imunizações, problemas, alergias — cada bloco um módulo que se escaneia ou se abre. O trabalho de design foi hierarquia: o que o clínico precisa primeiro, o que fica a um toque.

A prescrição vive dentro dessa tela. Trocar uma medicação por outra é um só modal: o que sai, por quê, o que entra, com a pré-visualização da receita e a farmácia já escolhida — e um selo vermelho quando a substância é controlada.

01 — Patient Centerprontuário · página inteira
CareCloud Patient Center: prontuário completo com pedidos, sinais vitais, medicações, imunizações, problemas e alergias
A visita de hoje no topo — pedidos, próximas visitas e os últimos sinais vitais — e, abaixo, cada módulo do prontuário com seu próprio "Add New". Passe o mouse para rolar.
02 — Medicaçõese-Prescrição
CareCloud: modal de parar e adicionar medicações sobre o prontuário, com duas medicações descontinuadas e uma nova com selo de substância controlada
Parar e adicionar na mesma ação: as medicações descontinuadas guardam o motivo; a nova mostra a receita como a farmácia vai receber.

03 — A consulta

Da admissão ao faturamento sem trocar de ferramenta

O atendimento é o coração da visita. Desenhei o fluxo de anotação — admissão, história, revisão de sistemas, exame, plano — como uma sequência de passos com o progresso sempre visível. Na revisão de sistemas, chips coloridos deixam o médico marcar achados rápido, sem sair do teclado: verde é normal, vermelho é achado, cinza é o que ainda não foi avaliado.

O plano fecha a consulta. Código E&M, procedimentos e diagnósticos vivem na mesma tela da nota, com um botão para assinar e mandar ao faturamento — a visita termina sem abrir outro sistema.

01 — Novo atendimentoadmissão · página inteira
CareCloud: novo atendimento com queixa principal, história médica, fatores de risco e história social, com recomendações e pedidos na coluna direita
02 — Revisão de sistemaschips · página inteira
CareCloud: nota de atendimento na etapa de revisão de sistemas, com achados em chips verdes, vermelhos e cinzas por sistema
03 — Encounter Notescodificação e faturamento
CareCloud Encounter Notes: codificação E&M, procedimentos com modificadores e diagnósticos, e o botão Assinar e enviar para faturamento
Ambiente clínico, serviço e tipo de exame no topo; abaixo, o código E&M, os procedimentos e os diagnósticos adicionais. "Sign & Send to Billing" encerra a visita.

04 — Os detalhes

As decisões que o print esconde

Software clínico se decide no detalhe: a cor de um chip, um ícone ao lado de uma pressão fora da faixa, o selo que diz "substância controlada" antes de o médico assinar. Cada um desses foi desenhado, testado com clínicos e ajustado. Alguns dos que mais importaram:

Seção neurológica da revisão de sistemas: chips vermelhos de achados, verdes de normais e cinzas de não avaliados
Chips de três estados

Verde para normal, vermelho para achado, cinza para o que ainda não foi avaliado. O médico marca a revisão inteira sem tirar a mão do teclado e lê o resultado de longe.

Bloco da visita de hoje: pedidos, próximas visitas e últimos sinais vitais, com ícones de alerta em pressão e dor fora da faixa
Alerta no dado, não no rodapé

Pressão e dor fora da faixa ganham o ícone na própria célula. Ninguém precisa decorar o limite para enxergar o problema.

Agenda do dia: pacientes com foto, horário, ícones de status, sala e tempo decorrido, em tratamento ou com check-in feito
Agenda com estado

Cada paciente carrega o status, a sala e há quanto tempo espera. A cor avisa antes do texto.

Linha de prescrição de Clonazepam com selo vermelho de substância controlada, pré-visualização da receita e farmácia
Substância controlada à vista

O selo aparece na linha da prescrição, antes de assinar. A pré-visualização diz exatamente o que a farmácia vai receber.

Bloco de código E&M com quatro níveis como opções lado a lado, e a tabela de procedimentos com unidades, modificadores e diagnósticos
Código E&M em um clique

Os quatro níveis como opções lado a lado, com modificadores e diagnósticos na mesma linha. O faturamento começa dentro da consulta.

Cartão de atividade de tarefas: anel com 80% concluído e a lista do que falta por tipo
O dia em um número

O anel diz quanto já foi resolvido; a lista ao lado diz o que falta, por tipo. Um relance, uma decisão.

05 — O método

In loco com quem usa o produto

Por quatro meses trabalhei do escritório da CareCloud em Miami, ao lado de produto, engenharia e dos especialistas clínicos. Essa proximidade era o ponto: software de saúde é cheio de regras que só se aprendem vendo alguém trabalhar — como um enfermeiro prepara o paciente, como um faturista lê um código, o que um médico faz nos noventa segundos entre uma sala e outra.

Conduzi entrevistas e testes de usabilidade com clínicos reais, mapeei os fluxos de trabalho e montei protótipos de alta fidelidade que colocamos na frente dos usuários antes de uma linha do novo front-end ser escrita. Testávamos, eu ajustava, em ciclos — saúde regulada deixa pouco espaço para adivinhação.

Diagrama do método: observar de perto, entrevistar clínicos, mapear os fluxos, protótipo hi-fi e testar com quem usa, em ciclos; abaixo, os doze meses do projeto com os quatro primeiros in loco em Miami
Cinco passos em ciclo, dentro do prédio do cliente: quatro meses em Miami, o resto remoto com o mesmo time.

06 — Design → código

Desenhar lado a lado com a reconstrução

Como o produto estava sendo reconstruído em React, design e engenharia tinham que andar juntos. Entreguei fluxos hi-fi conforme os componentes tomavam forma, defini os padrões de UI que a nova interface reaproveitaria e sentei com os desenvolvedores para resolver as lacunas que só aparecem no código real — estados, casos de borda, a densidade que um print esconde.

Trabalhar assim, colado no build, é a parte que levei para tudo o que vim a fazer depois: design que entra em produção, não design jogado por cima do muro.

Diagrama de duas raias, design e engenharia, com as entregas alternando entre elas: fluxos hi-fi, componentes React, padrões de UI, telas montadas, ajuste no código real e produção
Duas raias, uma entrega puxando a outra: o design chega conforme o componente nasce, e volta ao código para fechar o que o print não mostra.

07 — Resultado

Uma suíte legada, redesenhada para a próxima década

Ao longo de cerca de um ano, o produto clínico saiu do Adobe Flex rumo a um front-end moderno em React, com o ambiente do médico — prontuário, prescrição, agenda e faturamento — redesenhado e validado com os clínicos que o usam todo dia.

Foi minha imersão mais profunda em software de saúde regulado e pesado em fluxo, num time multidisciplinar, dentro do prédio do cliente — e o projeto que definiu o jeito como ainda trabalho: pesquisa perto dos usuários, design perto do código.

Resultados

O que o trabalho entregou

  • +Um produto clínico core movido do Adobe Flex em direção ao React
  • +Ambiente do médico redesenhado: prontuário, e-prescrição, faturamento, agenda
  • +Fluxos hi-fi validados com médicos e equipe clínica reais
  • +Quatro meses in loco em Miami com stakeholders e usuários
  • +Design entregue junto com a reconstrução de engenharia
  • +Padrões de UI reaproveitáveis para a nova plataforma

Stack

SketchAxurePrototipação hi-fiTestes de usabilidadeDesign SystemReact (stack-alvo)UX clínico

Tem um produto complexo que precisa ser replataformado?

Eu desenho perto dos usuários e perto do código — da pesquisa a um front-end que entra em produção.