O Desafio
Sistema Hospitalar Legado com UX Defasada
A Vision One é uma das maiores redes de hospitais oftalmológicos do Brasil. O sistema QVis — plataforma de Prontuário Eletrônico, Gestão Administrativa e Financeira — era funcional mas apresentava interfaces inconsistentes, fluxos confusos e ausência de um Design System, gerando retrabalho tanto para a equipe de design quanto para os desenvolvedores.
Paralelamente, o Portal do Paciente — responsável pelo atendimento de solicitações de pacientes e colaboradores — tinha baixa acessibilidade, especialmente crítica para pacientes oftalmológicos com deficiências visuais. O desafio era evoluir ambos os produtos simultaneamente, padronizando a experiência e construindo uma base escalável.
Objetivos
Metas de Alto Nível
Padronizar com Design System
Estruturar um Design System do zero sobre Tailwind CSS, com componentes reutilizáveis que garantissem consistência visual, reduzissem retrabalho e acelerassem o desenvolvimento de novas funcionalidades.
Evoluir a Experiência do Usuário
Revisar fluxos críticos, melhorar a usabilidade das interfaces existentes e projetar novas funcionalidades com acessibilidade WCAG, priorizando pacientes com deficiências visuais.
Meu Papel
Product Designer — UX/UI
Atuei como Product Designer responsável pela evolução do sistema QVis e do Portal do Paciente. Colaborei diretamente com um time multidisciplinar composto por 4 desenvolvedores Full Stack, 1 profissional de Qualidade e o Product Manager. Meu background em front-end (HTML, CSS, JavaScript, Tailwind CSS) foi decisivo para facilitar a comunicação entre Design e Engenharia e validar tecnicamente componentes antes da implementação.
Minhas Responsabilidades
- Estruturei o Design System completo do zero sobre Tailwind CSS
- Desenvolvi +50 componentes reutilizáveis para padronização
- Projetei +40 interfaces para funcionalidades de média e alta complexidade
- Revisei e otimizei +10 fluxos críticos de usuários
- Apliquei benchmarking com iFood, apps bancários e Zé Delivery para insights
- Utilizei mapas de calor e análise de comportamento para decisões de design
- Validei contraste e acessibilidade seguindo diretrizes WCAG
- Desenvolvi UX Writing para componentes e fluxos críticos
- Validei tecnicamente componentes antes da implementação com o time de Engenharia
Processo
Design Orientado por Dados
Adotei uma abordagem orientada por dados e benchmarking, analisando produtos de referência como iFood, aplicativos bancários e Zé Delivery para extrair insights de UX aplicáveis ao contexto hospitalar. Cada decisão de design foi validada com mapas de calor e análise de comportamento real dos usuários.
Pesquisa
Heatmaps e Comportamento Real
Utilizei mapas de calor e análises de comportamento para fundamentar decisões de design com dados reais. Identifiquei padrões de uso, pontos de fricção e oportunidades de melhoria nos fluxos existentes do prontuário eletrônico e do portal.
O benchmarking com produtos como iFood, apps bancários e Zé Delivery revelou padrões de interação que podiam ser adaptados ao contexto hospitalar — como cards colapsáveis para informações médicas, navegação por tabs em prontuários e feedback visual imediato em ações críticas.
A Solução
Design System + Interfaces Evoluídas
Estruturei o Design System completo da plataforma do zero, sobre Tailwind CSS, com mais de 50 componentes reutilizáveis. Projetei mais de 40 interfaces para funcionalidades de média e alta complexidade, evoluindo o prontuário eletrônico e o portal com consistência visual e navegação simplificada.
Evolução das Interfaces
Evoluí as interfaces existentes para maior consistência visual e melhor experiência de uso. Desenvolvi UX Writing para componentes e fluxos críticos, padronizei a linguagem de toda a plataforma e validei contraste e acessibilidade com plugins compatíveis com as diretrizes WCAG.
Identidade Visual
Design System
Paleta de Cores
A paleta foi construída sobre as escalas Teal e Cyan do Tailwind CSS, garantindo consistência perfeita entre design e implementação. Contrastes validados para atingir ratio mínimo de 4.5:1 (WCAG AA) — crítico para pacientes oftalmológicos com deficiências visuais.
Tipografia & Componentes
A escolha tipográfica priorizou legibilidade máxima. O Design System define tamanhos mínimos de 16px para corpo de texto e 14px para labels, com componentes documentados e reutilizáveis que aceleraram o desenvolvimento de novas funcionalidades.
Resultados
Entrega Mensurável
A atuação na Vision One resultou em uma evolução significativa da maturidade de design do produto. O Design System eliminiu inconsistências visuais, acelerou o desenvolvimento e estabeleceu uma base escalável para futuras funcionalidades.