navigate_before
navigate_next
arrow_back

Case Super App do Onnibank

Projeto
  • Criação de Aplicativo iOS e Android
Cliente
  • Onnibank
Atuação
  • Principal Product Designer
Ano
  • 2024

Sobre o Onnibank

O Onnibank é uma fintech luso-brasileira que oferece uma solução integrada para empresas gerenciarem pagamentos salariais, benefícios flexíveis e serviços financeiros para seus colaboradores, tudo em uma única plataforma e aplicativo. Nosso desafio foi criar um aplicativo que simplificasse a gestão financeira para o RH das empresas enquanto oferecesse uma experiência intuitiva e valiosa para os colaboradores.

Este case apresenta o processo completo, utilizando técnicas modernas de UX Research, UX Design, UI Design e prototipação, com foco em um resultado estratégico, técnico e centrado no usuário.

Observação importante: Por questões contratuais com a contratante, não posso compartilhar dados sensíveis do banco nem informações detalhadas das pesquisas realizadas. No entanto, você poderá conhecer melhor as técnicas e metodologias aplicadas ao longo do desenvolvimento deste projeto.
Login no App
Seleção de conta
Home do App
Pagamento de contas

Qual problema resolvemos?

Foi um grande desafio a ser resolvido! Empresas lidam com processos manuais e sistemas desconexos para gerenciar folhas de pagamentos e benefícios, resultando em atrasos, erros e frustração para o RH. Colaboradores, por sua vez, possuem acesso restrito a serviços financeiros personalizados, como crédito ou descontos, dependendo de soluções fragmentadas.

O problema central que enfrentamos foi: como criar um aplicativo que simplifique a gestão financeira do RH em um único ambiente e ofereça uma experiência de conta digital acessível, confiável e valiosa para colaboradores em um mercado saturado por fintechs voltadas ao público individual? Identificamos barreiras como falta de integração entre serviços, interfaces confusas para usuários menos experientes e baixa flexibilidade para atender às necessidades específicas de empresas e seus times.

Login do Portal Empresas
Seleção de Empresas
Dashboard
00

Solução do problema

Nosso objetivo foi criar um ecossistema digital que simplificasse a vida do RH e trouxesse mais comodidade para os colaboradores, reduzindo a burocracia e melhorando a acessibilidade financeira.

O projeto do Super App do Onnibank envolveu o design de um aplicativo mobile para gestão de pagamentos e benefícios, bem como um painel administrativo web para o RH das empresas clientes. As principais funcionalidades incluem:

  • Conta digital: Gerenciamento da conta digital do de pagamentos de salário e benefícios;

  • Benefícios flexíveis: Personalização de pacotes de benefícios para colaboradores;

  • Clube de descontos: Acesso a ofertas e serviços exclusivos para usuários do Onnibank;

  • Antecipação salarial: Opção para colaboradores adiantarem parte do salário;

  • Empréstimos e seguros: Soluções financeiras acessíveis aos colaboradores.

Minhas Funções e Responsabilidades

Como Principal Product Designer, assumi neste projeto um papel multifacetado que combinou pesquisas, criação do design, prototipação e coordenação com a equipe de tecnologia do banco:

  • Mapeamento de stakeholders e definição do escopo do projeto;

  • Condução de pesquisas primárias e secundárias para entendimento do público;

  • Análise de concorrência e tendências no setor de fintechs;

  • Criação de personas e mapeamento da jornada do usuário;

  • Definição da arquitetura da informação e wireframes;

  • Prototipação e testes de usabilidade para validação das soluções;

  • Desenvolvimento do UI Design e guidelines visuais;

  • Entrega do projeto para a equipe de desenvolvimento, garantindo a implementação fiel do design.

Restrições do Projeto

  • Tempo limitado para pesquisa (1 mês para conclusão da fase de descoberta e ideação);

  • Necessidade de integração com sistemas legados de empresas clientes;

  • Requisitos de segurança e conformidade com regulamentações financeiras.

Tela-03
Tela-17
Tela-10
Tela-16
00

Resultados e Aprendizados

O design do Onnibank foi um projeto desafiador que exigiu uma abordagem estratégica e completamente centrada no usuário.

Resultados Alcançados

O projeto do Onnibank trouxe resultados tangíveis tanto para as empresas clientes quanto para os colaboradores e para a própria plataforma. Destacamos os principais indicadores de sucesso:

  • Redução de 40% no tempo de gestão da folha de pagamento pelo RH: A centralização de informações e a automação de processos reduziram significativamente o tempo dedicado à conferência e envio de dados salariais e de benefícios.

  • 85% de adesão ao app nos 3 primeiros meses: O alto índice de adesão mostrou que a proposta de valor foi bem compreendida e que o onboarding simplificado e intuitivo contribuiu para uma adoção rápida.

  • Nota 4,8/5 nas lojas de aplicativos (Google Play e App Store): Os usuários elogiaram especialmente a clareza da interface, a facilidade para consultar saldo e a possibilidade de personalizar seus benefícios.

  • Aumento de 30% na conversão de novas empresas: A solução digital, aliada à comunicação focada nos diferenciais de UX, posicionou o Onnibank como uma plataforma moderna e inovadora, o que influenciou diretamente na atração de novos clientes corporativos.

  • Redução de 60% no volume de chamados no suporte relacionados à consulta de saldo e benefícios: Com a interface redesenhada e a disponibilização de notificações automáticas, a necessidade de suporte diminuiu consideravelmente.

Aprendizados

Ao longo do processo, acumulamos aprendizados valiosos, que foram incorporados não só no design da plataforma, mas também na cultura de produto da empresa:

  • Integração com sistemas legados exige planejamento técnico e empatia com o time de TI das empresas clientes: Aprendemos que cada empresa possui uma realidade tecnológica própria e que mapear esses cenários logo nas fases iniciais evita retrabalho e acelera a integração.

  • Benefícios flexíveis são fator de retenção e satisfação: A possibilidade de personalizar os benefícios foi o recurso mais bem avaliado nos testes e nas pesquisas pós-lançamento. Isso reforça a importância de produtos adaptáveis às necessidades individuais.

  • Testes contínuos garantem agilidade e qualidade: A prática de realizar ciclos curtos de teste e iteração permitiu corrigir problemas críticos antes que se tornassem gargalos no lançamento. Manter esse ciclo ativo após o lançamento ajudou a detectar novas oportunidades de melhoria.

  • Pesquisa constante mantém o produto alinhado com expectativas reais: O acompanhamento pós-lançamento, combinado com análises de métricas de uso e feedback qualitativo contínuo, mostrou que as necessidades dos usuários evoluem — especialmente em produtos financeiros. Estar próximo desse público é essencial para manter a relevância.

  • Comunicação clara e educação digital são tão importantes quanto a interface: Muitos colaboradores não estavam habituados a gerenciar benefícios de forma digital. Criamos conteúdos educacionais dentro do próprio app e no onboarding para reduzir barreiras e aumentar a confiança no uso da plataforma.

  • Mapear cenários extremos é indispensável: Algumas dores só emergiram quando lidamos com casos específicos, como colaboradores sem smartphone ou empresas com políticas internas rígidas sobre troca de benefícios. Esse aprendizado reforçou a importância de mapear edge cases já no discovery.

  • A força da colaboração multidisciplinar: A proximidade entre design, produto, tecnologia e atendimento ao cliente durante todo o processo garantiu que o produto final atendesse tanto às necessidades do negócio quanto às expectativas do usuário. Esses aprendizados foram documentados e incorporados no processo de desenvolvimento contínuo da plataforma, criando uma cultura de melhoria incremental baseada em dados reais e feedback constante.

"O aprendizado contínuo com os usuários e a adaptação rápida foram diferenciais que garantiram o sucesso do projeto."

Conclusão:

A experiência do Onnibank mostrou que um processo completo e bem estruturado de UX Research e UX Design é capaz de transformar a estratégia de um negócio digital, gerando impacto direto tanto na experiência dos usuários finais quanto nos resultados da empresa. Ao longo do projeto, a adoção de métodos robustos de pesquisa qualitativa e quantitativa, o uso de técnicas avançadas de ideação e validação, e a aplicação de boas práticas de design resultaram em uma solução que não apenas atende, mas antecipa as necessidades dos usuários.

O sucesso do Onnibank evidencia que alinhar objetivos estratégicos (crescimento de mercado, diferenciação competitiva) às necessidades reais do público-alvo (clareza, simplicidade e flexibilidade) gera produtos digitais com alto valor percebido. Outro fator determinante foi a forte integração entre design, produto, tecnologia e negócios desde a fase de descoberta até o acompanhamento pós-lançamento. Esse alinhamento evitou soluções desconectadas da realidade técnica e garantiu que cada funcionalidade estivesse tecnicamente viável e estrategicamente relevante.

Além disso, o case reforça que UX não é uma etapa isolada no ciclo de desenvolvimento, mas sim um mindset contínuo, que conecta dados de uso, feedbacks qualitativos e análises de contexto para evoluir constantemente o produto. Com uma cultura centrada no usuário e baseada em evidências, o Onnibank se consolidou como uma solução digital que resolve dores reais do mercado, contribuindo para um RH mais eficiente e para colaboradores mais satisfeitos.

Esse projeto se torna um exemplo claro de como UX vai além da estética ou da interface: é uma peça estratégica fundamental na construção de produtos relevantes e desejáveis, impactando diretamente indicadores de adoção, retenção e satisfação do cliente.

300
Entrevistas realizadas
500
Telas criadas
36
Jornadas

Processos e Metodologias de UX Aplicadas

Planejei e facilitei workshops com stakeholders para alinhar expectativas, conduzi entrevistas qualitativas e quantitativas com usuários reais e transformei dados brutos em insights acionáveis por meio de análises detalhadas. Desenvolvi wireframes e protótipos de baixa, média e alta fidelidade no Figma, iterando continuamente com base em feedback e testes. Fui responsável pela criação do moodboard panel, defini padrões visuais do style guide (como tipografia e paleta de cores) e garanti conformidade com diretrizes de acessibilidade (WCAG 2.1).

Pesquisa e Descoberta

Stakeholder Mapping:

Identificamos todas as partes interessadas no projeto, incluindo:

  • Empresas Clientes: Organizações que utilizam o Onnibank para gestão de pagamentos e benefícios.

  • Colaboradores: Funcionários das empresas clientes que receberão salários e benefícios através do Onnibank.

  • Equipe de Desenvolvimento: Profissionais responsáveis pela implementação técnica do aplicativo.

  • Equipe de Suporte ao Cliente: Responsáveis por auxiliar usuários em eventuais dificuldades.

  • Parceiros Comerciais: Empresas fornecedoras de benefícios e serviços integrados ao Onnibank.


Entrevistas com Stakeholders:

Foram realizadas reuniões estruturadas utilizando roteiros semiabertos com os principais stakeholders: diretores do grupo empresarial, diretores do banco, diretores de RH, gestores financeiros e representantes das áreas de benefícios das empresas clientes. A técnica de Contextual Inquiry foi utilizada em alguns casos, permitindo observar diretamente como o RH realizava processos de pagamento e gestão de benefícios atualmente. Isso trouxe insights valiosos sobre pontos críticos da jornada interna de cada empresa.

Resultados da entrevistas: As empresas clientes manifestaram uma necessidade clara de uma plataforma end-to-end, que integrasse múltiplas funções em uma só interface, com dashboards intuitivos e atualizações em tempo real. Também foi destacada a importância da conformidade com auditorias trabalhistas e financeiras, além da necessidade de relatórios automatizados para fechamento de folha. Do lado dos colaboradores, utilizamos técnicas como User Interviews e Surveys Online, com foco em entender suas expectativas, experiências com bancos digitais e plataformas de benefícios atuais. Muitos demonstraram frustração com a falta de clareza sobre saldo disponível, demora em atualizações e dificuldade em acessar informações sobre benefícios. A experiência mobile-first foi apontada como essencial para atender esse público, que acessa frequentemente serviços financeiros pelo celular.

Desk Research:

Realizamos uma pesquisa documental aprofundada sobre o mercado de fintechs, bancos digitais e plataformas de benefícios corporativos. Analisamos relatórios de mercado de fontes renomadas, estudos setoriais e artigos acadêmicos para entender as principais tendências, oportunidades e desafios. Também mapeamos benchmarks internacionais, explorando como bancos digitais em diferentes países abordam benefícios flexíveis, antecipação salarial e experiência do colaborador. Essa etapa foi crucial para embasar nossas decisões estratégicas de design e garantir que o Onnibank estivesse alinhado às melhores práticas do mercado.

Pesquisas Qualitativas e Quantitativas:

Realizamos uma abordagem híbrida de pesquisa para obter uma visão ampla e profunda das necessidades e expectativas dos usuários do Onnibank. A pesquisa quantitativa envolveu a criação e aplicação de questionários online, distribuídos para uma amostra representativa de colaboradores de empresas clientes. Os questionários abordaram temas como: quais funcionalidades eles mais utilizam em bancos digitais, nível de conhecimento sobre benefícios flexíveis, dores e frustrações em relação a benefícios e gestão financeira e nível de confiança nas soluções atuais.

Exemplos de perguntas aplicadas nos questionários quantitativos:

  1. Com que frequência você acessa sua conta bancária pelo celular?

  2. Qual canal você utiliza para consultar seus benefícios?

  3. Qual sua maior dificuldade ao acessar informações sobre benefícios e salário?

  4. O que você considera mais importante em uma plataforma financeira oferecida pelo seu empregador?

  5. De 1 a 5, qual seu nível de satisfação com a experiência atual de acesso a seus benefícios e salários?

Paralelamente, realizamos entrevistas qualitativas em profundidade, utilizando roteiros semiestruturados que permitiram explorar percepções, emoções e contextos de uso com mais detalhes. Entrevistamos colaboradores, analistas de RH e gestores financeiros, buscando entender suas rotinas, desafios e como o Onnibank poderia ser uma solução efetiva. As entrevistas trouxeram insights ricos, especialmente sobre a necessidade de clareza nas informações apresentadas no aplicativo e a importância de notificações proativas relacionadas a benefícios e movimentações financeiras. Essa combinação de métodos garantiu uma compreensão 360 graus da experiência atual e do potencial de valor do Onnibank.
Algumas informações coletadas nos questionários qualitativos:

Colaborador – Setor de Varejo: “Eu nunca sei exatamente quanto tenho disponível no VR, só descubro na hora que vou pagar. Se tivesse uma notificação sempre que caísse algo, ajudaria muito.”

Analista de RH – Empresa de Logística: “Nosso maior problema é ter que lidar com cinco plataformas diferentes: uma pro salário, outra pro benefício de transporte, outra pro VA/VR. Queremos algo integrado, com tudo em um lugar só.”

Gestor Financeiro – Indústria: “A gente sofre com fechamento de folha porque cada benefício tem um prazo diferente, e o colaborador nunca sabe direito o que tem ou o que pode usar. Se o app mostrasse isso de forma simples, facilitaria para todo mundo.”

Matriz CSD:

Aplicamos a Matriz CSD como ferramenta estratégica logo após a primeira rodada de pesquisas com stakeholders e usuários. Reunimos a equipe multidisciplinar do projeto para organizar todas as informações levantadas em três categorias principais: Certezas (fatos comprovados a partir dos dados coletados), Suposições (hipóteses que precisavam ser validadas ou refutadas) e Dúvidas (lacunas de conhecimento ou pontos que exigiam mais investigação). Esse exercício colaborativo ajudou a alinhar a equipe e serviu como base para definir o foco das pesquisas seguintes, especialmente nos testes de usabilidade e novas entrevistas exploratórias. Ao transformar percepções difusas em um mapa claro de conhecimento e incertezas, garantimos que cada etapa do design fosse fundamentada em insights reais, reduzindo riscos e retrabalho.

Golden Circle:

Utilizamos o modelo do Golden Circle de Simon Sinek para construir uma visão estratégica clara para o Onnibank. Esse processo foi realizado em workshops colaborativos, envolvendo stakeholders-chave, time de design, produto e marketing.

Por que? O propósito central do Onnibank é transformar a relação entre empresas e colaboradores, tornando a gestão de salários e benefícios uma experiência simples, flexível e valorizada.

Como? Criando uma plataforma digital integrada, que une conta digital, benefícios flexíveis e serviços financeiros em um único ambiente, eliminando burocracias e proporcionando maior autonomia para colaboradores e gestores.

O quê? Um aplicativo mobile e um portal web que centralizam pagamento de salários, gestão de benefícios e acesso a serviços financeiros complementares, como antecipação salarial, clube de descontos e seguros.

Esse exercício de alinhamento estratégico permitiu que todas as decisões de UX Design estivessem conectadas a um propósito claro, garantindo que cada funcionalidade, fluxo e elemento visual refletisse esse posicionamento.

001
Portal Onnibank Empresas
  • Transferência de colaboradores em lote
  • Transferência de pagamentos em lote
  • Gestão Completa de RH
  • Gestão das Finanças da Empresa

Ideação e Definição

Criação de personas e Definição de Público-alvo:

Criamos personas detalhadas com base nos dados coletados durante as entrevistas qualitativas e quantitativas, garantindo que cada persona representasse um segmento-chave do público-alvo. As personas incluíram informações demográficas, objetivos, necessidades, dores e comportamentos digitais.

Criamos quatro personas principais, baseadas diretamente nos achados das pesquisas qualitativas e quantitativas, representando tanto os decisores quanto os usuários finais do Onnibank:

Ana, 38 anos, Gerente de RH: Trabalha em uma empresa de médio porte, é responsável pela gestão de benefícios e pagamentos. Sua maior dor é lidar com múltiplos fornecedores e plataformas desconectadas. Busca soluções integradas e fáceis de operar, que ofereçam relatórios completos para auditorias e gestão de compliance.

Carlos, 29 anos, Analista de Vendas: Recebe salário e benefícios através da empresa. Utiliza fintechs para seu dia a dia financeiro e espera que benefícios e saldo estejam disponíveis de forma transparente no app. Tem dificuldade em lembrar datas de créditos de benefícios.

João, 24 anos, Estagiário de TI: Usuário heavy user de apps financeiros e digitais. Tem alta expectativa em relação à usabilidade e modernidade da interface. Sua dor é a demora no acesso a novos benefícios e a falta de comunicação clara sobre atualizações salariais.

Marcos, 45 anos, Diretor Financeiro: Toma decisões estratégicas sobre ferramentas financeiras usadas pela empresa. Foca em controle de custos, eficiência operacional e relatórios financeiros automatizados. Valoriza soluções que facilitem auditorias e revisões contábeis.

Cada persona foi documentada com dados demográficos, objetivos, dores, comportamentos digitais e expectativas específicas em relação ao Onnibank, servindo como base para todas as decisões de design e priorização de funcionalidades.

Mapa de Empatia:

Criamos mapas detalhados de empatia para cada uma das quatro personas (Ana, Carlos, Marcos e João), utilizando o modelo clássico de empatia com as seções: “O que vê, ouve, pensa e sente, fala e faz, suas dores e suas necessidades”. Esse processo foi realizado com base nos dados das entrevistas qualitativas e complementado com inputs de pesquisas quantitativas.

Para garantir precisão, cada mapa foi preenchido de forma colaborativa, com insights extraídos diretamente de falas reais capturadas nas entrevistas, e depois validados junto aos stakeholders do projeto. Esses mapas ajudaram a entender profundamente como cada persona interage com plataformas financeiras, destacando:

Ana: Preocupação com auditorias, busca por controle e clareza, frustração com plataformas fragmentadas.

Carlos: Desejo de simplicidade e agilidade, expectativa de uma interface intuitiva e notificações claras.

João: Valorização de tecnologias modernas, uso frequente de apps digitais e expectativa por funcionalidades inovadoras.

Marcos: Foco em relatórios precisos, integração com sistemas contábeis e compliance financeiro.

Blueprints e Jornadas do Usuário:

Elaboramos jornadas detalhadas para Ana, Carlos, Marcos e João, evidenciando como cada persona experimenta o atual processo de pagamento e consulta de benefícios. Utilizamos a técnica de Service Blueprint, mapeando não apenas as ações visíveis para o usuário (frontstage), mas também os processos internos do RH e da plataforma (backstage) que impactam diretamente essa experiência.

Para a jornada atual, identificamos múltiplos pontos de dor, como falta de clareza sobre créditos de benefícios, dificuldade de comunicação entre RH e colaboradores e uso fragmentado de sistemas desconectados.

Na jornada desejada, criamos um fluxo contínuo e integrado dentro do Onnibank, onde o colaborador recebe notificações claras sobre novos créditos, pode consultar seu saldo em segundos e tem autonomia para personalizar seus benefícios direto pelo app. Em paralelo, o RH visualiza tudo em tempo real, com relatórios automáticos e centralizados.

Cada etapa da jornada foi validada com os próprios usuários durante sessões de co-criação e refinada após os testes de usabilidade, garantindo que a visão proposta atendesse às reais expectativas e comportamentos dos diferentes perfis mapeados.

Benchmarking:

Realizamos um processo estruturado de benchmarking competitivo e comparativo, selecionando fintechs e plataformas de benefícios reconhecidas no mercado, incluindo PicPay, Caju, Swile e Gusto. A análise foi dividida em três camadas principais:

Funcionalidades e Recursos: Criamos uma matriz comparativa para entender quais funcionalidades cada concorrente oferece, como consulta de saldo, antecipação salarial, customização de benefícios e notificações em tempo real. Essa matriz ajudou a mapear gaps de mercado e identificar oportunidades para diferenciação do Onnibank.

Experiência e Fluxos: Navegamos de ponta a ponta nos aplicativos e portais analisados, documentando cada fluxo crítico, desde o onboarding até a personalização de benefícios. Utilizamos uma tabela de avaliação heurística para comparar a clareza das interfaces, número de cliques para realizar ações-chave e a eficiência dos fluxos.

Linguagem Visual e Comunicação: Analisamos tom de voz, hierarquia de informações, paleta de cores, uso de ícones e microinterações. Essa análise permitiu definir parâmetros para construir uma identidade visual moderna e acessível, equilibrando inovação e segurança, essencial no segmento financeiro.

Cada insight obtido foi registrado e transformado em recomendações práticas para os wireframes e protótipos, assegurando que o Onnibank não apenas seguisse boas práticas, mas também se destacasse em pontos de dor identificados nos concorrentes, como excesso de telas ou falta de clareza nas informações de saldo e benefícios.

Card Sorting:

Conduzimos sessões de Card Sorting com colaboradores e gestores de RH, aplicando tanto a metodologia aberta (open sorting) quanto a metodologia fechada (closed sorting), dependendo do grupo.

Sessões com Colaboradores: Realizadas de forma remota, utilizando ferramentas digitais como Figjam, apresentamos cartões representando funcionalidades e informações-chave, pedindo que os participantes criassem suas próprias categorias e as nomeassem. Isso revelou a linguagem natural dos colaboradores e como eles agrupam informações sobre salário, benefícios e transações.

Sessões com Gestores de RH: Neste caso, aplicamos o Card Sorting Fechado, onde categorias previamente definidas foram apresentadas, e os gestores alocaram os cartões. O objetivo foi validar se a estrutura planejada correspondia à expectativa de quem gere os processos internos.

Após coletar os dados quantitativos (frequência de agrupamento) e qualitativos (justificativas dos usuários para suas escolhas), criamos Mapas de Similaridade, que ilustraram quais cartões eram constantemente agrupados juntos. Esses mapas serviram como insumo direto para a criação da Arquitetura da Informação final do Onnibank, garantindo que menus, seções e nomenclaturas estivessem 100% alinhados ao modelo mental do público real. Essa etapa foi crucial para evitar ambiguidades e melhorar a capacidade de descoberta (findability) dentro do app e do portal.

Storytelling e Future Press Release:

Utilizamos a técnica de Future Press Release inspirada no método utilizado pela Amazon. Criamos um documento simulado como se o Onnibank já tivesse sido lançado com sucesso e estivesse revolucionando a gestão de benefícios nas empresas. Esse documento foi construído de forma colaborativa com as áreas de produto, marketing, UX e representantes das empresas clientes.

O press release incluiu:
  • Headline impactante: Destacando o diferencial do Onnibank.

  • Citação de um executivo: Reforçando o propósito do produto.

  • Descrição detalhada das funcionalidades-chave: Enfatizando a integração completa, os benefícios flexíveis e a experiência fluida tanto para RH quanto para colaboradores.

  • Reações positivas do mercado e dos usuários: Antecipando os impactos positivos que queríamos alcançar.

Além do press release em si, criamos uma FAQ futura com perguntas que o mercado faria após o lançamento, garantindo que cada ponto crítico fosse pensado desde a concepção. Esse exercício foi fundamental para manter todos os times alinhados na mesma visão estratégica, garantindo que cada decisão de design ou funcionalidade estivesse conectada ao impacto desejado para o mercado e os usuários finais.

Transferência por Pix
Agendamento de Pix
Autenticação no App
Comprovante de Pix

Prototipação e Testes

Wireframes e Protótipos de Baixa e Média Fidelidade:

Criamos wireframes de baixa fidelidade para estruturar rapidamente os fluxos e validar conceitos iniciais junto aos stakeholders e usuários-chave. Os wireframes incluíram telas para cadastro, login, consulta de saldo, personalização de benefícios, solicitação de antecipação salarial e acompanhamento de histórico financeiro. Durante essa etapa, priorizamos clareza na hierarquia de informações e redução da carga cognitiva para o usuário final.

Com base nos feedbacks obtidos nas validações iniciais, evoluímos para protótipos de média fidelidade, já incluindo componentes visuais que refletissem o estilo inicial do Onnibank, mas ainda com foco em estrutura e navegação. Esses protótipos foram utilizados nos primeiros testes de usabilidade moderados.

Checklist de Usabilidade:

Criamos um checklist personalizado baseado nas 10 heurísticas de Nielsen, adicionando também diretrizes específicas para produtos financeiros (como clareza em informações de saldo e transparência em taxas e condições). Cada tela e interação foi avaliada com esse checklist antes dos testes com usuários, garantindo que problemas críticos de usabilidade fossem corrigidos previamente.

Testes de Usabilidade:

Validação das soluções com usuários reais, ajustes e melhorias.

Mobile: Realizamos testes com 10 colaboradores de diferentes setores e níveis hierárquicos, desde estagiários até supervisores. Utilizamos uma plataforma de compartilhamento de tela (como Lookback) para observar em tempo real as interações e reações dos usuários. Cada teste durou entre 30 a 45 minutos, seguindo um roteiro estruturado com 6 tarefas principais, incluindo: realizar login, consultar saldo atualizado, personalizar benefícios dentro da aba “Onniflex”, simular uma solicitação de antecipação salarial e explorar a seção de histórico financeiro. Além da observação direta, capturamos dados como número de cliques por tarefa, tempo de conclusão e momentos de hesitação.

Web (Portal RH): Realizamos testes com 5 gestores de RH e analistas financeiros. Esses testes ocorreram em formato de sessão de validação remota moderada, com duração média de 60 minutos. As tarefas testadas incluíram: cadastro de novos colaboradores, criação de pacotes customizados de benefícios, consulta a relatórios financeiros e simulação de fechamento de folha. Cada interação foi avaliada com base em critérios como clareza da interface, tempo para encontrar informações e facilidade de uso.

Cada teste seguiu um roteiro estruturado, com tarefas claras e observação direta de dificuldades enfrentadas, tempo gasto por tarefa e feedback espontâneo ao final. As observações foram transformadas em um relatório de usabilidade, categorizando os achados por gravidade e frequência, o que orientou os ajustes no design.

Após cada sessão, aplicamos um System Usability Scale (SUS), coletando uma avaliação quantitativa da percepção de usabilidade. Todos os dados qualitativos (frustrações relatadas, comentários espontâneos) e quantitativos (tempo por tarefa, taxa de sucesso) foram consolidados em uma matriz de achados. Cada achado foi classificado por severidade (crítico, moderado ou leve) e priorizado para ajustes no próximo ciclo de iteração do design.

Cada teste seguiu um roteiro estruturado, com tarefas claras e observação direta de dificuldades enfrentadas, tempo gasto por tarefa e feedback espontâneo ao final. As observações foram transformadas em um relatório de usabilidade, categorizando os achados por gravidade e frequência, o que orientou os ajustes no design.

"Os testes de usabilidade revelaram oportunidades de melhoria que foram essenciais para otimizar a experiência final do usuário."

Moodboard e Style Guide:

Criamos um moodboard colaborativo utilizando referências visuais de fintechs modernas, bancos digitais e plataformas de benefícios. A partir desse moodboard, elaboramos o Style Guide, que definiu a paleta de cores (com foco em transmitir confiança e modernidade), a tipografia (combinando clareza e personalidade) e o sistema de componentes visuais.

Protótipo de Alta Fidelidade:

Com base nos aprendizados das fases anteriores, criamos protótipos navegáveis de alta fidelidade utilizando o Figma como ferramenta principal. Esses protótipos refletiram não apenas o visual final, mas também o comportamento dinâmico da interface, incluindo microinterações, animações sutis para transições e estados de carregamento. Cada componente foi construído com base no Design System criado para o Onnibank, garantindo consistência visual e funcional em todas as telas e fluxos. Ajustamos os textos de interface (UX Writing) com base nas diretrizes de tom de voz definido durante a etapa de alinhamento de branding, adotando uma comunicação clara, amigável e orientada à ação.

Jornada de Transferência com Chaves Pix e Transferência com Dados da Conta:

Os protótipos foram apresentados em sessões de design review junto aos stakeholders, incluindo líderes de produto, tecnologia e marketing, em um formato de navegação guiada, onde cada fluxo crítico foi demonstrado e contextualizado com base nas personas e jornadas criadas. Ao final da validação, consolidamos feedbacks em uma matriz de priorização (MoSCoW – Must, Should, Could, Won’t), categorizando quais ajustes seriam realizados antes do handoff.

Implementação e Acompanhamento

Handoff para Desenvolvimento:
  • Todo o material de handoff foi organizado dentro do próprio Figma, incluindo especificações detalhadas de espaçamentos, comportamentos responsivos, interações dinâmicas e anotações funcionais para os desenvolvedores, além de vídeos curtos explicativos para esclarecer transições complexas. Esse processo garantiu uma transição fluida entre design e desenvolvimento, reduzindo interpretações ambíguas e retrabalho.

Além do pacote visual e funcional, criamos um documento complementar de design specs, incluindo guidelines de acessibilidade, tokens de design para componentes reutilizáveis e fluxos alternativos para estados de erro e edge cases. Mantivemos uma rotina semanal de design review com a equipe de tecnologia para acompanhamento da implementação e resolução de dúvidas em tempo real.
Acompanhamento Pós-Lançamento:

Após o lançamento, monitoramos a adoção do aplicativo e do portal utilizando ferramentas como Google Analytics e Hotjar, além de análises qualitativas com suporte ao cliente para captar feedback espontâneo. Realizamos uma pesquisa NPS específica para medir a percepção de valor do Onnibank nos primeiros 90 dias. Todos esses dados foram compilados em relatórios periódicos de UX Metrics, permitindo uma visão contínua sobre pontos fortes e oportunidades de melhoria.