ABEM: Uma jornada de acolhimento digital para pacientes com Esclerose Múltipla
Redesign estratégico do site da ABEM, focado em humanizar a experiência de pacientes recém-diagnosticados com EM. Combinamos acessibilidade, conteúdo acolhedor e navegação intuitiva para transformar a plataforma em um porto seguro de informação e apoio emocional.
Contexto do Projeto
Problema Central
Como humanizar a experiência digital de pacientes recém-diagnosticados com Esclerose Múltipla (EM) no site da ABEM, garantindo acesso rápido a informações críticas e reduzindo a sobrecarga emocional pós-diagnóstico?
Origem
Em outubro de 2021, Letícia S. Emídio (portadora de EM e líder do projeto) mobilizou uma equipe multidisciplinar de UX/UI após identificar falchas críticas no site da ABEM. O desafio era transformar uma plataforma confusa e inacessível em um canal de acolhimento e informação estratégica.
Equipe
Letícia S. Emídio (Liderança, UX Research, UI Design)
Isabela Tamos de Almeida (UX Writing, Arquitetura da Informação)
Diéville Leandro (Design de Interação, Prototipação)
Sobre a ABEM
Associação Brasileira de Esclerose Múltipla, é uma entidade beneficente, sem fins econômicos, fundada em 1984. É reconhecida pela Multiple Sclerosis International Federation - MSIF, sediada em Londres, que coordena as atividades pela E.M no mundo todo.
A ABEM trabalha o ser humano de forma holística, integrando corpo e mente para uma melhor qualidade de vida. Utiliza técnicas de massoterapia, aromaterapia, cromoterapia e reflexologia além de utilizar programas de reabilitação multidisciplinar (fisioterapia, neurovisão, psicologia, neuropsicologia, fonoaudiologia, terapia ocupacional).
Tem o compromisso de oferecer atualizações de pesquisas sobre Esclerose Múltipla, produzindo conteúdo técnico científico, materiais de suporte e orientação às pessoas com EM, seus familiares e toda a sociedade.
Hoje as principais forma de acesso aos recurso oferecidos pela ABEM são:
Presencial - Atendimento de segunda a sexta de 8 às 17h na Av. Indianópolis, São Paulo - SP:
Site - Contempla todas os outras forma de acesso abaixo, assim com informações sobre diagnósticos, tratamentos, terapias, notícias, pesquisas, formas de doação e etc;
WhatsApp / Telefone - Forma mais próxima de tirar dúvidas, conhecer mais sobre a doença e como a ABEM pode ajudar;
Email - Meio mais formal, mas pode ser utilizado para entrar em contato com a instituição.
Esclerose Múltipla (EM)
A EM é uma doença autoimune que afeta o sistema nervoso central (cérebro e medula), de causa ainda desconhecida e é caracterizada por "esclerose" - uma palavra grega que significa "cicatrizes". Essas cicatrizes ocorrem dentro do sistema nervoso central e, dependendo de onde elas se desenvolvem, manifestam-se em vários sintomas.
Dependendo da área das lesões, a EM pode causar formigamentos, fadiga, dores, paralisias, problemas cognitivos, de memória, de fala, fisiológicos e os temidos problemas motores (necessidade de usar bengala ou cadeira de rodas). Também pode ocorrer prejuízo na visão (visão borrada, dupla ou cegueira) parcial ou total, de modo temporário ou permanente.
São 2,8 milhões de casos no mundo, e cerca de 40 mil diagnósticos no Brasil. Com uma faixa de 85% dos casos atuais de EM do tipo Remitente-Recorrente(EMRR), caracterizado por períodos de surto (inflamação aguda com piora repentina ou surgimentos de novos sintomas) e Remissão (períodos de recuperação dos sintomas do último surto).
Embora ainda haja pouca conscientização da comunidade médica sobre a EM, melhoras no entendimento dos sintomas e a tecnologia dos exames têm permitido obter diagnósticos cada vez mais rápido, o que tem levado a termos, também, pacientes cada vez mais jovens.
Estima-se que existam 28 milhões de pessoas afetadas pelo EM dos quais corre 40 mil vivem no Brasil atualmente - numa incidência de 19 para cada 100.000 habitantes. Fonte: Atlas da Esclerose Múltipla - 3o edição - MS International Federation Set/2020
Diagnóstico Estratégico
Mapeamos os principais pontos de acesso do paciente de EM com a ABEM e percebemos uma grande dificuldade na navegação pelo site, que é o principal meio de contato com a instituição.
Uma breve análise do website, usando a extensão Lighthouse, apontou problemas estruturais (20/100 na performance e 71/100 na acessibilidade).
O site atual apresenta uma gama de fatores negativos:
Lentidão de carregamento — a página inicial demorava mais de TRINTA segundos para se tornar interativa, quando as boas práticas de SEO e UX pregam que esses valores devem ficar sempre que possível abaixo de três segundos (e quanto menos, melhor);
Baixa responsividade para Mobile - Uma breve survey entre portadores de EM (em um grupo no Facebook) confirmou a tendência atual de consumir conteúdos primariamente no celular;
Falta de Acessibilidade — há falta de texto alternativo para leitores de tela, problemas nos blocos de elementos, além de um baixo contraste de cores que não passa nos critérios da WCAG. Assim, uma mudança da paleta de cores usada na comunicação da ONG também era necessária.
Relatório da Página inicial do site abem.org.br a partir da ferramenta Lighthouse. Em um fundo branco, à esquerda vemos o relatório com os gráficos gerais e detalhamento da parte de performance (20 de 100), e à direita vemos o detalhamento, a parte de acessibilidade e os problemas apontados (71 de 100).
Testes de usabilidade
Além da análise estrutural, fizemos alguns testes de navegação e surveys para validar nossas hipóteses, tanto na parte de arquitetura da informação, quanto na parte de UX Writing. Os principais aprendizados nessa primeira etapa de testes foram:
Alguns dos termos usados nas categorias do menu principal eram desconhecidos pelo público (Advocacy foi substituído por Políticas Públicas, por ex.);
Havia inconsistência nos termos usados para uma mesma coisa (carteira e carteirinha da ABEM, por ex.);
Dificuldade de localizar alguns meios de contato no site (botão para o WhatsApp);
Informações desnecessárias ou mal posicionadas.
Print das entrevistas com usuários. Preservamos as identidades dos entrevistados assim como foi acordado no início da gravação.
Análise de competidores
Foram encontradas várias instituições que são concorrentes da ABEM, com a mesma proposta de valor que conseguiam acolher e ajudar pacientes com esclerose múltipla. Filtramos essas instituições ao obter mais informações sobre as mesmas e acabamos chegando em dois concorrentes diretos e um indireto.
Analisamos quesitos importantes para o paciente como a experiência no site, acessibilidade, navegação e descrição, além de outros. Conseguimos obter muitas informações que irão agregar valor a ABEM e são citadas abaixo e podem ser acompanhadas nas imagens:
A maioria dos concorrentes não tem uma boa experiência mobile o que dificulta a navegação para os pacientes;
Todos os sites web precisam de acessibilidade urgente, nenhum atende a requisitos básicos quando se trata da prática inclusiva;
A maneira que o conteúdo é apresentado é diferente em todos os concorrentes e deve ser validado através de pesquisa;
Existe pouca descrição nas categorias, as informações não estão claras.
Análise de competidores com informações gerais
Análise de competidores com informações de UX
Mapa dos Stakeholders envolvidos
No mapeamento realizado, identificamos que além do paciente, temos familiares, amigos e a sociedade em geral com quem o paciente interage. Há uma relutância na aceitação do diagnóstico, em expor para seu círculo social sua condição e conviver com um possível preconceito.
Na esfera profissional, um surto de EM pode causar o afastamento laboral, o que envolve a empresa e o INSS. Caso haja sequelas, o governo entra como o ator que assegura estabilidade, afastamento ou aposentadoria, ou políticas de cotas para PcD.
Na área da saúde, diversos outros atores públicos e privados fazem parte da trajetória dentro de hospitais, clínicas diagnósticas e especialistas em uma abordagem interdisciplinar para essa doença igualmente múltipla.
Mapa de Stakeholders em torno do recém diagnosticado com Esclerose Múltipla (quadro lilás). Há iniciativas públicas e governamentais (quadros amarelos), privadas ou não governamentais (quadros verdes), atores da área da saúde e cuidado ao paciente (quadros azuis) e pessoas físicas que se relacionam direta ou indiretamente com esses pacientes (quadros rosa alaranjado). Traços contínuos indicam interações que ocorrem, e traços pontilhados são interações que podem ou não ocorrer.
Empatizando com o paciente
Houve uma imersão conceitual para se aprofundar na vida do paciente, precisávamos entender as mínimas particularidades da doença e o seu percurso. Ninguém melhor do que a Leticia S Emidio, para compartilhar sua trajetória. Absorvemos, refletimos esse conhecimento e criamos o mapa de empatia que nos ajudou em decisões durante todo o projeto.
Mapa de empatia com cinco quadrantes (0 que pensa, fala e sente?/ O que vé?/ O que ouve?/ O que faz?/ Quais as dores?)
Priorizando os dados
Com o relato direto da Leticia, com a desk research, juntamente com as informações obtidas sobre a ABEM, montamos a matriz CSD e estruturamos um roteiro para as entrevistas com base na análise dos dados coletados provenientes de um mapa de afinidade.
Matriz CSD com questionamentos que levantamos durante e descoberta inicial do projeto
Entrevistando o paciente
Tínhamos os objetivos de entender mais sobre a realidade do paciente com relação à descoberta da doença e principalmente sobre a importância de uma instituição como a ABEM na vida do mesmo.
Conseguimos apenas uma entrevista, que foi muito esclarecedora por comprovar os relatos da Leticia. A pessoa que nos deu essa oportunidade abriu nossas cabeças, nos mostrou outros lados da doença que as complicações de uma vida de dores.
Esses foram os principais insights:
No início da descoberta, o paciente recebe muita desinformação e feedbacks negativos, as pessoas que têm a doença enxergam muito o lado negativo e é essa informação que é repassada em grupos;
O paciente tem muita dificuldade de aceitar a doença;
Nem sempre o paciente recebe o devido apoio da família;
Por causa das limitações da doença o paciente acaba se isolando;
Os amigos podem ser grandes apoiadores do paciente, porém há certo receio de tornar a doença pública por causa de um possível preconceito;
Quando possível, o paciente segue trabalhando ou então entra com um pedido de afastamento pelo INSS;
Funcionários públicos têm um apoio maior com relação à reivindicação de seus direitos (por exemplo acesso a plano de saúde):
Além do tratamento regular, o paciente frequentemente precisa de acompanhamento psicológico complementar.
Jornada até o diagnóstico
A jornada do portador é tortuosa e passa por uma avalanche emocional, sempre tendendo ao negativo. Ela se inicia com os primeiros sintomas, usualmente ignorados pelos próprios pacientes, por sumirem depois de um tempo, ou por médicos não especialistas quando procurados pelos sintomas isolados.
O momento mais marcante da vida de um portador é a ocorrência do primeiro surto (momento de piora súbita ou surgimento de novos sintomas em poucos dias), que frequentemente incorre em internação hospitalar e a chamada pulsoterapia (infusão de corticoides para ajudar na desinflamação cerebral). Esse é o momento onde geralmente ocorre a investigação e o diagnóstico oficial de Esclerose Múltipla.
É uma jornada delicada de auto aceitação do diagnóstico, busca por respostas, prognósticos e especialistas para o tratamento e reabilitação das sequelas. Os pacientes também podem buscar medicamentos de alto custo dentro da farmácia pública especializada, por meio de ação judicial nos planos de saúde, ou podem ainda se voluntariar para estudos clínicos de medicações que estão com pesquisas em andamento.
Mapeamento inicial da jornada da pessoa portadora. Ele mostra os três principais momentos da jornada: o aparecimento dos primeiros sintomas, o processo de diagnóstico e aceitação, e a convivência com a doença.
Foram encontrados muitos insights de oportunidades que poderiam ser trabalhadas. Concluímos que grande parte das dores dos pacientes eram em torno da busca de informações.
Assim, conteúdos estratégicos (blogposts, ebooks, vídeos) poderiam informar e acalmar pessoas que podem estar num momento de fragilidade emocional pelo novo diagnóstico. Muitos conteúdos necessários a um novo portador ainda eram inexistentes no site, o que levava as pessoas a buscarem outras fontes ou permanecerem com dúvidas.
Além disso, pensamos que facilitar a interação entre os portadores, por um sistema de apadrinhamento voluntário e sessões de terapia em grupo, poderia tornar o 'onboarding' do paciente à nova condição algo menos obscuro e mais tranquilo com o devido suporte emocional.
Chegando a decisão
Concluímos que grande parte das dores dos pacientes eram em torno da busca de informações. Assim, conteúdos estratégicos, poderiam informar e acalmar pessoas em um momento de fragilidade emocional. Muitos conteúdos necessários a um novo portador ainda são inexistentes no site, o que leva as pessoas a buscarem outras fontes ou permanecerem com dúvidas.
Houve uma visita física à ABEM e descobriu-se que havia dezenas de materiais instrucionais para orientar os pacientes, porém disponíveis apenas em mídia física na sede da instituição. Então uma das nossas propostas foi disponibilizar esses materiais para download no site como mídia digital.
Traçamos então nosso objetivo, construir um website de melhor navegabilidade e maior usabilidade para uso autônomo pelos usuários do site e tomamos algumas decisões estratégicas que podem ser vistas no road map abaixo.
Roadmap com decisões estratégicas dividido em dois momentos temporais, agora e próximos passos.
Ações de negócio
Mesmo que o foco do projeto seja melhorar a experiência de acolhimento do paciente, temos que favorecer também a parte do negócio. Por isso foram levantadas algumas ações que também poderiam auxiliar na captação de recursos e ampliação das atividades da ONG, a médio / longo prazo. Então sugerimos algumas ações estratégicas articulando os departamentos de marketing e financeiro.
Ações coordenadas com a equipe de marketing:
Criação de campanha de destaque para fazer a carteirinha: Aumentar base de pacientes cadastrados, estimular pertencimento à comunidade, aumentar a penetração da marca, captar recursos (pequeno lucro na confecção de cada carteirinha) e iniciar relacionamento com o paciente no leque de produtos e serviços;
Divulgação de lives e outros eventos online de médicos e outros especialistas que possam trazer conhecimento e tirar dúvidas dos pacientes e familiares:
Mapeamento e posterior criação de páginas de conteúdo/blogposts com termos mais buscados pelos pacientes;
Venda de espaços de propaganda no site (clínicas, neurologistas, especialistas) com foco em branded content, com conteúdos informativos assinados por essas marcas parceiras.
Ações para captação de recursos:
Busca de empresas parceiras para captação de recursos mais robustos, reformas patrocinadas de salas, compras de equipamentos;
Realização de eventos online e/ou presenciais;
Parceria com empresas para criação de vagas de emprego destinadas para pacientes de EM que não conseguem ou não querem se aposentar (carga horária reduzida, tarefas adequadas às limitações, adaptação de rotina);
Continuar e ampliar parceria com o SEBRAE para oferecer qualificação profissional para quem deseja empreender:
Parceria com pacientes para criação/confecção de produtos que podem ser vendidos na loja virtual da instituição:
Ampliação dos itens à venda na loja virtual, focando em itens presenteáveis e de engajamento com a causa da EM (bottons, camisetas e etc).
Site map
O mapa do site mudou bastante com relação ao anterior. Optamos por adicionar na página inicial atalhos para todas as informações de extrema importância. Foram reduzidos os temas principais e a quantidade de páginas em cada um. Os títulos sofreram alterações para simplificar o acesso e reduzir as taxas de erros. O fluxo de informação foi pensando levando em consideração tanto as necessidades da ABEM quanto dos pacientes.
Novo mapa do site mostrando o fluxo entre as páginas com foco da página inicial(Home).
Rabiscoframes
Começamos o processo de ideação da interface usando o método do Crazy8s. Cada integrante da equipe esboçou sua solução, sem limite de quadros criados. Fizemos as apresentações das ideias e discutimos sobre os pontos positivos e negativos de cada rabiscoframe.
A ideia para esse exercício era manter a interface o mais simples possível, apresentar na home blocos com informações essenciais e uma opção de menu expandido.
Robiscoframes criadas pelos integrantes da equipe, que mostram visões diferentes da ideação de uma interface mobile.
Wireframes
Na adaptação da nossa ideia para o formato digital usamos o Figma, foi muito prazeroso poder visualizar nossa solução tomando forma.
Tivemos algumas versões de wireframes que foram modificados e adaptando a cada reunião.
A intenção era testar a disponibilização dos itens na Home (página inicial) com base nas buscas mais frequentemente. Pensamos em uma estrutura semelhante à uma Landing Page, para otimizar a conversão dos visitantes com técnicas de marketing e copywriting.
As principais interações foram feitas para obter resultados sobre informações buscadas como: médicos especialistas, medicações pelo SUS e serviços prestados pela ABEM.
Teste de wireframes
Fizemos o primeiro teste de usabilidade pela ferramenta do Maze, que entrega métricas e análises que ajudam na validação das soluções. com base de análise do comportamento dos usuários.
Neste teste, haviam 6 tarefas a serem cumpridas pelos usuários com uma média de participação geral de 14 pessoas. Os resultados ajudaram a reconhecer alguns problemas como:
O menu hambúrguer estava com a área de toque muito pequena, trazendo dificuldade de acesso
As pessoas buscaram um caminho não pensado inicialmente para achar informações sobre os medicamentos de alto custo:
Houve uma pequena dificuldade em encontrar os serviços oferecidos pela ABEM;
Houve uma média dificuldade para encontrar onde se cadastrar como voluntário:
Tamanho dos textos, botões e espaçamento entre itens estavam pequenos em alguns locais
Havia também itens importantes que só podiam ser acessados pelo menu hambirguer, mas os usudrios buscavam nos atalhos da página inicial.
Uma das 6 tarefas que os usuários fizeram no teste. Tarefa 3: Localize onde você pode fazer uma doação para a ABEM. Vimos que 9 usuários completaram a tarefa do modo esperado, e mais 2 o fizeram no caminho alternativo.
Style Guide
Depois dos primeiros aprendizados e antes de avançar para a próxima rodada de testes. partimos para criação do guia de estilos com foco na acessibilidade.
A tipografia Inter foi escolhida por aumentar a legibilidade dos textos. Ela tem uma altura superior às demais e foi especialmente projetada para telas.
A paleta de cores foi pensada atendendo aos padrões da identidade visual da ABEM, com alterações nos tons padrões para um melhor contraste na navegação. Usamos botões e ícones maiores, pensando na ergonomia com base na Lei de Fitts.
Como nosso objetivo principal era focar na acessibilidade, usamos elementos que ajudariam o usuário.
Mantivemos o verde, parte da identidade visual da ABEM, porém em tons de maior contraste para uma melhor leitura. Junto ao verde, escolhemos o laranja como a cor secundária, cor muito utilizada no meio devido ao Agosto Laranja, mês nacional de conscientização sobre a Esclerose Múltipla.
Imagem mostrando o Style Guide (Guia de Estilo) com Paleta de cores, Iconografia, Tipografia e Componente
Protótipo de alta fidelidade
Tínhamos uma visão geral do produto, como queríamos aperfeiçoá-lo através dos aprendizados e teste feito, mesmo assim o trabalho foi árduo. O norte para mim foi a criação da ilustração do banner, me fez visualizar todo o site e como poderíamos agregar ainda mais valor ao mesmo.
Essas foram as modificações feitas:
Aumentamos o CTO principal para doação:
Incorporamos os Ícones na prova social;
Mudamos o tamanho e disposição dos atalhos mais acessados:
Trocamos a ordem entres os blocos de depoimentos e vídeo social:
Acrescentamos o botão para ser voluntário:
Trocamos os botões e atalhos menos acessados:
Modificamos e aumentamos o espaço para o blog;
Acrescentamos valor no newsletter com o informativo mensal.
UI final da solução digital criada para a ABEM.
Próximos passos e aprendizados
Como próximos passos queremos melhorar acesso pelo menu hambúrguer, acrescentando uma descrição visível, testar o uso da lupa para obtenção de resultados, fazer pesquisas voltadas aos conteúdos mais acessados para diminuir o tamanho da página inicial e estudar o comportamento do mapa do site no mobile para compor uma melhor versão web do site. Para o futuro queremos implantar. um aplicativo para ABEM e melhorar ainda mais essa experiências com os pacientes.
Começamos com uma equipe grande com atribuições e reuniões periódicas que foram diminuindo com o tempo, percebi que idas e vindas de membros no time são comuns e sempre devem ser levadas em consideração ao iniciar um projeto, por isso a importância do time entender e participar de todas as etapas do processo.
Tive o prazer de conhecer pessoas maravilhosas, aprender sobre uma doença que ainda é bastante desconhecida e ajudar, mesmo que um pouco, a aliviar as dores dos pacientes de EM.