Projeto - DinBack

Projeto UX e UI Design

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

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

TEMPO DE CRIAÇÃO

14 DIAS

DISPOSITIVOS

Mobile

MINHA ATUAÇÃO

UI e UX Designer

FERRAMENTAS

Figma e Photoshop

Introdução

Empatia - Entendendo o problema

Este projeto envolve o desenvolvimento de um aplicativo de reembolso de despesas, criado no Figma com foco em UX/UI Design. O desafio era criar uma solução prática para reduzir o uso de planilhas e processos manuais. Para isso, apliquei as metodologias Design Thinking e Double Diamond, com o objetivo de compreender as necessidades dos usuários, identificar os principais problemas e propor soluções eficazes, resultando em um sistema intuitivo, funcional e centrado no usuário

De início, destaquei alguns detalhes que podem ser bastante significativos em relação às necessidades do usuário. São aspectos importantes para focar tanto no aplicativo quanto no serviço."

Design Clean

Seguindo a tendencia atual do mercado, o design clean vem impactando positivamente na experiencia do usuário, sendo mais agradável de ver

Detalhes que atrapalham a produtividade

Encontrar detalhes que atrapalham a produtividade dos usuários que realizam ou trabalham com reembolsos é importante, para que assim o aplicativo consiga oferecer um serviço que esteja de acordo com as necessidades reais do dia-a-dia dos usuários.

Aplicativo Claro e Intuitivo

Elaborar menus de forma que haja um fluxo conciso entre as telas, favorecendo a memorização e a intuição dos usuários ao utilizarem os cards para cada tipo de reembolso, além de facilitar o acesso a todos os menus, solicitações e aprovações.

Alguns desafios encontrados

Apesar de, na teoria, um sistema simples de reembolso ser ideal, colocar todos os processos manuais no sistema, além de educar o usuário a adotar novos hábitos, é um dos maiores desafios deste projeto. Isso porque o uso de planilhas costuma ser alto nas empresas.

Para isso, foi necessário organizar as ideias e estudar como os aplicativos concorrentes se comportam, criando assim uma análise de benchmarking.

Foi visto que 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

Essas foram algumas das informações levantadas em relação a alguns aplicativos de reembolso. Assim, foi possível filtrar aspectos positivos e negativos que possam se adequar a possíveis soluções para o uso do usuário

ETAPA - DESCOBRIR

DeskResearch

Para ter uma base sobre as necessidades dos clientes que usam um sistema de reembolso (e de como usam), escolhi realizar inicialmente, um DeskReseach. Assim, analisando o mercado, percebemos que muitas empresas ainda realizam o reembolso de forma manual, seguindo os passos abaixo, conforme destacado pela página Exame¹

¹ https://exame.com/carreira/guia-de-carreira/reembolso-de-despesas/ acesso: 13/12/2024

Processo inicial

O colaborador comunica para a empresa sobre a necessidade do reembolso (vai fazer alguma viagem ou usar o carro pessoal para visitar clientes, por exemplo);

O setor de RH/DP analisa a solicitação e faz a aprovação;

Colaboradores

Usufruem do serviço ou produto necessário, fazendo o pagamento de maneira independente — via cartão de crédito, dinheiro ou qualquer meio de pagamento aprovado

Comprovantes

Com os comprovantes em mãos, é feita a solicitação do reembolso, mediante preenchimento de formulários, anexação de notas fiscais ou qualquer outra informação solicitada pelo RH/DP;

Envio e Aprovação

O setor responsável faz a análise dos comprovantes enviados, garante que está tudo certo e faz o envio do reembolso.

Pesquisas Qualitativas e Quantitativas

Quantitativa

Após a analise da pesquisa de mesa, ficou evidente a necessidade de criar um aplicativo/sistema eficiente que facilitasse o trabalho desses profissionais. Para isso, realizei pesquisas tanto quantitativas e qualitativas com empresas e usuários, com o objetivo de compreender as reais necessidades daqueles que utilizam os serviços de reembolso.

76%

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

90%

89%

89% Usam Planilhas para organizar as solicitações

85%

85% Acham que perdem muito tempo fazendo o trabalho manualmente

90% Prefeririam um sistema compacto e simples para realizar reembolso

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

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

Entrevistado 3

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

Entrevistado 4

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

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

ETAPA - DEFINIR

Diagrama de Afinidades

As pesquisas facilitaram bastante a compreensão das dores dos usuários e dos possíveis caminhos para resolver seus problemas relacionados aos serviços de reembolso de despesas. Com os dados levantados, separei em tópicos os principais pontos nos quais eu deveria focar.
Para isso, decidi utilizar o diagrama de afinidades, uma excelente ferramenta para reunir ideias, facilitando a visualização de todos os resultados obtidos até então.

Ineficiente e Repetitividade

Demanda muito tempo e ações repetitivas
Preenchimento Manual é incomodo

Complexidade de Soluções Atuais

Falta de um aplicativo mais simples
Aplicativos mais baratos

Gestão de comprovantes

Fácil perda de comprovantes durante a viagem
Fácil perda de comprovantes durante o anexo manual
Comprovantes costumam ser frágeis

Após realizar pesquisas e analisar os problemas dos usuários de sistemas de reembolso, criei uma persona que sintetiza suas principais características, necessidades e desafios, essencial para orientar decisões de design e garantir soluções mais eficazes.

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

Jornada de Usuário

Com o objetivo de identificar as emoções, dores e objetivos dos usuários, decidi elaborar uma Jornada de Usuário com base em todas as informações levantadas até o momento. Esse processo ajuda a unificar as expectativas dos usuários, utilizando dados coerentes e relevantes, facilitando a criação de uma solução mais concreta e alinhada às suas necessidades.

Etapa

Ação do usuário

Emoção

Ponto de dor

Solução Proposta

Acessar o App

O usuário faz login ou se cadastra.

Confiante, mas apressado.

Processo longo ou formulário confuso.

Oferecer login rápido

Despesa Simples

Escolhe a opção de registrar despesas.

Motivado a registrar.

Interface com excesso de informações.

Criar interface limpa e priorizar o acesso rápido às opções.

Despesa por KM

Preenche origem e destino.

Cauteloso para evitar erros.

Métodos de entrada confusos ou pouco intuitivos.

Simplificar preenchimento com sugestões automáticas (autocompletar).

Ver Solicitações

Visualiza despesas registradas em forma de lista ou cards.

Aliviado, mas atento.

Cards ou filtros confusos para encontrar informações específicas.

Design de filtros intuitivos e visual claro nos valores apresentados.

ETAPA - DESENVOLVER

Primeiros rascunhos

Após identificar os problemas, comecei a esboçar como seria o aplicativo, com foco nos seguintes tópicos:

Simples de usar.

Função de reembolso de despesas e por kilometragem.

Focar nas principais ações do serviço, evitando um sistema confuso.

interface bem distribuída.

Possibilidade de anexar foto, documento ou trajeto.

Fluxo de Navegação

Para facilitar a compreensão de como seria a arquitetura do sistema e evitar telas e ações repetitivas, desenvolvi um fluxo de navegação, simulando o caminho que o usuário irá percorrer no aplicativo.

WIREFRAME

Após analisar as telas que o usuário precisará navegar para realizar os serviços e, com base no rascunho, decidi desenhar uma estrutura mais fiel de como seria o aplicativo. Porém, para respeitar o processo, começamos primeiramente com um protótipo de baixa fidelidade.

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

Protótipo de Alta Fidelidade

Telas - Login

Decidi focar em um layout limpo, com contraste entre as cores verde e cinza, priorizando a apresentação apenas de informações relevantes e evitando excessos. Essa decisão foi tomada com base em uma das maiores dores identificadas em nossas pesquisas: a complexidade de aplicativos para serviços simples. Além disso, seguimos a heurística que destaca a importância do design minimalista, garantindo um sistema mais intuitivo e eficiente para o usuário

Telas - Menu Principal

Menu Principal - Expandido

Menu Principal

No menu bar, o ícone pintado demonstra em que tela o usuário está, seguindo a heuristica 1, que diz sobre visibilidade do status do sistema, fazendo com que o usuário saiba onde está

Telas - Reembolso Despesas

Solicitar Reembolso - Expandido

Solicitar Reembolso - Recolhido

Anexo Comprovante

As ações desta tela ficaram separadas em um menu gaveta, deixando o layout mais organizado de acordo com as ações
O botão adicionar, adiciona outras despesas numa mesma solicitação
O botão avançar, levará o usuário para a tela de detalhes de todas as despesas da respectiva solicitação, funcionando como uma visualização completa do pacote.
Tela de anexo - Permite ao usuário escolher uma foto pré-carregada ou tirar uma nova foto diretamente pelo aplicativo
Detalhes da solicitação, com todos as despesas inclusas, e adicionadas na tela anterior

Telas - Reembolso Kilometragem

Reembolso - Expandido

Mapa Rotas

A diferença desta tela em relação à de despesas é a presença do botão de anexo, que agora abre um mapa, além dos campos específicos para o comprovante
Decidi incluir a possibilidade de escolher as rotas com base no que for digitado ou no histórico de rotas já utilizadas
Por fim, após selecionar a rota, a mesma é exibida para o usuário junto com o valor do custo. Esse detalhe é importante para que o usuário tenha clareza sobre suas ações e saiba exatamente o que está fazendo.
Além disso, pensando na acessibilidade para usuários com dificuldades de visão, implementamos a possibilidade de dar zoom no mapa, ampliando o campo de visão. Essa funcionalidade está disponível tanto antes quanto depois da seleção da rota.

Telas - Solicitações

Na tela de solicitação, decidi exibir os cards de todas as solicitações do usuário logado. Ao clicar em um card, serão exibidos os detalhes das despesas dessa solicitação, permitindo que o usuário as edite ou exclua.

Telas - Aprovações

Na tela de aprovação, decidimos adicionar mais informações nos cards, assim como na tela de detalhes. Essas informações incluem o nome do solicitante e o setor ao qual pertence.

Lembrando que essa tela só ficará disponível se o usuário possuir o privilégio de aprovador.

Outras Telas

Menu Lateral

Notificações

Outras telas incluem o menu lateral, que é extremamente importante para oferecer ao usuário atalhos rápidos para os principais serviços. Além disso, implementamos a tela de notificações, permitindo que o usuário acompanhe quando suas solicitações são aprovadas ou reprovadas

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

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

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

Solução

Com todos os processos definidos, foi possível destacar pontos que proporcionou a entrega satisfatória para o usuário, em relações as suas principais dores:

Cards interativos e intuitivos, que resumem informações essenciais e facilitam a navegação na solicitação de reembolso.

Foco nas funcionalidades essenciais, simplificando o processo de reembolso e garantindo uma experiência rápida e eficiente.

Interface simples e adaptável, adequada a qualquer nível de conhecimento do usuário

Notificações personalizadas para acompanhar o status e otimizar o processo de reembolso.

Separação clara de tipos de reembolso nas telas e menus para facilitar a navegação.

Impacto

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.

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

A experiência do usuário foi aprimorada, resultando em um aumento de 75% na satisfação dos funcionários em relação ao processo de reembolso, segundo pesquisas internas.

O novo sistema garantiu que todas as solicitações estivessem alinhadas com as políticas internas e regulatórias, reduzindo riscos de fraudes e inconsistências

RESULTADOS

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.