Libra Investimentos

Finance Dashboard Design

Finance Dashboard Design

Finance Dashboard Design

CLIENT

CLIENT

Libra Investimentos

Libra Investimentos

ROLE

ROLE

UX/UI Designer / AI-Assisted MVP Development

UX/UI Designer / AI-Assisted MVP Development

LOCATION

LOCATION

Curitiba, Paraná

Curitiba, Paraná

BRIEF

BRIEF

Design e desenvolvimento de um dashboard para um escritório de investimentos, criado para centralizar e facilitar a visualização de dados financeiros das carteiras de clientes.

Desafio

Desafio

Desafio

A equipe de assessores de investimentos da Libra e o time de gestão precisavam de uma forma mais concisa e organizada de visualizar os dados de seus clientes, ajudando-os a ganhar agilidade e precisão em reuniões, no alinhamento entre equipes e na tomada de decisões.

Esses dados estavam distribuídos entre diferentes planilhas, alimentadas por automações de coleta de dados provenientes de outras fontes. As informações incluíam carteiras de clientes, ativos de investimento, valores alocados em cada investimento, comissões de vendas, ROA (Return on Assets), rentabilidade e estratégias de compra e venda dos clientes operadas por serviços de robôs de trading de terceiros.

Processo

Processo

Processo

Em conjunto com as equipes, decidi criar um dashboard que unificasse todas essas diferentes fontes e oferecesse uma interface capaz de atender às principais necessidades tanto dos assessores quanto do time de gestão.

Iniciei o processo entrevistando as lideranças das equipes e desenvolvi um protótipo de baixa fidelidade no Figma, para validarmos se as informações certas estavam sendo apresentadas nos lugares adequados. Após algumas rodadas de iteração, finalizei um protótipo de alta fidelidade, que serviu como base para o desenvolvimento do front-end da aplicação.

Decisões

Decisões

Decisões

Transformar o protótipo em um produto funcional foi o momento em que fui além do meu escopo habitual. Desenvolvi a aplicação com Claude Code, o que tornou viável chegar a um MVP funcional, em vez de parar em um protótipo clicável.

O uso de Next.js com Tailwind e shadcn/ui me permitiu manter controle sobre as decisões visuais definidas no protótipo durante a implementação, ao mesmo tempo em que trabalhava com um banco de dados legado já utilizado pela mesa. A aplicação foi hospedada na Vercel, por meio de um link privado, e a equipe passou a testá-la em seus fluxos de trabalho do dia a dia.

O código foi desenvolvido com o nível de maturidade esperado para um MVP e cumpriu seu papel como ferramenta interna. Antes de chegar a um ambiente de produção completo, ele passaria por uma revisão de engenharia.

As entrevistas com as lideranças dos squads definiram não apenas o que o dashboard deveria mostrar, mas também, de forma igualmente importante, o que deveria ficar de fora. Os filtros foram estruturados a partir das perguntas que as pessoas realmente faziam durante as reuniões, e não simplesmente com base na estrutura dos dados disponíveis.

Duas funcionalidades surgiram somente depois que o MVP já estava em uso: notificações sobre estratégias ativas e próximas do vencimento, já que o acompanhamento das datas de expiração era importante para o time de gestão; e uma seção de observações, para que decisões e alertas pudessem ser registrados junto aos próprios dados, em vez de ficarem dispersos em outras ferramentas.

MVP Screenshots

MVP Screenshots

MVP Screenshots

Vamos trabalhar juntos

Vamos trabalhar juntos

Vamos trabalhar juntos

Fale sobre seu projeto.

Envie uma mensagem: beravila23@gmail.com

Fale sobre seu projeto.

Envie uma mensagem: beravila23@gmail.com

Fale sobre seu projeto.

Envie uma mensagem: beravila23@gmail.com

© Bernard Ávila

Privacy Policy

Keep in touch

© Bernard Ávila

Privacy Policy

Keep in touch

© Bernard Ávila

Privacy Policy

Keep in touch

© Bernard Ávila

Privacy Policy

Keep in touch