SUMBUDDY

MEU PAPEL

Ux Reseacher
User Flows
Wireframes

DURAÇÃO DO PROJETO

4 semanas

SERVIÇOS

UX Research, Criação de Persona, Mapa de Empatia, Wireframe, UI Design, Design System

DIVIDIR CONTA SEM DIVIDIR AMIZADE: O DESAFIO QUE INSPIROU O SUMBUDDY

Imagine estar num restaurante com seus amigos. Todos se divertem, até que a conta chega — e, com ela, o silêncio constrangedor. Quem pagou o quê? Quem ainda não transferiu? Como fazer isso sem parecer insistente ou desequilibrar a harmonia do grupo?

Esse foi o ponto de partida do nosso desafio, com um prazo de apenas 30 dias, fazer uma solução digital que tornasse a divisão de despesas entre amigos simples, justa e sem atritos sociais. Mas não era só sobre cálculos e notificações — era sobre facilitar a comunicação, evitar constrangimentos e preservar o lado mais valioso das interações humanas: a confiança.

Em um cenário onde as relações sociais se misturam com responsabilidades financeiras, nasceu o Sumbuddy — um aplicativo feito para transformar momentos desconfortáveis em soluções simples e colaborativas. A missão era clara: entender profundamente como as pessoas dividem contas hoje, quais dores enfrentam nesse processo e como a tecnologia poderia ser uma aliada na harmonia entre amigos.

OUVIR ANTES DE CRIAR: MERGULHANDO NO UNIVERSO DOS USUÁRIOS

Antes de pensar em cores, fluxos ou telas, sabíamos que precisávamos entender o contexto real por trás do simples ato de dividir uma conta. Nosso ponto de partida foi a escuta ativa — mas com método.

Começamos com a Matriz CSD (Certezas, Suposições e Dúvidas), uma ferramenta que nos ajudou a organizar o que achávamos que sabíamos sobre o problema. Por exemplo, tínhamos como certeza que dividir contas gerava desconforto entre amigos, mas tínhamos dúvidas sobre como as pessoas escolhiam as ferramentas para resolver isso. Esse exercício abriu caminhos para investigar com mais foco e intenção.

Com a CSD mapeada, partimos para uma pesquisa quantitativa, distribuída online, que coletou mais de 40 respostas. O objetivo era entender comportamentos, hábitos e dificuldades das pessoas na hora de dividir gastos.
Os dados revelaram pontos importantes:

Esses números trouxeram clareza sobre a dimensão emocional do problema — não era sobre valores, era sobre comunicação e constrangimento.

Ao mesmo tempo, realizamos um benchmarking com os principais aplicativos do mercado: Splitwise, Eu Etílico, Quanto foi?, Dividir conta e Chopp Certo. Analisamos usabilidade, funcionalidades e linguagem. Descobrimos que, apesar de eficientes, muitos desses apps careciam de empatia no design — eram muito técnicos, com pouca personalização e linguagem neutra ou fria. Essa análise reforçou nosso diferencial: entregar funcionalidade com afeto.

Com todas essas informações, construímos um Canvas de Proposta de Valor. Nele, conectamos o que os usuários realmente valorizavam (clareza, facilidade, leveza) com os diferenciais que queríamos oferecer:

• Alívio: eliminar o constrangimento de falar sobre dinheiro

• Ganho: controle e transparência de forma simples e bonita

• Criador de valor: uma experiência social acolhedora, não uma calculadora impessoal
  

Esse processo de investigação foi essencial para que o Sumbuddy nascesse com propósito — não como mais um app financeiro, mas como um mediador sutil entre amizades e obrigações. Cada insight nos guiou para um caminho mais sensível, mais empático e, principalmente, mais humano.

DO PAPEL AO PROTÓTIPO: TORNANDO IDEIAS VISÍVEIS

Com as dores e desejos dos usuários bem mapeados, chegou o momento de transformar empatia em estrutura. Antes de qualquer interface, precisávamos garantir que o app fizesse sentido na forma como se organiza e se conecta internamente — por isso, começamos pela arquitetura da informação.

Nosso objetivo era desenhar uma experiência que se sentisse natural: da criação de grupos até o fechamento de pagamentos, tudo precisava fluir sem fricções. Mapeamos os principais recursos em módulos lógicos e interdependentes, garantindo que cada ação tivesse um caminho claro e intuitivo:

• Home com visão geral dos grupos e saldos

• Tela de grupo com lista de despesas e membros

• Tela para adicionar nova despesa com divisão customizável

• Histórico para acompanhar o que já foi pago ou não

• Área de perfil e configurações pessoais
  

Com essa estrutura definida, passamos para os user flows, que nos ajudaram a visualizar a jornada completa de diferentes tipos de usuários. Criamos fluxos para ações-chave como:

• Criar um grupo e convidar amigos

• Registrar uma despesa com valor dividido proporcionalmente

• Visualizar quem já pagou e quem ainda não pagou

• Marcar uma dívida como quitada

• Receber notificações sobre pendências

  
  

Esses fluxos nos mostraram oportunidades de simplificar cliques, reduzir caminhos e manter sempre o usuário no controle. Em vez de forçar aprendizados novos, queríamos que o app se adaptasse à lógica das pessoas, e não o contrário.
Com isso em mãos, desenhamos os primeiros wireframes de baixa fidelidade, testando os principais caminhos antes de qualquer preocupação estética. O foco era um só: funcionalidade com fluidez.
Esse cuidado estrutural garantiu que, ao chegar na prototipagem visual, já tivéssemos uma base sólida. Cada tela prototipada foi um reflexo direto de tudo que havíamos escutado, investigado e estruturado com propósito.

IDEAÇÃO E PROTOTIPAGEM: ESBOÇANDO A SOLUÇÃO IDEAL

Para o nome do aplicativo, unimos a ideia de Soma (sum) com Amigo (buddy). A soma é uma operação matemática fundamental para o cálculo final das comandas. Já os amigos fazem parte tanto dos momentos em que confraternizamos e bebemos, como também queremos incoporar a ideia de que o aplicativo será o seu amigo para o momento de calcular a sua conta. Com isso, chegamos ao nome: Sumbuddy.

A fonte escolhida para a interface é a Work Sans, uma fonte projetada para o uso em telas em tamanhos médios (14px – 48px). Para a iconografia, foi escolhida a família do Font Awesome, em sua versão 6 pro.

A Work Sans foi utilizada nos pesos regular e bold, nas versões normal e itálica. A escala de tamanhos para a interface foi estruturada da seguinte forma: PP (12 pt), P (14 pt), M (16 pt), G (20 pt) e GG (24 pt).

A paleta escolhida para a marca traz cores quentes para combinar com os momentos de descontração e alegria nos quais esperamos estar presentes. Além disso, trazemos cores de bebidas que fazem parte dessas confraternizações: o amarelo para a cerveja e o vinho para a bebida homônima.

Para o aplicativo, trabalhamos com uma escala de cinza que fique confortável para os olhos das pessoas usuárias. Essa escala serviu como base, também, para a cor principal do aplicativo, o vinho. A partir da cor da marca, desdobramos em uma paleta de tons avermelhados versátil e que garante o contraste necessário para a leitura das informações.

WIREFRAMES

COMPONENTES

📎 clique aqui para ser redirecionado para o protótipo interativo do figma