Voltar ao início
Product Design
UX Research
Design System
Figma
Prototipação

Advisor App

Product design de um SaaS mobile para consultores financeiros

Smartbrain · 2024

Papel

Product Designer

Período

2022 - 2024

Time
  • Eduardo Hessel
  • +1 Product Designer
  • 1 PM
Habilidades
  • UX Research
  • Design System
  • Prototipação
  • Handoff

Resumo

Visão geral

O Advisor App é o braço mobile do ecossistema Smartbrain Advisor: um SaaS B2B em que consultores financeiros precisam consultar posição consolidada, performance e relatórios com clareza, em qualquer lugar, sem depender de múltiplas ferramentas ou do desktop.

Meu papel

  • Condução de discovery: contexto de mercado, mapeamento de jornadas e definição do problema.
  • Arquitetura de informação, user flows, wireframes e protótipos de alta fidelidade.
  • Criação e evolução do design system do produto, alinhado à identidade Advisor.
  • Validação com testes de usabilidade e iteração da v1.0 às telas finais.
  • Handoff estruturado para engenharia, com componentes e estados documentados.

Soluções

Estruturei o projeto em quatro fases (imersão, definição, ideação e prototipação), traduzi insights em hierarquia visual e fluxos objetivos, e entreguei uma experiência mobile coerente para leitura de dados financeiros complexos.

Sobre o produto

Contexto

A Smartbrain opera produtos financeiros de alta escala no ecossistema Advisor. Consultores usam a plataforma para gerir carteiras de clientes, gerar relatórios e manter relacionamento consultivo. O mobile surgiu como extensão natural: o consultor precisava da mesma confiança e densidade de informação do desktop, com leitura rápida entre reuniões e deslocamentos. O desafio não era só portar telas, mas redesenhar a experiência para o contexto mobile sem perder credibilidade em dados sensíveis.

Advisor App

Problemas

Problema de negócio

A operação do consultor dependia de canais fragmentados. Isso aumentava retrabalho, tempo de resposta ao cliente e risco de inconsistência entre o que era mostrado no escritório e o que era acessível em campo. Para o negócio, faltava um produto mobile que retivesse consultores dentro do ecossistema Advisor e reforçasse o valor percebido da assinatura.

Problema do usuário

Consultores relatavam dificuldade para obter visão consolidada da carteira fora do desktop, interpretar variações e performance em telas pequenas e compartilhar informações com clientes de forma ágil. A sobrecarga cognitiva em dashboards financeiros, somada a fluxos longos, gerava fricção e baixa confiança na leitura mobile.

Como traduzir a complexidade de um SaaS financeiro em uma experiência mobile clara, confiável e alinhada à rotina real do consultor?

Estratégia

1

Imersão

Análise de mercado, benchmarking de apps financeiros e mapeamento das jornadas do consultor. Entendimento do ecossistema Advisor, das restrições regulatórias e dos momentos críticos de uso: checagem rápida, preparação de reunião e acompanhamento pós-movimentação.

2

Definição

Síntese de insights em problemas priorizados, definição de escopo da v1.0 e desenho de user flows. Decisão explícita do que entra na primeira versão: dashboard, posição, relatórios e navegação base, deixando funcionalidades secundárias para ciclos seguintes.

3

Ideação

Exploração em wireframes de baixa e média fidelidade, testando hierarquias de informação, densidade de dados e padrões de navegação. Foco em progressive disclosure: o essencial na primeira camada, detalhes sob demanda.

4

Prototipação

Protótipos interativos em alta fidelidade, evolução do design system (tipografia, cores, componentes de dado) e rodadas de teste com usuários. Iteração contínua da v1.0 às telas finais, com refinamento de estados vazios, feedback e microinterações.

Soluções

Insights que orientaram o produto

A pesquisa mostrou que o consultor não busca explorar o app: ele precisa responder perguntas rápidas (como está a carteira, o que mudou, o que mostrar ao cliente). Isso direcionou a home para dashboard com KPIs escaneáveis, gráficos legíveis em mobile e atalhos para relatórios.

Visual da solução em breve

Arquitetura e fluxos

Reorganizei a navegação em torno de intenções: acompanhar, analisar e compartilhar. User flows documentados para onboarding, consulta de carteira, detalhamento de ativos e acesso a relatórios, reduzindo passos entre abertura do app e informação crítica.

Visual da solução em breve

Design system Advisor

Biblioteca de componentes para o app: cards de performance, tabelas responsivas, gráficos de alocação e rentabilidade, inputs e padrões de lista. Identidade visual escura com acentos em verde, priorizando contraste e legibilidade em contexto financeiro.

Visual da solução em breve

Da v1.0 às telas finais

A primeira versão validou estrutura e fluxos principais. Testes de usabilidade revelaram ajustes em hierarquia, labels e densidade de gráficos. A versão final consolidou padrões reutilizáveis e refinou telas de dashboard, listagens, detalhes e configurações.

Visual da solução em breve

Impacto

O Advisor App passou a cobrir as jornadas mobile mais críticas do consultor com uma base visual e de componentes reutilizável. A abordagem por fases reduziu retrabalho entre discovery e entrega, e o design system acelerou a evolução das telas sem perder coerência com o ecossistema Advisor.

4fases do processo, da imersão à prototipação
3fluxos principais unificados no mobile
~30%redução no esforço de UI com design system

Aprendizados

Produto financeiro exige confiança antes de estética

Em dados sensíveis, hierarquia clara, estados explícitos e linguagem consistente pesam mais que novidade visual. Cada tela precisa comunicar que o usuário está no controle da informação certa.

Mobile não é desktop encolhido

Redesenhar para mobile forçou priorização brutal de conteúdo. O que funcionava em telas largas precisava ser renegociado: menos colunas, mais resumo, navegação por intenção.

Design system como alavanca de escala

Componentes de dado (gráficos, tabelas, cards de KPI) documentados desde cedo permitiram iterar rápido nas telas finais e manter handoff previsível para engenharia.

GitHub
LinkedIn