UX, UI e desenvolvimento para um site hospitalar.
UX e UI Design integrados ao desenvolvimento do site institucional, organizando consultas, exames, especialidades, infraestrutura e acessos ao atendimento.
/ CASE · UX, UI DESIGN E DESENVOLVIMENTO
HSVP.
Design para orientar.
Interface para conectar.
/ O PROJETO
Conhecer o hospital. Encontrar o serviço.
O Hospital São Vicente de Paulo, HSVP, reúne serviços, estrutura e informação institucional em seu site. A WDA Agência Digital integrou UX, UI Design e Desenvolvimento para organizar esse conteúdo e aproximar a consulta às informações dos caminhos de atendimento.
- Cliente
- Hospital São Vicente de Paulo (HSVP)
- Projeto
- UX, UI Design e Desenvolvimento
- Contexto
- Presença digital hospitalar
/ 01 · PROBLEMA
Um hospital.
Diferentes percursos.
Agendar uma consulta, acessar resultados de exames e conhecer a estrutura do hospital são necessidades diferentes. O desafio de UX era dar a cada uma dessas intenções uma entrada identificável.
Informações institucionais, serviços e notícias precisavam compartilhar a mesma navegação. A interface deveria distinguir essas funções e conduzir a consulta ao conteúdo correspondente.
O primeiro acesso já indica um caminho.
Agendamento, resultados, especialidades, convênios e pronto atendimento aparecem como entradas distintas. Os rótulos descrevem a ação ou o serviço; os ícones ajudam a reconhecer cada grupo.
/ 02 · INTERVENÇÃO DA WDA
Da navegação
ao detalhe.
A WDA Agência Digital integrou UX, UI Design e Desenvolvimento para organizar páginas, acessos e hierarquia visual. Azul, fundos claros, cards e fotografias compõem uma linguagem comum entre os conteúdos.
Na home, o percurso passa pelas chamadas de serviços, especialidades e apresentação institucional. No celular, o conteúdo se reorganiza em uma coluna e os controles de navegação se concentram no cabeçalho.
A home em continuidade.
Chamadas, serviços e conteúdo institucional em uma sequência de seções.
Ampliar interface
A mesma experiência no celular.
Cards, imagens e textos adaptam a composição à largura da tela.
Ampliar interface
Funções com pesos diferentes.
As categorias organizam o conteúdo. A central de marcação recebe um botão próprio, e a busca ocupa uma posição separada no cabeçalho.
Ampliar detalhe
Do campo de busca à lista.
A busca antecede as especialidades. Títulos distinguem os grupos e os nomes dos profissionais ficam em um nível de informação complementar.
Ampliar detalhe/ 03 · RESULTADO
Uma experiência.
Várias páginas.
A entrega conecta a apresentação do hospital às páginas de serviços. Consultas e exames compartilham linguagem visual, mas organizam conteúdos específicos para cada necessidade.
Informação
ao alcance.
Os acessos à central de marcação e ao portal de resultados ligam a informação aos canais de atendimento. O resultado apresentado é a experiência digital entregue, com páginas, hierarquia e percursos identificáveis.
Informação organizada. Caminhos de contato claros.
Luciano BarradasSócio-Diretor | Estratégia, Novos Negócios e Tecnologia
Vamos conectar a apresentação da sua instituição aos serviços que as pessoas procuram.