Criação de sites
Criação de sites
Solução em UX para gerenciamento de gastos de autônomos, micro e pequenos empresários
Como ajudar autônomos, micro e pequenos empresários a controlar, monitorar e separar seus gastos pessoais e empresariais?
Para compreender melhor o problema iniciamos utilizando o método 5W1H, detalhado aqui
Após estudarmos o “universo” destes usuários e entender suas principais dores, desenvolvemos uma solução em forma de aplicativo, o Economeasy.
Ele possibilita que autônomos, micro e pequenos empresários façam o controle dos seus gastos pessoais e empresariais no mesmo aplicativo. Com 2 perfis de usuário.
Baseado nas principais necessidades dos usuários, o aplicativo oferece:
• Sincronização dos financeiros com o banco
• Categorização das despesas
• Preenchimento inteligente
• Fotos dos comprovantes
• Lembretes de vencimentos recorrentes
• Dicas financeiras
(Clique em avançar para iniciar o protótipo interativo)
Versão final Protótipo aplicativo Economeasy
Separar finanças pessoais e empresariais é uma dificuldade de quem não tem educação financeira e que atrapalha na gestão da empresa.
Embora possa parecer óbvio, muitos empreendedores ainda misturam suas finanças pessoais e empresariais.
O que leva a um erro grave que pode comprometer o futuro do negócio ou até mesmo levá-lo à falência, se perder o controle do caixa.
Benchmarking
Após analisar o cenário atual, conhecemos as alternativas oferecidas pelo mercado priorizando os principais aplicativos de controle financeiro.
Não encontramos nos concorrentes interfaces distintas para gestão financeira pessoal e empresarial no mesmo aplicativo. Portanto já identificamos nesta fase possíveis oportunidades.
Com as informações do mercado, fizemos um panorama do negócio, através da ferramenta Business Model Canvas.
Mapeamos possíveis meios de gerar valor tanto para a empresa como para o cliente e em paralelo, manter o relacionamento com terceiros para dar suporte às atividades.
Business Model Canvas
E para posicionar a nossa solução em torno das necessidades dos usuários e entender qual valor esse produto pode oferecer a eles utilizamos o Value Proposition Canvas.
Identificamos então as possíveis ideias e oportunidades para o negócio, mas precisávamos priorizar as ideiais de maior impacto com um baixo esforço, para isso, elaboramos a matriz de impacto e esforço.
Matriz Impacto X Esforço
A próxima etapa foi definir os objetivos do produto, através da ferramenta SMART, para mensurar o desempenho do produto no gerenciamento de gastos de micro e pequenos empresários e proporcionar um melhor controle financeiro e futuramente rentabilizar o aplicativo através de assinaturas para funções premium.
Com as informações em mãos, tínhamos algumas dúvidas sobre os nossos usuários.
Então utilizamos a Matriz CSD para trazer nossas dúvidas, certezas e suposições referente às necessidades dos usuários.
Com este processo chegamos nas nossas hipóteses apresentadas a seguir.
Matriz CSD
Utilizam boleto como forma principal de pagamento de contas na empresa
Tem dificuldades para separar os gastos pessoais dos gastos empresariais
Utiliza o mesmo cartão de crédito para gastos pessoais e gastos da empresa
Com as hipóteses definidas, o próximo passo foi utilizar a técnica “COMO PODERÍAMOS?” atacando as dores do nosso público e decidindo assim, qual seria a solução mais adequada para esse primeiro momento.
Após definir o perfil dos nossos usuários, baseado no cenário atual, focamos nossas pesquisas em micro e pequenos empresários brasileiros com acesso à internet.
Visando validar nossas hipóteses, iniciamos com as pesquisas quantitativas. Os questionários foram enviados via WhatsApp e ficaram disponíveis durante 7 dias.
Nossa meta inicial era obter pelo menos 40 respostas. Porém buscando uma maior relevância estatística e considerando uma margem de dropouts, as pesquisas foram realizadas com 75 pessoas sendo:
Após confrontar nossas hipóteses com as pesquisas chegamos nos aprendizados do quadro à seguir:
Com as dúvidas que surgiram nas pesquisas quantitativas e também para coletar mais informações, utilizamos o método de entrevista em profundidade, semiestruturada, de forma online (whatsapp, meet) e presencial.
Nessa pesquisa entrevistamos 13 pessoas, com faixa etária entre 27 e 70 anos, de diferentes regiões do Brasil e diversas profissões.
Com os resultados das pesquisas qualitativas chegamos nos seguintes aprendizados:
Você pode ver mais detalhes desta pesquisa clicando aqui.
dos pesquisados não fazem controle de
suas finanças. O que demonstra que a grande maioria monitora seus gastos de alguma forma.
desejam receber lembretes (notificações) de vencimento das contas pois a maioria já esqueceu de pagar contas.
utilizam um aplicativo de celular para controlar as finanças. Com 27,59%, a opção que mais se destacou foi “anoto em um caderno”.
Para criar empatia com os usuários pesquisados e compreender as suas necessidades e objetivos, criamos, a persona Pedro, que nos permitiu identificar um grupo de usuários com dores e necessidades semelhantes.
Com a persona definida, utilizamos o template de mapa da jornada da Nielsen Norman Group, para posicionarmos o usuário no centro da nossa descoberta e mapeamos seus sentimentos e motivações ao realizar suas atividades, gerando oportunidades de melhorias nesta jornada e consequentemente insights para a nossa solução.
Com as informações coletadas e avaliadas, chegou a hora de desenhar a solução!
Utilizamos a técnica de Crazy 8s para ter idéias e obter uma visão geral das possibilidades neste estágio inicial de desenvolvimento do design do aplicativo, ajudando a equipe a explorar diferentes possibilidades antes de se aprofundar em um conceito específico.
Partindo para uma representação mais tangível do aplicativo, elaboramos e prototipamos o fluxo de telas em média fidelidade, buscando validar os conceitos e funcionalidades e encontrar possíveis problemas de usabilidade.
Fluxo de Média Fidelidade
Testamos o protótipo com os usuários, buscando possíveis
problemas de usabilidade. Para tanto, foram propostas 4 tarefas no perfil pessoal:
– Lançar despesa
– Encontrar dicas
– Encontrar o relatório de despesas
– Trocar do perfil pessoal para o perfil profissional
Os resultados, a análise dos dados das pesquisas e os insights
destes testes foram resumidos no quadro a seguir:
Para conferir o relatório completo do teste de média fidelidade, clique aqui
Tarefa lança despesa
O objetivo desta tarefa era validar o fluxo de lançamento de uma despesa, inserindo lembrete de vencimento para o mês seguinte.
Na primeira tela (mapa de cliques) e na segunda tela (mapa de calor), é possível notar que apesar de a maioria ter clicado
corretamente para lançar a despesa no menu “+”, houveram alguns cliques (x) no menu inferior despesas. Portanto esta parte do fluxo não estava bem clara para todos os participantes.
Tarefa encontrar relatório de despesas
O objetivo da tarefa era avaliar o fluxo para encontrar o relatório de despesa (gráfico).
Observando o mapa de cliques (x), da primeira tela, embora a maioria tenha clicado no lugar correto, é possível notar que uma parcela significativa de participantes clicou em “despesas” no menu inferior e em outras partes desta tela. Portanto esta tela não estava intuitiva para estes participantes.
Já na segunda tela, que mostra o mapa de calor, a grande maioria clicou corretamente no relatório.
Após analisarmos os resultados dos testes em média fidelidade, surgiram os insights de possíveis soluções para os problemas que os usuários enfrentaram nos fluxos das tarefas. Porém antes de evoluirmos para o protótipo de alta fidelidade, elaboramos a identidade visual do aplicativo e o logotipo.
Para decidirmos o nome do aplicativo, fizemos um braimstorming e chegamos na junção de 2 palavras: Economy + Easy, formando o nome Economeasy, representando a facilidade dos usuários em fazer o controle de suas finanças.
O logotipo apresenta contornos suaves e arredondados para transmitir leveza. Combinamos os tons azul e verde e chegamos a um equilíbrio de cores que dá um conceito harmonioso à nossa marca.
Utilizando a psicologia das cores no layout do app, escolhemos a cor azul, como primária, remetendo à confiança e tecnologia. Além disso, o azul tem 111 tons diferentes catalogados e é considerada a mais popular e favorita das cores em todas as civilizações.
Como secundária, escolhemos a cor verde para representar equilíbrio e segurança. Características importantes para um app de controle de finanças. O tom “neon” é uma versão mais brilhante do verde, para dar destaque.
A cores semânticas, são aquelas que possuem um significado intrínseco para o usuário e dão informações sobre cuidado, sucesso e erro. Baseado nesta premissa, utilizamos os tons de verde claro para o alerta e verde escuro para o sucesso. Para os botões de perigo (comandos destrutivos), usamos a cor vermelha. A cor magenta poderá ser utilizada em contrastes para futuras aplicações.
Difinimos nossa paleta utilizando o gerador de paleta de cores da Adobe color, formando tonalidades harmônicas entre si.
Paleta de cores
Perfil pessoal e Perfil empresarial
O aplicativo possui 2 perfis: Pessoal e Empresarial
Para diferenciar as suas interfaces, no perfil pessoal, a cor cinza foi predominante no fundo e a cor verde na barra superior.
No perfil empresarial utizamos a cor branca predominando no fundo e a barra superior na cor azul escuro.
O projeto foi desenvolvido com a tipografia Montserrat por possuir uma grande família, ter um bom espaçamento entre as letras e apresentar uma boa legibilidade, mesmo em tamanhos menores. É uma fonte sem serifa, com estilo moderno e simples.
Utilizamos ícones vazados com linhas espeças e cantos arredondados, auxiliando na identificação e visibilidade.
Ícones
Trabalhamos com botões de características arredondadas, com border-radius de 8px para um design mais suave e moderno.
Seguindo as diretrizes de acessibilidade de conteúdo, os botões primários são utilizados em ações principais e apresentam preenchimento sólido, dando contraste com o fundo do aplicativo, bem como o texto dentro deles.
Para comandos secundários utilizamos botões sem preenchimento (ghost), prezando pela hierarquia visual e favorecendo a conclusão da tarefa na navegação do app.
Seguindo a norma da Nielsen Norman Group, utilizamos pop ups para ajudar os usuários, confirmando comandos e prevenindo erros.
Pop ups
Os formulários foram elaborados com componentes de fácil assimilação e mensagens auxiliares favorecendo a acessibilidade e reduzindo o esforço cognitivo dos usuários.
Para criar empatia e se comunicar melhor com os usuários, utilizamos ilustrações que complementam as mensagens do aplicativo.
Ilustrações abertura do aplicativo
Para manter consistência e um padrão, utilizamos a lei da proximidade, trabalhando com um design que prioriza hierarquia e similaridade entre as categorias.
Pensando na organização, equilíbrio e consistência do aplicativo, utilizamos o grid do Bootstrap de 8 pontos, colunas com margem e gutter de 16 pontos, favorecendo a programação e responsividade em diferentes dispositivos.
Segundo estudos, a maioria dos usuários utiliza uma mão para navegar nos aplicativos. As áreas verdes são as de maior alcance dos polegares. Ao analisar estes resultados, nos preocupamos com a área de acesso do nosso aplicativo e evitamos funcionalidades nas regiões vermelhas (de difícil alcance do polegar).
Zona do polegar
No trabalho de UX Writing priorizamos a hierarquia das informações em cada tela para orientar as ações do usuário.
Para entender a sua linguagem iniciamos com um benchmarking nos aplicativos concorrentes, em seguida nas avaliações dos seus usuários na google e apple store.
Em nossas pesquisas qualitativas percebemos palavras recorrentes e à partir disso, criamos uma nuvem de palavras para identificarmos os principais termos utilizados pelos usuários.
Nuvem de palavras
Tom e Voz do aplicativo
Ao elaborar o protótipo de média fidelidade, nos preocupamos em usar estes termos para tornar a escrita mais familiar e de fácil compreensão. Pensando em nosso público, evitamos jargões técnicos, mantivemos uma linguagem especializada e consistente, porém simples e cotidiana.
Desta forma, chegamos no tom e voz do nosso aplicativo.
A próxima etapa foi desenvolver e testar o protótipo em alta fidelidade, com o objetivo de validar os insights gerados após análise dos resultados dos testes do protótipo de média fidelidade, de forma a melhorar a experiência dos nossos usuários.
Fluxo Alta fidelidade
Repetimos e priorizamos as seguintes tarefas / telas nas quais os usuários tiveram mais dificuldades em executá-las:
Lançar uma despesa
Encontrar resumo (gráfico)
Analisando os resultados dos testes, após os ajustes realizados no protótipo de média para alta fidelidade, obtivemos:
Redução de 49% no tempo gasto para concluir a tarefa 1.
Redução de 20% na taxa de cliques errados na tarefa 2.
Os resultados, a análise dos dados das pesquisas e as soluções foram resumidos no quadro ao lado:
Para conferir o relatório completo, clique aqui!
Os problemas e soluções no fluxo foram representados nas telas a seguir:
Soluções em alta fidelidade nas funcionalidades do aplicativo após testes com usuários
Após uma análise abrangente do contexto dos usuários e suas necessidades financeiras, criamos o Economeasy, um aplicativo que simplifica o controle de gastos pessoais e empresariais. Constatamos que muitos usuários ainda recorriam a métodos antiquados, como o uso de cadernos, para gerenciar suas finanças. Nossa solução buscou modernizar essa prática, com uma interface intuitiva e dois perfis de usuário distintos. A pesquisa e os testes realizados foram essenciais para a evolução do aplicativo, permitindo uma gestão financeira mais organizada e acessível, beneficiando autônomos, micro e pequenos empresários.
Para projetos futuros, identificamos as seguintes oportunidades para o aplicativo:
Sincronização com outros dispositivos, mensagens motivacionais, Interface com preenchimento inteligente, criação e integração com versão web (desktop), curso de finanças e redes sociais com dicas financeiras semanais.
Considerando que a maior parte do público alvo utiliza caderno, podemos ver isso como algo promissor, onde há oportunidade para modernizar essa atividade, promovendo maior visibilidade para o aplicativo, através de campanhas de marketing, visando mostrar os benefícios em utilizá-lo e futuramente rentabilizá-lo através de assinaturas para funções premium.