Descrição

Resumo

A Duopen é uma fintech em etapa de growth. É um software B2B com o objetivo de ajudar instituições educacionais a otimizar seu processo de negociação de bolsa de estudos. O core do projeto é um dashboard com a vida financeira completa de um aluno por meio do open finance que avalia automaticamente a situação do aluno para receber uma bolsa de estudos.

1º etapa, UX Research:

UX Research foi de suma importância para a definição de User Flow.

• Briefing - Para entender como a Duopen e os sócios se enxerga de dentro para fora. Após conversas e reuniões com o cliente, pude entender sobre o modelo de negócios da Duopen e clareza no seu propósito: Facilitar o acesso à educação e fomentar o setor da educação com a tecnologia. O core do projeto é um dashboard com a vida financeira completa de um aluno por meio do open finance. Concluímos que a uma experiência (UX) fluída, prática e intuitiva era indispensável para o projeto e para a interface (UI) o cliente preferiu o estilo Flat Design.

• Benchmark - Comecei pesquisas relacionados ao setor que a Duopen está inserida, concorrentes, usuário e sua percepção sobre todo esse ecossistema (via noticias e pesquisas de terceiros). Pude concluir que os gastos com educação das famílias varia de acordo a sua renda. Famílias com renda per capita acima de R$ 10.000 dispendem um valor em educação 51 vezes maior do que o valor dispendido pelas famílias com renda per capita de até R$ 500 (IDados). O Brasileiro médio valoriza a educação e acredita no seu poder transformador. Os alunos são selecionados para as bolsas de estudo com base em seu perfil socioeconômico. As bolsas de estudo são concedidas da seguinte forma: Bolsa integral para alunos com renda familiar mensal per capita de até 1 ½ (um e meio) salário mínimo e Bolsa parcial para alunos com renda familiar mensal per capita de até 3 (três) salários mínimos. (gov.br).

• Persona - Eduardo Silva, diretor financeiro de uma instituição de ensino superior, é um profissional experiente e comprometido com a eficiência financeira e o acesso dos alunos a bolsas de estudo. Ele busca uma solução tecnológica que simplifique a gestão financeira da instituição e agilize o processo de concessão de bolsas, valorizando a praticidade e a agilidade. Com uma visão estratégica e foco em resultados, Eduardo espera um dashboard detalhado e recursos de análise preditiva para tomar decisões embasadas e otimizar processos. Sua frase-chave reflete a necessidade de uma solução que simplifique a gestão financeira e a concessão de bolsas de estudo.

• Discovery - Com base em todo o contexto do projeto, identifiquei duas oportunidades de negócios:

• Taxonomic information architecture - Arquitetura de informação refere-se a forma com que o conteúdo é exibido para o usuário. Uma arquitetura de informação baseada em taxonomia (Taxonomic information architecture), exibe o conteúdo com base em uma taxonomia ou sistema de classificação, agrupando informações com base em características compartilhadas ou atributos específicos, o que pode ajudar na organização de grandes volumes de dados. Pela necessidade de exibir múltiplos tipos de dados ao usuário, tomei a decisão de utilizar esse tipo de estrutura.

• Bento design - O Bento Design trabalha em conjunto com princípios de design, usabilidade e acessibilidade para criar produtos digitais bem projetados. Taxonomia é um dos conceitos relacionados que o Bento Design considera para otimizar a experiência do usuário. A motivação para utilizar esse tipo de experiência veio dos benefícios evidentes e combinar com a Taxonomic information architecture.

• Viés da facilidade de uso - Refere-se à tendência dos usuários em preferir e avaliar positivamente sistemas, produtos ou interfaces que são mais fáceis de usar. Esse viés está relacionado à ideia de que os usuários tendem a atribuir maior valor a produtos ou serviços que são mais acessíveis, intuitivos e requerem menos esforço para interagir. A decisão de incrementar ao projeto foi que o usuário também irá utilizar o produto durante negociações e precisará do máximo de agilidade e rapidez nesse momento.

2º etapa, User Flow (UX Design):

Abaixo será listado as principais funcionalidades junto com um resumo e as decisões tomadas em cada uma.

• Alunos - O objetivo dessa tela é listar todos os alunos no banco de dados da instituição. Visando cumprir com todas as atribuições do Discovery, tomei as seguintes decisões para a interface:

• Filtro lateral - Visando facilidade em filtrar com poucos cliques e dinamismo na atualização dos dados da tabela.

• Busca - A motivação foi permitir ao usuário um pesquisa direta com nome ou CPF. Para garantir a facilidade de uso, decidi deixar o campo de busca grande e separado dos demais elementos da tela.

• Lista de alunos - Entendemos que as principais informações de cada item da lista são: Nome do aluno e a confiabilidade. Por isso, apliquei Information Architecture Hierarchy (Arquitetura de Informação baseada em Hierarquia) O nome com o tamanho de um título e a confiabilidade em formato de badge garantiram a Hierarquia necessária.

• Dashboard sobre o Aluno - O objetivo dessa tela é mostrar informações financeiras sobre o aluno/filiação via integração com open finance.

• Botão entrar em contato - Ao clicar, o usuário é direcionado para o WhatsApp para falar diretamente com o aluno ou responsável.

• Conta bancária e cartão - Ao selecionar, o dashboard atualiza as informações de acordo as informações disponíveis.

• Filiação - Essa funcionalidade visa mostrar as informações financeiras das filiações do aluno (Parentesco de 1º e 2º graus) via open finance, ao selecionar uma filiação, o dashboard atualiza de acordo as informações disponíveis da filiação. Essa função existe visando uma experiência mais imersiva e que aumenta o valor agregado do produto.

• Desconto inteligente - O objetivo dessa section é ajudar o usuário na tomada de decisão na negociação, o algoritmo que utiliza como base todos os dados disponíveis do aluno/filiação via open finance. A motivação de utilizar um gráfico círculo é pela praticidade e intuitividade, pois, temos a tendências de nos familiarizar melhor com formas arredondas e naturais. O badge tem um papel muito importante em traduzir para usuário o resultado feito pelo algoritmo. Além de ambos conseguirem chamar a atenção do usuário para o resultado. Todas essa decisões corroboraram para a praticidade do produto.

• Dados atualizados - O objetivo dessa section é trazer em números atualizados a vida financeira do aluno/filiação. A decisão de aplicar Information Architecture Hierarchy (Arquitetura de Informação baseada em Hierarquia) foi importante para evidenciar os dados mais relevantes que são "Último salário" e "Saldo atual" dos demais. Todas essas decisões corroboraram para um dashboard mais completo, aumentando o valor agregado do produto. Aumentando o engajamento do usuário.

• Histórico de transações - O objetivo dessa coluna é de mostrar de forma clara e intuitiva um extrato geral de transações do aluno/afiliação, para que o usuário possa analisar mais profundamente o comportamento do aluno/afiliação, podendo filtrar por data mais recente/antiga. Alternar as cores dos valores (de acordo ao tipo de transação: entrada ou saída), faz com que o usuário tenha maior entendimento sobre os dados sem que precise ler em detalhes da transação.

• Histórico de salário - O objetivo dessa section é mostrar a renda mensal do aluno/filiação. O algoritmo utiliza como base todas as entradas no período de 1 mês. A decisão de mostrar o valor em verde, chama a atenção do usuário para a informação mais importante, o que gera mais praticidade para a experiência do usuário (UX).

• Histórico de saldo - O objetivo dessa section é mostrar o saldo em conta do aluno/filiação. O algoritmo utiliza como base todas as entradas on-time. A decisão de mostrar o valor em verde, chama a atenção do usuário para a informação mais importante, o que gera mais praticidade para a experiência do usuário (UX).

3º etapa, Desenvolver a interface do usuário (UI):

Todo processo é feito no Figma com apoio do FigJam e Clickup.

1. Criar um design system e seus componentes baseado na identidade visual já existente (cores, tipografia, logo, ícones e etc);

2. Importar UI Kit do Tailwind (Framework CSS);

3. Simular e otimizar para telas menores como tablet e mobile (Responsive Design);

4. Validar com cliente;

5. Entrega.