OLÁ DOUTOR · PARA MÉDICOS

Duas formas de atender. Uma escolha mais clara para o médico

O redesign do site do Olá Doutor para médicos reorganizou a apresentação de duas formas de atendimento: Imediato e Clínica Digital. O objetivo foi facilitar a compreensão de cada proposta e ajudar os profissionais a identificar aquela que melhor se encaixa em sua rotina.

2026

UI/UX · Product Design

SETOR

Healthcare

PROJETO

Website institucional · Mobile first

FERRAMENTAS

Figma · WordPress · Elementor

Mockup do novo site do Olá Doutor para médicos
Mockup do novo site do Olá Doutor para médicos
Mockup do novo site do Olá Doutor para médicos

// CONTEXTO

O produto evoluiu. A comunicação precisava acompanhar

Inicialmente, o site apresentava o atendimento online por chat. Com a chegada da Clínica Digital, o aplicativo passou a oferecer duas possibilidades: o Atendimento Imediato, realizado sob demanda, e a Clínica Digital, com agenda própria.


Essa mudança trouxe a necessidade de reorganizar a comunicação, apresentando as características de cada serviço e mostrando como eles se encaixam em diferentes rotinas profissionais.

// O DESAFIO

Duas propostas. Diferentes necessidades

Com duas formas de atuação disponíveis no mesmo aplicativo, o desafio era apresentar suas particularidades sem tornar a navegação confusa ou sobrecarregar o visitante com informações.


O site precisava explicar o funcionamento de cada opção, destacar seus benefícios e conduzir o profissional até o cadastro no aplicativo.

01

CLAREZA NA COMUNICAÇÃO

Explicar cada modelo de atendimento de forma simples e objetiva.

02

DIFERENCIAÇÃO

Evidenciar as diferenças entre atendimento sob demanda e agenda própria.

03

AUTONOMIA NA ESCOLHA

Ajudar o médico a identificar o modelo mais alinhado à sua rotina.

04

CONTINUIDADE NA JORNADA

Conectar a decisão no site ao início do cadastro no aplicativo.

// MINHA ABORDAGEM

Da pesquisa à implementação

O projeto partiu das personas e dos materiais de pesquisa interna desenvolvidos pelas equipes de Marketing e Gestão Médica. Esses insumos orientaram a organização das informações e a definição dos caminhos de navegação.


A partir dessa base, desenvolvi a arquitetura, os wireframes, as interfaces e o design system, além de implementar o site em WordPress com Elementor.

PESQUISA

→

→

ARQUITETURA

→

→

WIREFRAME

→

→

UI DESIGN

→

→

DESIGN SYSTEM

→

→

IMPLEMENTAÇÃO

// O QUE DESCOBRI

Diferentes rotinas, diferentes expectativas

A análise de oito personas médicas revelou motivações distintas para utilizar a plataforma. Enquanto alguns profissionais valorizavam a agilidade e a autonomia do atendimento sob demanda, outros buscavam organizar suas agendas e manter o acompanhamento dos pacientes.

Para traduzir esses comportamentos em decisões de design, três perfis representativos foram destacados.

DR. FELIPE

Rapidez e autonomia
Imagem de referência das personas da pesquisa interna

Necessidade: atender com agilidade, sem depender de horários fixos.

Insight: autonomia e simplicidade são essenciais para quem trabalha sob demanda.

DRA. MARIANA

Organização e praticidade
Imagem de referência das personas da pesquisa interna

Necessidade: organizar retornos e atendimentos sem criar uma rotina complexa.

Insight: uma agenda digital simples permite estruturar o acompanhamento sem perder flexibilidade.

DRA. CAMILA

Vínculo e continuidade
Imagem de referência das personas da pesquisa interna

Necessidade: acompanhar a evolução das pacientes e manter contato entre consultas.

Insight: o cuidado contínuo exige recursos que facilitem retornos e acompanhamento.

As diferentes necessidades dos médicos orientaram a forma de apresentar cada modalidade, destacando o que muda na rotina profissional e facilitando a identificação do modelo mais adequado.

// DECISÕES DE UX

Decisões pensadas para facilitar a escolha

01

COMPARAÇÃO ENTRE MODELOS

COMPARAÇÃO ENTRE MODELOS

A Home apresenta as duas modalidades lado a lado, destacando diferenças e ajudando o médico a identificar a opção mais adequada.

02

HIERARQUIA DA INFORMAÇÃO

HIERARQUIA DA INFORMAÇÃO

Proposta, formato de atendimento e benefícios aparecem em uma sequência que facilita a compreensão de cada modelo.

03

INFORMAÇÃO ANTES DA CONVERSÃO

Informações e perguntas frequentes ajudam a esclarecer dúvidas antes do direcionamento para o aplicativo.

04

ESTRUTURA MODULAR

ESTRUTURA MODULAR

Páginas com uma organização compartilhada facilitam a comparação entre modelos e permitem expandir o site com consistência.

// DA ESTRUTURA À INTERFACE

Uma estrutura para diferentes jornadas

A Home funciona como ponto de entrada, apresentando as duas possibilidades de atuação e direcionando o visitante para páginas específicas de Atendimento Imediato e Clínica Digital.


Cada página aprofunda sua respectiva proposta, explica o funcionamento do serviço e reúne as informações necessárias para apoiar a decisão do profissional.

A Home funciona como ponto de entrada, apresentando as duas possibilidades de atuação e direcionando o visitante para páginas específicas de Atendimento Imediato e Clínica Digital.


Cada página aprofunda sua respectiva proposta, explica o funcionamento do serviço e reúne as informações necessárias para apoiar a decisão do profissional.

Sitemap

Sitemap do site do Olá Doutor para médicos
Sitemap do site do Olá Doutor para médicos
Sitemap do site do Olá Doutor para médicos

Fluxo principal

Sitemap do site do Olá Doutor para médicos
Sitemap do site do Olá Doutor para médicos

WIREFRAMES

Mobile

Wireframes do site do Olá Doutor para médicos
Wireframes do site do Olá Doutor para médicos

Desktop

Wireframes do site do Olá Doutor para médicos
Wireframes do site do Olá Doutor para médicos

Modalidades apresentadas antes da escolha.

A página destaca as diferenças entre Atendimento Imediato e Clínica Digital, direcionando o médico para conhecer cada proposta.

Uma primeira dobra que apresenta a proposta.

A Home apresenta o Olá Doutor para médicos e introduz as duas modalidades de atendimento logo no início.

Como esta página orienta a jornada

Página do site para médicos
Página do site para médicos no celular

Role para explorar

Home

Atendimento imediato

Clínica digital

// A SOLUÇÃO

Você escolhe como quer atender.

Modalidades apresentadas antes da escolha

A página destaca as diferenças entre Atendimento Imediato e Clínica Digital, direcionando o médico para conhecer cada proposta.

Uma primeira dobra que apresenta a proposta.

A Home apresenta o Olá Doutor para médicos e introduz as duas modalidades de atendimento logo no início.

Como esta página orienta a jornada

Página do site para médicos
Página do site para médicos no celular

Role para explorar

Home

Atendimento imediato

Clínica digital

// A SOLUÇÃO

Você escolhe como quer atender

Modalidades apresentadas antes da escolha.

A página destaca as diferenças entre Atendimento Imediato e Clínica Digital, direcionando o médico para conhecer cada proposta.

Uma primeira dobra que apresenta a proposta.

A Home apresenta o Olá Doutor para médicos e introduz as duas modalidades de atendimento logo no início.

Como esta página orienta a jornada

Página do site para médicos no celular

Role para explorar

Home

Atendimento imediato

Clínica digital

// A SOLUÇÃO

Você escolhe como quer atender.

// DESIGN SYSTEM

Uma linguagem visual para as duas jornadas

Cores, tipografia, botões, cards e elementos de navegação foram organizados em componentes reutilizáveis. Essa base permitiu manter a consistência entre as páginas e estabelecer padrões para futuras atualizações do site.

Tipografia

A combinação de Noto Serif e Noto Sans estabelece uma hierarquia entre títulos, textos e informações auxiliares, equilibrando personalidade visual e legibilidade.

→

Paleta de cores

→

Iconografia

→

Componentes

→

// DESIGN SYSTEM

Uma linguagem visual para as duas jornadas

Cores, tipografia, botões, cards e elementos de navegação foram organizados em componentes reutilizáveis. Essa base permitiu manter a consistência entre as páginas e estabelecer padrões para futuras atualizações do site.

Tipografia

A combinação de Noto Serif e Noto Sans estabelece uma hierarquia entre títulos, textos e informações auxiliares, equilibrando personalidade visual e legibilidade.

→

Paleta de cores

→

Iconografia

→

Componentes

→

// DESIGN SYSTEM

Uma linguagem visual para as duas jornadas

Cores, tipografia, botões, cards e elementos de navegação foram organizados em componentes reutilizáveis. Essa base permitiu manter a consistência entre as páginas e estabelecer padrões para futuras atualizações do site.

Tipografia

A combinação de Noto Serif e Noto Sans estabelece uma hierarquia entre títulos, textos e informações auxiliares, equilibrando personalidade visual e legibilidade.

Paleta de cores

→

Iconografia

→

Componentes

→

// IMPLEMENTAÇÃO

Do Figma ao WordPress

Além de projetar a experiência, também implementei o website em WordPress com Elementor. Desenvolvi as páginas, configurei os comportamentos responsivos e conduzi os ajustes técnicos necessários para publicar a solução.

FIGMA

→

→

INTERFACES RESPONSIVAS

→

→

WORDPRESS

→

→

ELEMENTOR

// RESULTADOS

Uma apresentação mais organizada para dois serviços

O redesign reorganizou a comunicação do Olá Doutor para médicos, estabelecendo caminhos específicos para cada serviço e uma estrutura que facilita a compreensão das diferentes propostas.

01

01

01

Compreensão

Facilitar o entendimento das diferenças entre Atendimento Imediato e Clínica Digital.

02

02

02

Navegação

Tornar mais claro o caminho entre a apresentação do produto e as páginas de cada modalidade.

03

03

03

Conversão

Orientar o médico até o download do aplicativo e o início do cadastro.

04

04

04

Consistência

Manter uma experiência visual e estrutural coerente entre as páginas e dispositivos.

Resultados esperados com base nos objetivos do projeto. Indicadores quantitativos devem ser incluídos somente após validação dos dados, da fonte e do período de comparação.

// APRENDIZADOS

Diferentes necessidades exigem jornadas bem definidas

01

Comunicação antes da complexidade

Quando um produto oferece diferentes modalidades, a comunicação precisa evidenciar o que muda entre elas. Organizar as informações é tão importante quanto apresentar funcionalidades.

02

Cada profissional tem uma motivação

Médicos com rotinas e objetivos diferentes precisam encontrar uma proposta que faça sentido para sua realidade. Entender esses perfis ajudou a construir caminhos específicos para cada modalidade.

03

Consistência prepara o produto para evoluir

Um Design System compartilhado e uma estrutura modular permitem apresentar experiências diferentes sem perder a unidade visual, facilitando a evolução do produto.

Patrick Bernardi

UI/UX Designer

© 2026 Patrick Bernardi

Patrick Bernardi

UI/UX Designer

© 2026 Patrick Bernardi

Patrick Bernardi

UI/UX Designer

© 2026 Patrick Bernardi