Projeto - DinBack

Projeto criado com o intuito de desenvolver um sistema de reembolso de despesas

Fintech

UX/UI

Mobile

Um aplicativo que possibilita o controle dos seus reembolsos, na palma da sua mão!

TEMPO DE CRIAÇÃO

35 DIAS

DISPOSITIVOS

Mobile

MINHA ATUAÇÃO

UI e UX Designer

FERRAMENTAS

Figma e Photoshop

Introdução

Visão geral do projeto

Contexto

Muitas empresas ainda sofrem com processos analógicos. No cenário do Dinback, o problema era claro: colaboradores na rua perdiam tempo (e notas fiscais) preenchendo planilhas, enquanto o financeiro perdia a paciência validando dados rasurados.

Minha Função

Como UX Designer ponta-a-ponta, meu objetivo não era apenas criar uma interface bonita, mas desenhar um fluxo focado em eficiência operacional que gerasse ROI (Retorno sobre o Investimento) direto para o negócio.

Objetivo

Reduzir o tempo de cadastro de despesas de 15 para 4 minutos e mitigar o risco de perda fiscal.

Resultados e Insights do Negócio

A aplicação de solicitação de reembolso trouxe ganhos expressivos de eficiência e satisfação. O tempo médio de cadastro caiu de 15 para apenas 4 minutos, gerando uma redução de 73% no tempo gasto pelos usuários.

Além disso, o novo fluxo elevou a produtividade, com 80% dos usuários relatando melhora na qualidade do trabalho graças à nova interface mais simples e prática.

Internamente, a satisfação dos colaboradores aumentou em 75%, e o sistema passou a garantir maior conformidade com as normas, reduzindo riscos de fraudes e inconsistências regulatórias.

O Processo...

Agora que você já viu os resultados, veja como cheguei até eles.

Imersão, Dados e Diagnóstico

Descobrindo o Negócio através do Mercado

Para entender o mercado, comecei fazendo um Desk Research e um Benchmarking competitivo. Analisando os concorrentes, percebi um padrão: a maioria das ferramentas foca em telas densas de gestão macro-financeira.

Minha decisão estratégica:

Eu decidi ir na contramão. Percebi que o usuário de rua não quer gerenciar finanças no celular corporativo; ele quer se livrar da burocracia o mais rápido possível. Minha premissa de design passou a ser: menos gestão, mais micro-tarefas de input rápido.

Resultado da Análise dos concorrentes

Grande parte dos aplicativos usam cards, para mostrar as solicitações

Costumam ter filtros para os tipos de solicitações

Demonstram os valores de variadas formas

Grande parte possuem a função de tirar foto do cupom

Foi analisado o nivel de facilidade no uso do aplicativo, desde o processo de cadastrar a solicitação até as aprovações

Pesquisas Qualitativas e Quantitativas

Para validar minha decisão estratégica, rodei uma pesquisa quantitativa com 30 usuários e compilei os dados que direcionaram meus requisitos de produto:

Quantidade de usuários

22 entrevistados entre 23 a 39 anos.
8 entrevistados entre 18 a 22 anos

Resultados que mostraram a dificuldade de fazer o processo pro planilhas (manualmente)

Quantitativa

76%

76% Realizam os métodos de solicitação de forma manual

89%

89% Usam Planilhas para organizar as solicitações

90%

85%

85% Acham que perdem muito tempo fazendo o trabalho manualmente

90% Costuma ter receio de perder seus comprovante

Resultados que mostraram a facilidade de perda dos comprovantes, tendo a necessidade do anexo digital

Qualitativa

Assim como os números são importantes, também achei interessante coletar opiniões mais detalhadas de alguns entrevistados, a fim de obter melhores insights sobre o problema e seus sintomas

Entrevistado 1

“Não tenho nada contra o uso de planilhas, porém demanda muito tempo, sendo ações repetitivas.”

Entrevistado 2

“É bem fácil perder os comprovantes na viagem”

Entrevistado 3

“Eu prezo pela praticidade, por isso me incomoda ficar preenchendo planilha manualmente”

Entrevistado 4

“Por mais que existem diversos sistemas, sinto que há uma falta de um aplicativo mais simples”

Assim, ficou ainda mais claro quais são as principais necessidades e dores dos usuários que são o público alvo deste tipo de sistema, neste caso, de serviços de reembolso de despesas

Para humanizar o problema e guiar minhas decisões de fluxo, mapeei a persona que mais sofria no ecossistema atual:

Persona

Nome: Joana Carla

Idade: 25 anos

Profissão: Contadora

Interesses:

Masterchef
Finanças
MPB

Estilo de vida:

Atua como contadora pleno em uma empresa de TI em São Paulo. Planilhas e atualização de dados fazem parte do seu dia a dia. Quando tem tempo, gosta de ir a restaurantes, pois adora gastronomia e o programa MasterChef.

Metas:

Gastar menos tempo no trabalho, e mais com sua vida pessoal
Fazer um curso CPA10 para atuar no banco

Frustações:

Seu trabalho acaba sendo repetitivo, pelo uso excessivo de planilhas
Trabalho manual depois de 5 anos atuado na mesma área, se tornou cansativo

Esqueleto do Sistema

USER FLOW

Após entender as dores e necessidade do usuário, chegou a hora de estruturar o app! Assim, elaborei o fluxo de navegação, para evitar telas e ações repetitivas, simulando o caminho que o usuário irá percorrer no aplicativo.

On Boarding

Cadastro

Tela Principal

Reembolso

Despesas

Detalhes do Reembolso

Reembolso

Detalhes do Reembolso

Solicitações

Aprovações

Lista de Solicitações

Lista de Aprovações

Solicitações

Criada

Aprovado?

Finalizado

Reenviar

Criação e Desenvolvimento

WIREFRAME

Aqui foi onde o design se transformou em solução de negócio. Eu utilizei o Figma como minha ferramenta central, mas mudei a forma de usá-lo para acelerar o projeto:

Wireframing de Baixa Fidelidade e FigJam:

Antes de desenhar qualquer componente em alta fidelidade, eu decidi rabiscar o fluxo de tarefas. Minha meta era garantir que o usuário executasse num processo simples. Acessou a tela > preencheu os campos > anexou imagem > finalizar

Home

Solicitação Reembolso - Despesas

A estrutura foi pensada para ser um sistema de fácil uso, permitindo ao usuário realizar e refazer ações sem prejudicar o seu trabalho, como botões de voltar, editar e excluir solicitações, além de facilitar a navegação entre as telas. Esse aspecto segue a Heurística 2 de Nielsen, que destaca a importância do controle e da liberdade do usuário ao interagir com o aplicativo.

Solicitação Reembolso - Kilometragem

Aprovações

Solicitações

Design e Guia de Estilo

O próximo passo foi definir os guias de design do aplicativo, um detalhe importante que pode tanto realçar a visibilidade do sistema quanto evitar erros como falta de contraste, cores fora do padrão, tamanhos inadequados e mau uso de grid. Esse cuidado está alinhado à Heurística 4 de Nielsen, que trata da consistência e padrões, enfatizando a necessidade de manter uma interface consistente em todas as telas, evitando assim a confusão dos usuários

Cores Principais

Cores Secundárias

Fontes

Logo

DinBack faz referença ao termo "Dinheiro de Volta", que condiz totalmente com o principal uso do aplicativo, reembolso de despesas. O D com uma seta em baixo faz referença ao "Reembolso"

Alguns Componentes

Sobre as Cores

Para este sistema, foi escolhida a cor verde, pois remete a sucesso, positividade e também à ideia de dinheiro. Além disso, os tons de cinza transmitem seriedade e equilíbrio no design, favorecendo o contraste, um detalhe extremamente importante para a usabilidade e acessibilidade. Isso está em conformidade com o critério de contraste (Nível AA) das Diretrizes de Acessibilidade WCAG.

Grid

Mobile: Horizontal - 16 Pixels | Vertical - 4 Colunas, 70 pixels, gutter 24

Soluções com Alta Fidelidade

Protótipo Final

Após aprovado a estrutura com alguns testes, aqui se torna uma parte importante de tornar em realidade a aplicação.

Solução 1: Tela de login com poucos campos

Fiz essa abordagem, pois elimina o preenchimento maçante apenas para acessar telas, sem inventar a roda.

Cálculo Automatizado de KM

Solução 2: Eu escolhi integrar mapas para que o colaborador apenas digite "Origem e Destino".

Essa abordagem elimina o cálculo mental e o preenchimento manual de reembolso de combustível que gerava desconfiança no financeiro

Menu simples, com funções diretas

Solução 3: Desenvolvi um menu seguindo padrões já familiares ao usuário, com navegação clara, intuitiva e formulários organizados.

Preencher planilhas extensas pode ser cansativo, ainda mais realizando mais de 50 reembolsos por dia. Por isso, foquei em uma interface limpa e objetiva, reduzindo campos desnecessários e minimizando a quantidade de cliques para tornar o processo mais rápido e eficiente.

Arquitetura Baseada em Status

Solução 4: Cards com status claros.

Desenhei cards visuais grandes e coloridos (Pendente, Aprovado, Pago). Essa escolha reduziu drasticamente a ansiedade do funcionário na rua e o volume de mensagens de suporte para o RH perguntando "cadê meu dinheiro?".

Anexo e sem perda de comprovante!

Solução 5: Anexo de comprovante

Estudei essa solução, pensando numa forma de evitar a perda de comprovantes. Assim implementei o anexo, do qual é possível salvar digitalmente o documento, sem ter risco de depender do fisico para realizar a solicitação de reembolso. Lembrando que foi baseado na pesquisa que 90% tem receio de perder seus comprovantes

Protótipo Navegável

ETAPA - TESTAR E ENTREGAR

Teste de Usabilidade

Realizamos alguns testes no aplicativo diretamente do celular, usando o Figma Mobile, tanto online quanto presencialmente. Esses testes ajudaram a identificar pontos de melhoria, como o espaçamento dos botões e campos de texto nas telas, o tamanho dos elementos, a disposição das cores em diferentes dispositivos, além da responsividade, claro, tudo dentro das limitações do Figma.

Tópicos Levantados

Pontos Positivos

Pontos a Melhorar

Foi elogiado a clareza das informações

A questão de prioridade e privilégio de acessos não foi bem explicada

As cores são limpas e tem um ótimo contraste

Se possível, diminuir a quantidade de inputs nos formulários

O sistema possui apenas e exclusivamente as opções mais importantes do serviço

Algumas animações não seguem o fluxo de posição de tela

Os cards facilitam na visualização das solicitações

A questão de adicionar despesas na mesma solicitação poderia ser um pouco aprimorada, pois de certa forma é a mesma coisa que editar solicitações

Mais formas de fazer uma mesma ação, como atalhos no menu bar e menu lateral

RESULTADOS

4 Minutos

Foi levantado que o ganho de tempo foi de aproximadamente 73,33%. Pois manualmente, demoravam em cerca de 15 minutos para realizar cada cadastro, com o aplicativo, demoram cercam de 4 minutos.

80% Satisfeitos

Dos usuários que realizaram o teste de usabilidade, 80% disseram que usar o sistema melhora a qualidade de seus trabalhos, pela praticidade.

95% + segurança

Foi levantando, dos 24 usuários, aproximadamente 22 disseram que não perderam seus comprovantes graças aos anexos no app

APRENDIZADO

Impacto e aprendizado

Design e Setor Financeiro: Alinhei o design às demandas específicas do setor.
Foco no Usuário: Entender as dores garantiu soluções eficazes e uma experiência fluida

Metodologias e Processos

Double Diamond e Design Thinking: Garantiram uma base sólida e resultados claros.
Processo Iterativo: Ajustes contínuos foram essenciais para um projeto refinado.

Se você tem uma ideia, lembre-se: com metodologias adequadas e um processo bem estruturado, é possível transformar desafios complexos em soluções efetivas e inovadoras.