Clínica de estética — portal e loja de dermocosméticos
Duas navegações separadas por propósito: uma da clínica, outra da loja.
Um portal clínico combinado com loja para uma clínica de estética multidisciplinar: apresentação dos tratamentos, loja de dermocosméticos, carrinho e checkout. Desenhei 25 nós responsivos entre desktop e mobile, incluindo duas barras de navegação separadas por propósito — uma do portal da clínica, outra da loja — mais os componentes de card de produto e as telas de produtos, compra, carrinho, pagamento e checkout mobile. É apenas crédito de design: nenhuma URL de produção foi recuperada, então nada aqui afirma que isso foi ao ar.
- Função
- Sole website UI designer
- Período
- jan. de 2024 – fev. de 2024
- Stack
- Figma
- Evidência
- Arquivo de design
Designer de UI exclusivo do website de uma clínica multidisciplinar de saúde, estética facial, emagrecimento e SPA detox. Desenvolveu 25 nós responsivos entre desktop e mobile no Figma, estruturando duas navegações separadas por propósito (portal da clínica vs loja de dermocosméticos), catálogo de tratamentos, vitrine de produtos (Produtos), carrinho de compras (Carrinho) e checkout mobile (Pagamento, Checkout - Mobile).
Atuação na agência Sagitta entre 9 de janeiro e 9 de fevereiro de 2024. Atuou como designer exclusivo da interface do site em uma entrega colaborativa: Kelvin Bezerra assinou a identidade visual e o logotipo; Juan desenhou todas as interfaces do site e e-commerce; um desenvolvedor no-code implementou e publicou a solução em WordPress / WooCommerce.
Clínica digital híbrida: serviços de saúde e e-commerce dermocosmético
- 25
- nós responsivos no canvas cobrindo desktop e mobile
- 2
- navegações dedicadas (Portal da Clínica vs Loja)
- 5
- etapas no funil completo de compras do e-commerce
- Woo
- implementação em WordPress / WooCommerce
Clínicas de estética avançada e bem-estar enfrentam uma tensão de arquitetura de informação: precisam transmitir autoridade médica e rigor técnico para procedimentos clínicos (estética facial, peelings, protocolos detox de SPA) ao mesmo tempo em que operam uma loja virtual de produtos dermocosméticos indicados para cuidados pós-tratamento.
Navegação dual: separando consulta de atendimento e comércio
Para evitar que elementos puramente comerciais enfraquecessem a percepção médica da clínica, desenhei duas barras de navegação independentes: uma barra principal institucional (NavBar) focada no agendamento de consultas e detalhes dos tratamentos, e uma barra secundária para a loja (Menu Item NavBar Black Loja), que assume o controle visual quando o usuário navega pelo catálogo de dermocosméticos. Essa separação garantiu clareza de contexto e agilidade de compra.
O funil de compras: da vitrine ao checkout no celular
A área comercial foi estruturada como uma jornada transacional completa em desktop e mobile:
- Catálogo Dermocosmético (Produtos) — Vitrine com filtros por tipo de pele, indicações clínicas e composição de ativos dermatológicos.
- Página de Detalhes do Produto (Compra) — Layout focado em conversão destacando modo de uso, benefícios clínicos e recomendações profissionais.
- Carrinho de Compras (Carrinho) — Resumo de pedido com cálculo de frete transparente e sugestão de produtos complementares.
- Pagamento e Checkout Mobile (Pagamento / Checkout - Mobile) — Fluxo de pagamento com formulários otimizados para preenchimento rápido em celulares.
Colaboração multidisciplinar em agência
A Clínica Castelo é um exemplo prático de divisão técnica de trabalho em agência: Kelvin Bezerra estabeleceu a identidade de marca e tipografia; assumi a tradução desses conceitos em telas interativas responsivas no Figma; e o desenvolvedor no-code codificou os layouts em WordPress e WooCommerce. A padronização rigorosa dos componentes de card e botões assegurou fidelidade absoluta entre o protótipo e o código publicado.
Evidência
Entregue para desenvolvimento e lançado em produção. A clínica encerrou suas atividades comerciais posteriormente e o domínio clinicacastelo.clinic foi desativado. Não restam métricas comerciais públicas; o projeto permanece como comprovação de arquitetura digital com navegação dual unindo clínica e e-commerce.