Atualização visual
CS Imagem Pro®
O projeto de atualização visual do CS Imagem Pro® foi iniciado para atender às demandas de clientes que relataram insatisfação com o design e a usabilidade do sistema. As principais solicitações estavam relacionadas a melhorias que proporcionassem uma experiência mais confortável, intuitiva e visualmente agradável.
Dessa forma, fui chamado para redesenhar elementos-chave do sistema, com foco em quatro áreas principais: o menu principal, a tela da central de laudos, o editor de laudos e a planilha financeira. Para a planilha financeira e menu principal, desenvolvi também uma versão adaptada para dispositivos móveis, garantindo praticidade em diferentes plataformas.
Menu principal
O projeto foi iniciado após o feedback de clientes que relataram dificuldades na navegação pelo sistema. Eles mencionaram que não era intuitivo ou rápido encontrar as telas que precisavam acessar, e que, em alguns casos, acabavam presos em um "loop" de navegação. Por exemplo, ao tentar acessar uma tela pelo menu principal, o sistema os redirecionava para outro menu de seleção, aumentando a complexidade e o tempo necessário para completar tarefas simples. Segue exemplo abaixo no menu "Cadastros":
Com base nesse contexto, realizei uma pesquisa detalhada sobre menus de navegação, focando em sistemas com muitas opções. Durante o processo, desenvolvi duas alternativas: uma que mantém a consistência com o padrão já estabelecido no sistema, e outra que explora uma abordagem inovadora. As propostas incluem um modelo com cards centrais, que organiza as opções de forma clara e acessível, e um dashboard informativo, que reúne dados essenciais em uma única interface. Ambas as soluções foram criadas com o objetivo de simplificar a navegação, garantindo que as informações principais fossem carregadas por completo na primeira tela.
Com base nesse contexto, realizei uma pesquisa detalhada sobre menus de navegação, focando em sistemas com muitas opções. Durante o processo, desenvolvi duas alternativas: uma que mantém a consistência com o padrão já estabelecido no sistema, e outra que explora uma abordagem inovadora. As propostas incluem um modelo com cards centrais, que organiza as opções de forma clara e acessível, e um dashboard informativo, que reúne dados essenciais em uma única interface. Ambas as soluções foram criadas com o objetivo de simplificar a navegação, garantindo que as informações principais fossem carregadas por completo na primeira tela.
A primeira variação foi projetada para preservar a identidade visual existente do sistema. Nessa proposta, os cards centrais desempenham um papel principal, expandindo-se e sobrepondo o card abaixo, com ícones que representam as telas disponíveis para acesso. Acima dos cards, há uma área de acesso rápido, destacando as telas mais utilizadas e frequentes. Além disso, o design inclui um menu lateral fixo, que apresenta ícones representativos das telas. Esse menu pode ser expandido para exibir os nomes completos das opções, proporcionando uma navegação intuitiva e eficiente.
Após uma apresentação com o stakeholder, ficou decidido que a variação a ser seguida seria a terceira, com a incorporação de algumas implementações da segunda variação. Durante os testes de cores, percebi que a cor secundária dificultava a legibilidade dos textos sobre ela. Para garantir a acessibilidade, realizei um teste WCAG e a cor não passou em nenhum critério de contraste, tornando-a inadequada para o uso.Com isso, implementei duas cores mais escuras, mantendo a identidade visual do sistema. A cor principal foi ajustada para um azul mais escuro, e a cor secundária foi alterada para um tom mais escuro, mas ainda dentro da mesma paleta de cores, preservando a harmonia visual do sistema.
Além disso, reanalisei os menus laterais e adaptei a estrutura da segunda variação. Agora, ao clicar em um item do menu, ele se expande para exibir os itens em forma de lista, mas sem as imagens ao lado. Foi criada também uma nova funcionalidade de favoritos dentro do menu lateral, permitindo que o usuário adicione telas às suas preferidas, que aparecerão no menu principal para acesso rápido.Desenvolvi a tela de favoritos junto com um protótipo para dispositivos móveis, assegurando que a funcionalidade fosse compatível com diferentes plataformas.
Editor de laudo
Editor de laudo antes
A mudança no editor de laudo surgiu a partir de um feedback de um cliente que relatou dificuldades durante o processo de edição. Ele mencionou que a experiência de digitação parecia um bloco de notas e que gostaria de visualizar a página como um todo, em vez de só ver o resultado final na impressão do laudo.
Com essas informações em mente, realizei uma pesquisa comparativa com outros sistemas da CSoftware para entender como a edição era realizada e identifiquei que a solução que o cliente desejava se assemelhava bastante ao que já era utilizado em outros sistemas. Com base nisso, iniciei a prototipação.
Editor de laudo agora
No novo design do editor de laudo, organizei a interface de forma a facilitar a navegação e a interação do usuário. O lado direito da tela foi dedicado exclusivamente aos itens específicos do laudo. Na parte superior direita, coloquei os botões secundários, que são essenciais para o doutor, pois permitem a digitação do laudo ou a continuidade do atendimento, caso haja alguma necessidade especial.
A parte inferior direita foi destacada com botões de assinatura e digitação, utilizando cores específicas para facilitar a identificação de quais botões o médico deveria clicar durante o fluxo de trabalho. Esse destaque visual é essencial para guiar o usuário de maneira intuitiva e rápida. Na região central do lado direito, incluí campos para complementação do laudo, proporcionando mais flexibilidade na edição, e também reservei uma área para áudios, permitindo a gravação ou a reprodução de laudos previamente gravados.
Por outro lado, no lado esquerdo, coloquei as informações básicas do paciente, proporcionando uma visão clara e acessível dos dados necessários durante a elaboração do laudo. Essa organização facilita a navegação e torna a edição mais prática e acessível.
Veja mais projetos
