iMedicina · Aplicação web / Central de Ajuda

Central de Ajuda do iMedicina

UX/UI
Construção com IA
SEO

Um acervo de artigos organizado para busca, navegação e leitura

Organizei o acervo de artigos do iMedicina e construí uma central pública com busca, categorias e navegação de leitura. Conduzi a interface, o tratamento do conteúdo, o SEO e a implementação com Lovable e Claude Code.

Explorar as telas

Cliente: iMedicina
Tipo: Aplicação web / Central de Ajuda
Minha atuação: Interface e direção visual
UX e arquitetura da informação
Organização e tratamento do acervo
SEO
Implementação
Ferramentas: Lovable, Claude Code
Crédito institucional: iMedicina
Entrega principal: Cerca de 15 horas
Implementação: Individual, com apoio de IA
Projeto no ar: ajuda.imedicina.com.br ↗

§ 01

Contexto

O material veio de uma base anterior, com textos e HTML em padrões diferentes, links antigos e trechos que precisavam de revisão. O desafio era organizar esse conteúdo e criar uma interface consistente para consultá-lo.

Meu trabalho foi definir um fluxo que conectasse o tratamento dos artigos à estrutura da central. A marca e o Design System já existiam; apliquei esses padrões à busca, às categorias e às páginas de leitura.

§ 02
Decisões de UX/UI
01
Busca e categorias como portas de entrada
Coloquei a busca em destaque para quem já chega com uma dúvida. Os atalhos de primeiros passos e a grade de categorias oferecem outro caminho para explorar o acervo.
Assim, a central organiza a consulta tanto por um termo quanto por assunto, com resumos que antecipam o conteúdo.
Categorias para explorar o acervo por assunto.
02
Navegação sem depender da home
Nas páginas internas, mantive as categorias e os artigos acessíveis pela navegação lateral. As categorias se expandem no lugar e oferecem opções para ver mais textos.
No celular, esse acesso vira um painel sobre a página. A ideia é permitir a troca de assunto sem precisar voltar ao início.
Navegação do acervo em painel no celular.
03
Uma estrutura própria para a leitura
Organizei o artigo em três áreas: navegação do acervo, texto e índice de seções. O tempo de leitura aparece no início, e o índice acompanha o trecho ativo no desktop.
Essa separação dá uma função a cada área e mantém as referências de navegação próximas do conteúdo.
Navegação do acervo, leitura e índice em áreas próprias.
04
Busca com orientação para continuar
Os resultados mostram categoria, título e resumo, para situar cada artigo antes da abertura. Também defini o estado sem correspondência, com sugestões de consulta, acesso às categorias e suporte.
A tela deixa um próximo caminho disponível mesmo quando o termo pesquisado não retorna artigos.
Estado sem resultados, demonstrado com uma consulta sintética.
05
O Design System aplicado à consulta
Usei os padrões visuais do iMedicina em títulos, botões, links, cards e estados da interface. O azul institucional orienta os pontos de ação, enquanto a área de leitura usa superfícies claras.
A identidade se mantém entre os templates, com uma composição mais discreta ao redor dos artigos.
06
A mesma estrutura em telas menores
No tablet e no celular, adaptei a disposição dos atalhos, das categorias e da navegação. O índice do artigo passa para dentro da coluna de leitura, em um bloco recolhível.
Mantive as funções da versão desktop e reorganizei os componentes conforme o espaço disponível.
Índice recolhível dentro do artigo no tablet.

§ 03

Construção com IA

Conduzi a implementação com Lovable e Claude Code, incluindo o preparo dos artigos para os templates da central. A IA apoiou a execução, e organizei as rodadas de tratamento e conferência do conteúdo.

Conteúdo estruturado: Tratei marcação, hierarquia de títulos e links para integrar os artigos aos padrões de leitura.
Conferência das alterações: Comparei versões e mantive registros das mudanças, com verificações de preservação do texto nas alterações estruturais.
Revisão editorial: Separei os ajustes técnicos das decisões sobre o conteúdo, que continuaram com a equipe responsável pelos artigos.

§ 04

SEO

Pensei o SEO por tipo de página, em conjunto com a organização do acervo. Home, categorias e artigos receberam metadados e URLs canônicas próprias, com dados estruturados correspondentes ao conteúdo.

Home e categorias: Identificação da central e organização das coleções de artigos para os buscadores.
Artigos: Metadados específicos, estrutura semântica e canonical limpo para cada texto.
Busca interna: Resultados com noindex, deixando as páginas de conteúdo como destinos para a descoberta orgânica.

§ 05

Entrega e retorno

Construí a central com busca, categorias, artigos e estados de consulta, conduzindo a implementação individualmente. A entrega principal levou cerca de 15 horas, e a equipe gostou bastante do resultado.

Na versão registrada em 23 de outubro de 2026, a interface exibia 14 categorias e 262 artigos. Essas contagens descrevem o acervo público naquele momento.

Não foram reunidas métricas de uso, redução de chamados ou tráfego.

§ 06