Electrogear - Pro e Care

Objetivos gerais

O objetivo do projeto era criar, através do Figma, o aplicativo ElectroGear em duas versões: "Care" e "Pro". A versão "Pro" se direcionaria a profissionais da área de saúde que atuam no tratamento de lesões em atletas, enquanto a versão "Care" seria destinada a usuários em geral que adquirissem o dispositivo. Como responsável pelo projeto, minha tarefa era desenvolver o novo aplicativo ElectroGear a partir do aplicativo Healables, redesenhando as telas, adaptando-o para o contexto de atletas, melhorando o fluxo e adicionando novos recursos. O cliente apresentou algumas preferências para o design do aplicativo. Ele solicitou que a versão para atletas utilizasse a cor roxa e que o design se assemelhasse a referências que ele admirava, como a franquia Star Wars, que combina tradição e tecnologia. Além disso, o cliente desejava que a técnica de neomorfismo fosse aplicada nas telas, buscando inovação, simplicidade e elegância por meio do uso de formas geométricas e cores suaves para criar interfaces minimalistas e sofisticadas. As reuniões com o cliente eram conduzidas em inglês, o que tornou o desafio ainda maior. Nesse contexto, meu papel consistiu em unir as preferências do cliente com as necessidades dos usuários.

Entendimento do projeto e Pesquisa

Inicialmente, tive dificuldade para compreender a ideia do dispositivo e o propósito do aplicativo, já que se tratava de uma inovação e não estava familiarizado com o conceito. Como parte do processo de compreensão do projeto e da pesquisa inicial, iniciei procurando pelas telas anteriores do aplicativo, conversei com o Product Owner (PO) sobre o produto e pedi que ele me mostrasse em vídeo o dispositivo. Além disso, busquei informações sobre a empresa, o CEO e o produto por meio de palestras e pesquisas na internet. Também visualizei fotos do dispositivo para ter uma melhor compreensão de seu funcionamento e design.

Análise Heurística do App Anterior

O aplicativo anterior da Healables era interessante, mas precisava de melhorias no layout e nas heurísticas de usabilidade. Infelizmente, a interface apresentava algumas falhas que prejudicavam a experiência do usuário. Por exemplo, muitas vezes o usuário não conseguia identificar onde estava e quais eram as opções disponíveis, já que o painel superior apresentava informações pouco claras. Além disso, algumas opções eram confusas e não seguia padrões e convenções estabelecidas, como o ícone de configurações. Outro problema era a falta de ajuda adequada para que o usuário pudesse entender o sistema.Em resumo, o aplicativo anterior possuía um bom potencial, mas precisava de melhorias significativas em relação à usabilidade e ao design para atender às necessidades e expectativas dos usuários.

Benchmarking

Realizamos um benchmarking para identificar as melhores práticas em aplicativos similares ao ElectroGear. Embora nosso produto seja revolucionário e inovador, conseguimos encontrar inspiração em outras áreas, como em aplicativos de players de música e sessões de medicina, a fim de criar um design mais intuitivo e eficiente para os usuários.Durante o benchmarking, examinamos as funcionalidades e recursos mais importantes oferecidos pelos concorrentes e os comparamos com as necessidades dos usuários do ElectroGear. Isso nos ajudou a identificar as áreas em que podemos melhorar e aprimorar nossos recursos para garantir a melhor experiência possível aos nossos usuários.

Novas features

O cliente tinha diversas ideias para o novo aplicativo. Algumas delas incluem:

• Adicionar um formulário para o usuário avaliar o nível de dor antes e depois de cada sessão;
• Adicionar um formulário para o usuário avaliar o nível de dor antes e depois de cada sessão;
• Inserir gráficos de progresso de dor para que o usuário possa visualizar sua evolução ao longo do tempo;
• Permitir que o usuário veja o histórico de sessões anteriores;
• Adicionar a funcionalidade de notas para que o usuário possa registrar informações relevantes durante as sessões;
• Possibilitar a alteração do nome do dispositivo e do perfil do usuário;
• Criar organizações para que os usuários possam gerenciar as informações de forma mais organizada;
• Permitir que fisioterapeutas possam criar perfis de atletas e gerenciar suas sessões de tratamento.

Protopersonas

Definir as protopersonas ajudou a focar no usuário durante todo o processo de design, garantindo que o produto final atendesse às necessidades e desejos do usuário.

Definição

Com base na pesquisa e nas personas, foram definidos os recursos e funcionalidades mais importantes para os usuários.O aplicativo foi dividido em duas versões: Care para usuários não profissionais e Pro para profissionais da saúde. Foi realizada uma arquitetura da informação para definir a organização e a estrutura do aplicativo.A arquitetura da informação ajudou a criar um aplicativo mais intuitivo e fácil de usar.

Dificuldades no meio do caminho

Tive dificuldade em conceber um fluxo no qual a tela inicial exibisse de forma clara a opção de criar uma nova sessão, bem como as outras funcionalidades disponíveis, incluindo o histórico de sessões anteriores. Além disso, a adoção do conceito de design neomorfismo, que não era uma prática comum em meus projetos anteriores, e a integração de referências como tradição, tecnologia e a franquia Star Wars, representaram um desafio inicial para mim. Tudo isso foi resolvido com reuniões constantes e diretas com o cliente, além de uma análise cuidadosa das pesquisas que ele e a equipe da Healables já haviam mapeado. Através dessas reuniões, foi possível identificar as principais necessidades e desafios dos usuários e como o aplicativo poderia solucioná-los de maneira eficiente e intuitiva. A abordagem colaborativa também permitiu que novas ideias e funcionalidades fossem acrescentadas ao aplicativo, com base no feedback direto do cliente. A adoção do conceito de neomorfismo também foi discutida e adaptada para atender às necessidades estéticas e funcionais do aplicativo.

Guia de estilos

Nesse projeto, criei um guia de estilos para criar uma experiência consistente e coesa em seu produto. Defini uma série de diretrizes visuais, como cores, tipografia, espaçamento, ícones e elementos de interface, que ajudaram a manter a aparência e o comportamento do aplicativo consistentes em todas as suas partes.

Ao criar uo guia de estilos, pude garantir que cada elemento da interface do usuário se encaixasse no projeto geral, criando uma experiência fluida e intuitiva. Isso é especialmente importante em aplicativos complexos, como o Electrogear, que exigiu muita navegação e interação do usuário.

Além disso, o guia de estilos ajudou a reduzir o tempo de desenvolvimento e manutenção do aplicativo, pois todas as partes do projeto foram criadas seguindo as mesmas diretrizes.

Wireframes e Telas em alta fidelidade

A partir da arquitetura da informação, pude construir wireframes que foram submetidos à análise tanto do PO quanto do cliente, a fim de garantir que o produto final atendesse às necessidades e expectativas de ambos. Essa abordagem sistemática e colaborativa ajudou a identificar problemas potenciais e aprimorar o design antes de passar para a fase de implementação.

Em seguida, comecei a dar vida às telas do aplicativo, aplicando o guia de estilos que havia sido cuidadosamente desenvolvido.

Design QA e comunicação com equipe de desenvolvimento

Ao finalizar as telas, mantive uma conversa constante com a equipe de desenvolvimento para garantir que tudo fosse implementado corretamente em Flutter.  Também trabalhei em conjunto com os desenvolvedores para garantir que as mensagens de erro fossem claras e úteis para o usuário.

A colaboração entre designers e desenvolvedores é essencial para o sucesso de um projeto, pois diferentes pontos de vista podem resultar em grandes insights e feedbacks valiosos. É importante discutir requisitos básicos e limitações técnicas para garantir que o design seja apropriado para o projeto. Quando trabalhamos juntos, a experiência do produto final é mais agradável para o usuário e mais fácil para a equipe de desenvolvimento implementar.

‍