RD* studio

Case 01 — Grupo São Francisco · Saúde · via WHF

Nove empresas de saúde, uma porta de entrada

O redesenho de um site que cresceu até virar o portal do cliente de um dos maiores grupos de saúde do Brasil — completo: 1,5 milhão de vidas, do briefing ao código rodando em nove meses.

Papel
UX, UI, pesquisa, service design — além da liderança de design e da gestão do projeto
Escala
1,5 mi de vidas · 9 empresas · time de design de 5–7, ao lado de 35+ de TI e 15+ de marketing
Métodos
Design Thinking · Design Sprint · Pesquisa qualitativa · Scrumban · Object-Oriented UX
Prazo
9 meses, da chegada do cliente à plataforma em código
01 — A situação

O briefing mudou no meio do jogo

O Grupo São Francisco era uma das empresas líderes do setor de saúde no Brasil: um grupo de nove empresas entre planos de saúde, cobertura odontológica, hospitais e locação de ambulâncias, atendendo cerca de 1,5 milhão de vidas. Fomos contratados para refazer o site institucional.

Pouco depois do início, o trabalho se transformou em algo muito maior — a reformulação completa do portal do cliente. Área logada, pagamento, histórico de uso e agendamento de consultas pelo próprio usuário viraram as funcionalidades principais. Nove empresas — e as expectativas de nove diretorias — passaram a apontar para um único produto.

Enquanto isso, o time de design flutuava entre cinco e sete pessoas, com alocação parcial, trabalhando junto a um time de TI de 35+ nas integrações e um de marketing de 15+ no conteúdo e no treinamento de CRM.

1,5 mividas atendidas
9empresas, 9 diretorias
5–7designers, alocação parcial
50+colegas de TI e marketing
02 — A virada

Achar a interseção, depois pensar em objetos

Duas decisões moldaram tudo o que veio depois.

Primeiro: enquadrar antes de desenhar. Conduzi workshops nas nove empresas do grupo, conversando com cada diretoria para entender onde as expectativas se cruzavam. Essa interseção — e não a lista de desejos de nenhuma empresa isolada — virou o escopo: um portal para nove empresas.

Segundo: Object-Oriented UX como espinha dorsal. Em vez de organizar o portal por departamentos ou páginas, trouxe um jeito orientado a objetos de entender as necessidades, as entradas e as informações dos usuários, e evoluí isso para a arquitetura de informação. As pessoas pensam em coisas — um pagamento, uma consulta, um registro de uso —, então a estrutura nasceu desses objetos e das relações entre eles, depois foi cruzada com o que o ecossistema do cliente já conseguia entregar em APIs e funcionalidades já implementadas.

Nove diretorias, um escopo: a interseção das expectativas, estruturada nos objetos em que os usuários realmente pensam.

Modelo de OOUX do portal Quatro cards de objeto — pagamento, consulta, registro de uso e conta — com linhas como conteúdo central, metadados, objetos aninhados e ações, cada card mostrando só as linhas de que precisa. Conectores mostram pagamento e consulta aninhados dentro de conta, e consulta alimentando o registro de uso. OOUX — objetos, não páginas PAGAMENTO conteúdo central metadados ações CONSULTA conteúdo central metadados objetos aninhados ações REGISTRO DE USO conteúdo central metadados CONTA conteúdo central metadados objetos aninhados ações alimenta aninha em uma estrutura de objetos aninhados, mapeada nas APIs existentes
Esquema da rodada de OOUX: as funcionalidades do portal (pagamento, consultas, histórico de uso, conta logada) modeladas como objetos com relações aninhadas, cruzadas com as APIs que o ecossistema já expunha.
03 — O trabalho

De nove salas de diretoria a uma plataforma em código

  1. Uma pesquisa que eu podia assinar embaixo

    Montei o plano de pesquisa e fiz eu mesmo a parte sem glamour: selecionar usuários, gerenciar o estudo e aplicar a maior parte das entrevistas. O resultado foi um conjunto de personas fundamentadas em clientes reais do grupo, não em substitutos.

  2. Mapear o que já existe antes de desenhar qualquer coisa

    Para cada persona, mapeamos o que o ecossistema do cliente já conseguia entregar em APIs e funcionalidades já implementadas, agrupamos os casos de uso e validamos as jornadas. Em paralelo, fizemos benchmark de todos os players relevantes do mercado, cruzando semelhanças e diferenciais.

  3. Um mapa do site para nove empresas

    O modelo de objetos virou um mapa do site conectando empresas, personas, tarefas e necessidades. Dali: rascunhos detalhados mobile-first, depois telas de baixa fidelidade organizando cada informação a exibir — cobrindo todas as empresas do grupo — mais um CMS para o conteúdo institucional.

  4. Testar com usuários reais, onde eles estiverem

    Os designs foram validados com prototipação e testes com usuários reais. Em uma das rodadas, isso significou rodar testes num café, recrutando quem passava na rua.

  5. Um design system sem um único conteúdo fictício

    Na alta fidelidade criei o design system: folha de estilos de componentes, padrões de design para a profundidade e o detalhamento com que a informação aparece, e modelos de informação recursivos para minimizar a carga cognitiva — além de um bom volume de assets ilustrados. Nenhuma informação do arquivo do design system está duplicada; é tudo conteúdo real.

Mapa do site conectando empresas, personas, tarefas e necessidades Diagrama em quatro camadas: quatro blocos de empresa rotulados — planos de saúde, odontologia, hospitais, locação de ambulâncias — mais cinco blocos tracejados sem rótulo, marcados como outras cinco do grupo, conectam-se a nós de persona, que se conectam a nós de tarefa como pagar uma fatura, agendar uma consulta, ver o histórico de uso e gerenciar o plano, tudo convergindo num único nó de portal à direita. 9 empresas personas tarefas · necessidades um portal planos de saúde odontologia hospitais ambulâncias +5 outras do grupo persona 01 persona 02 persona 0n pagar uma fatura agendar uma consulta ver histórico de uso gerenciar o plano ÁREA LOGADA todas as empresas do grupo, cobertas numa única estrutura
Esquema do mapa do site que conectou as nove empresas do grupo, as personas da pesquisa e suas tarefas e necessidades num único portal com área logada.
Modelo de informação recursivo em três profundidades O mesmo objeto mostrado três vezes, da esquerda para a direita: uma linha compacta de lista, um card-resumo com poucos campos e um registro completo com muitos campos. Setas ligam os três, com o rótulo: mesmo padrão, mais detalhe. modelo de informação recursivo — mesmo objeto, três profundidades linha de lista card-resumo registro completo mesmo padrão, mais detalhe
Esquema do padrão de profundidade de informação do design system: um modelo recursivo renderizado como linha de lista, card-resumo e registro completo — feito para minimizar a carga cognitiva.
Página institucional do protótipo do GSF apresentando as empresas do grupo — resgate, laboratórios, hospitais, planos de saúde, odontologia e inovação — com ícones ilustrados. Tela de resultados da busca de médicos do protótipo, na área logada do portal, com cards de profissionais e filtros. Tela do fluxo de autoagendamento do protótipo do portal, para marcar uma consulta médica online.
Direto dos arquivos Figma entregues: a apresentação do grupo com seus assets ilustrados, a busca de médicos e o fluxo de autoagendamento.
04 — Onde isso foi parar

Nove meses, do briefing a uma plataforma em código

Em 2019 o grupo foi adquirido por cerca de US$ 1,2 bilhão — o que também explica por que restam poucos rastros públicos da plataforma. Ao longo do caminho, gerenciei o projeto, participei das reuniões de reporte ao cliente, facilitei os workshops, liderei o time de design e entrevistei usuários, com reportes semanais aos stakeholders construídos sobre dados que o time coletou e sintetizou. Os arquivos Figma abaixo são o que ainda posso mostrar.

O que isso diz sobre como eu trabalho

  • Construo sistemas, não peças avulsas — um modelo de objetos, um mapa do site e um arquivo de design system em que nenhum conteúdo é fictício ou duplicado; é tudo real.
  • Lidero e ponho a mão na massa ao mesmo tempo: gerenciando o projeto e facilitando workshops com diretorias sem parar de entrevistar usuários e desenhar telas.
  • Pesquisa é gente de verdade — recrutando e entrevistando usuários eu mesmo, até testar protótipos com desconhecidos num café.