Dashboard H2N
Desenvolvemos o redesign da interface do H2N, um sistema de hotelaria hospitalar, aprimorando a usabilidade e a organização das informações para tornar o fluxo de trabalho de enfermeiros e técnicos mais eficiente.
Contexto
O H2N é um sistema de hotelaria hospitalar utilizado por enfermeiros e técnicos. O projeto consistiu em um redesign da interface para melhorar a usabilidade e a leitura das informações.
Desenvolvido para a 4Inovati, atuei como Product Designer pela agência Oliver, conduzindo a análise da interface existente e o redesign do sistema, com foco na organização das informações e na melhoria da experiência de uso.
Usuários do Sistema
Objetivos:
- Acompanhar solicitações de hotelaria hospitalar
- Visualizar o status dos atendimentos
- Registrar e acompanhar pedidos
Desafios:
- Pouco tempo disponível para navegar no sistema
- Necessidade de localizar informações rapidamente
- Interface antiga dificultava a leitura dos dados
Problemas Identificados
Durante a análise da interface existente, foi possível identificar alguns pontos que impactavam a usabilidade e a leitura das informações dentro do sistema.
Interface visualmente desatualizada
Baixa hierarquia visual entre elementos da interface
Organização das informações pouco consistente
Dificuldade em identificar rapidamente dados importantes
Estrutura do Sistema
A análise das telas revelou inconsistências na hierarquia visual e na organização das informações, dificultando a leitura e interpretação dos dados.
Fluxo do Sistema
Service blue print
Inicialmente foi considerado o uso de um mapa de jornada do usuário. No entanto, devido à natureza do sistema, que envolve interação entre usuários, automação por IA e processos internos do hospital, foi adotado um Service Blueprint para visualizar de forma mais clara todas as etapas do serviço e os atores envolvidos.
Wireframe
Os wireframes foram criados para definir a estrutura de informações e a lógica do layout antes do design visual. O foco foi organizar conteúdo e espaçamentos, garantindo clareza em um ambiente de uso dinâmico.
Home - Sem menus
O wireframe inicial explorou uma versão simplificada da interface, utilizando formas básicas para definir proporções, espaçamentos e distribuição dos elementos.
As informações detalhadas dos cards foram omitidas intencionalmente para focar apenas na estrutura e nos espaçamentos do layout.
Home - Com menus
Para permitir navegação sem comprometer a organização da interface, foi desenvolvida uma variação com menu lateral, adaptando o grid de 15 para 16 colunas.
Como o sistema será exibido em uma TV, foi adicionado um botão com seta para exibir ou ocultar o menu e os inputs, reduzindo ruído visual e mantendo o foco nos cards de atendimento.
Cards
Os cards organizam a visualização dos pedidos, reunindo informações operacionais em um único ponto. Sua construção foi orientada pela necessidade de leitura rápida e pela priorização dos dados mais relevantes no contexto de uso.
Versão Antiga
A interface original apresentava baixa hierarquia visual e excesso de informações, dificultando a leitura rápida dos pedidos.
Primeiro Rascunho
A primeira versão buscou melhorar a leitura com a inclusão de elementos como barra de progresso e cronômetro, facilitando o acompanhamento do tempo de atendimento.
No entanto, alguns pontos se mostraram inviáveis, como a exibição de dados sensíveis do paciente e informações geradas pela IA, que não poderiam ser exibidas por questões de privacidade.
Rascunho Final
A versão final reorganiza as informações com base na prioridade de leitura.
Identificação e status ficam no topo, seguidos pelo tempo de atendimento, representado pelo cronômetro e pela barra de progresso, permitindo o acompanhamento do SLA.
Em seguida, são exibidas a hora do pedido e o tempo limite, essenciais para entender o início e o prazo do atendimento.
Na base, uma faixa mais escura funciona como botão para exibir os detalhes do pedido em um modal, reduzindo a carga visual sem perder acesso às informações completas.
Modal com informações do pedido
Este modal centraliza a visualização detalhada do pedido. À esquerda, são exibidas as informações do card e o histórico de pedidos do mesmo quarto. À direita, ficam os detalhes, com o resumo da IA como padrão, por ser a informação mais consultada.
A transcrição completa e a gravação permanecem acessíveis por abas, embora sejam menos utilizadas no fluxo de atendimento.
Home completa com cards inseridos
Neste wireframe, os cards foram agrupados para avaliar a leitura das informações e validar proporções em escala. A variação de status foi explorada posteriormente no protótipo em alta fidelidade.
Páginas de dados
A tela de dados reúne informações detalhadas dos pedidos, permitindo aplicar filtros e acompanhar indicadores por meio de gráficos, facilitando a análise do volume e do status dos atendimentos.
Ao acionar o botão no canto superior direito, é exibido um menu lateral com cards em tempo real, permitindo visualizar novas solicitações sem sair da tela.
A segunda imagem ilustra como esse menu se apresenta na interface.
Páginas de Estatísticas
Esta tela apresenta uma visão geral das estatísticas de atendimento, com foco no tempo, status dos pedidos e produtividade dos agentes.
Assim como na tela anterior, um menu lateral pode ser exibido com pedidos em tempo real, permitindo o acompanhamento sem sair da página. A segunda imagem ilustra como esse comportamento se apresenta na interface.
Teste de usabilidade
Para validar as principais decisões de design, realizei testes de usabilidade com 5 participantes de diferentes perfis, incluindo profissionais da área hospitalar, tecnologia e jurídica.
O objetivo foi avaliar a compreensão das telas, a facilidade de navegação e a interpretação das informações mais importantes para a gestão dos atendimentos.
Resumo do teste
Principais Insights
O que funcionou bem
- Estrutura dos cards
- Navegação intuitiva
- Modal de detalhes
- Compreensão dos gráficos
Oportunidades identificadas
- Interpretação das cores
- Diferença entre alerta e urgente
- Organização entre Dados e Estatísticas
- Controles de auditoria e segurança
Evolução após validação com usuários
Os testes revelaram dificuldades na interpretação dos status e na associação das cores à criticidade dos atendimentos. A partir dos feedbacks coletados, a comunicação visual dos cards foi reformulada para tornar a leitura mais rápida e intuitiva.
Antes
- Dificuldade na interpretação das cores
- Associação das cores ao tipo de serviço
- Baixa distinção entre alguns níveis de criticidade
Depois
- Escala de cores baseada em criticidade
- Melhor diferenciação entre os estados do atendimento
- Comunicação visual alinhada ao padrão mental dos usuários
Telas utilizadas nos testes
O redesign foi desenvolvido com foco na modernização da experiência sem comprometer os fluxos já conhecidos pelos usuários atuais.
As telas abaixo representam a versão utilizada nos testes de usabilidade e que já se encontrava em operação durante o período de validação.
Página Home
Página de Dados
Página de Estatisticas
Solução final
Para validar as principais decisões de design, realizei testes de usabilidade com 5 participantes de diferentes perfis, incluindo profissionais da área hospitalar, tecnologia e jurídica.
O objetivo foi avaliar a compreensão das telas, a facilidade de navegação e a interpretação das informações mais importantes para a gestão dos atendimentos.
Página Home
Página de Dados
Página de Estatisticas
Explore o protótipo
Navegue livremente pelo protótipo para conhecer os principais fluxos e interações do sistema.