Tags Web

Tempo é dinheiro, mas só se alguém conseguir enxergar a conta.

Case de Product Design: TrueValue, a plataforma que transforma horas trabalhadas em uma visão clara de custo e rentabilidade por cliente, projeto e pessoa.

A TrueValue é uma plataforma SaaS de gestão de projetos focada em custo e tempo. Em vez de só registrar horas, ela ajuda gestores a identificar rapidamente gargalos e ineficiências, cruzando dashboards em tempo real com dados de equipe, cliente e projeto,informação que antes vivia espalhada em planilhas.

Ano

2020 – 2022

Escopo

UX/UI, Design System

Produto

Plataforma SaaS (web + mobile)

Sede

Brasil

A plataforma anterior da empresa já tinha uso real, mas parou de acompanhar o crescimento do negócio. Na etapa de pesquisa, três frustrações apareceram com força entre os gestores:

Sistema engessado

A ferramenta antiga parecia datada e não tinha flexibilidade para escalar junto com a demanda crescente de contas e projetos.

Métrica escondida

Indicadores importantes ficavam difíceis de encontrar ou de interpretar, dificultando o acompanhamento de performance num relance.

Análise manual demais

Gestores perdiam tempo demais cruzando dados manualmente só para identificar um gargalo ou uma ineficiência pontual.

Carla Martins, 37 anos

Atua com Tecnologia & Desenvolvimento de Produto, com mais de 10 anos gerenciando times multidisciplinares. Tem alta proficiência técnica,está confortável com ferramentas digitais, mas exige um design limpo e fácil de usar.

Carla lidera um time de desenvolvimento de produto e supervisiona vários projetos ao mesmo tempo. Ela precisa de acesso rápido a dados confiáveis para manter os projetos nos trilhos, gerenciar prazos e reportar para a diretoria. Valoriza ferramentas fáceis de usar, visualmente claras, que ajudem a decidir melhor sem desperdiçar tempo.

O Toggl Track foi um dos principais pontos de referência da pesquisa, não como concorrente direto, mas como o padrão-ouro de simplicidade em rastreamento de tempo: timer de um clique, sincronização entre dispositivos e relatórios de rentabilidade por cliente.

A diferença de contexto é o que definiu o rumo do produto. O Toggl nasceu para quem precisa apertar "play" num timer. A TrueValue nasceu para quem gerencia uma carteira inteira de contas corporativas ao mesmo tempo,no caso da pesquisa, dezenas de projetos simultâneos com empresas como Shell, BMW, Klabin, Ambev e Cargill. Isso pedia uma camada de gestão que o Toggl não se propõe a resolver:

Hierarquia organizacional

Departamentos e subgrupos com custo e horas consolidados por camada, não só por pessoa ou projeto isolado.

Rentabilidade, não só horas

Visão de ganho vs. gasto, produtivo vs. improdutivo, por cliente,a pergunta não é "quanto tempo", é "isso está dando lucro?"

Pipeline de tarefas integrado

Kanban com fluxo de aprovação nativo, sem depender de uma ferramenta separada por fora do rastreamento de tempo.

Roadmap executivo

Visão Gantt de todos os projetos e pessoas ao mesmo tempo, pensada para quem responde à diretoria, não só para quem bate o ponto.

1. Research

Brainstorming, benchmark e análise de concorrentes (incluindo o Toggl) para mapear o que já existia no mercado.

2. Prototyping

Userflow, wireframes e prototipagem das telas principais antes de qualquer decisão visual.

3. UX/UI Design

Conceito visual, Design System e componentes,a espinha dorsal que sustenta o restante do produto.

4. Delivery

Correções finais e testes de usabilidade com os próprios gestores que usariam o painel no dia a dia.

O Dashboard é o hub central: alterna entre visão de Custo e de Horas, permite filtrar por mês e exibe o panorama de todos os projetos ativos num único gráfico de barras,cada barra é um cliente (Shell, BMW, Transpetro, Riachuelo, Gerdau, Bradespar, Klabin, Ambev, Usiminas, Cargill), com tooltip mostrando o ganho e o gasto daquele projeto específico.

Dashboard da TrueValue em monitor desktop, com gráfico de projetos por cliente e indicadores de produtividade

Abaixo do gráfico principal, quatro indicadores resumem a saúde financeira do período,Produtivo, Improdutivo, Passivos (Liabilities) e Indefinido,cada um com percentual e valor em reais. Na sequência, o "Custo por Usuário" quebra o mesmo raciocínio por pessoa, e "Atividades dos Usuários" traz o feed de tarefas recém-concluídas, com nome de quem fez e em qual conta.

Dashboard completo da TrueValue mostrando custo por usuário e atividades recentes da equipe

Para times que crescem, enxergar o custo individual não basta,é preciso ver o custo do Front-End, do Back-End, do time de Dados, e como isso rola para cima até o departamento de Desenvolvimento como um todo. A tela de Grupos organiza isso como uma árvore expansível: departamento → subgrupo → pessoa, cada nível com seu próprio custo e horas consolidados.

Visualização em árvore de grupos e departamentos da TrueValue, com custo e horas por subgrupo e por pessoa

As tarefas de cada projeto vivem num quadro estilo Kanban,Em andamento, Atrasadas, Aguardando e Concluídas,com o rosto de quem está responsável em cada card. Ao abrir uma tarefa, o gestor vê o histórico completo: quem registrou, quem submeteu para aprovação, arquivos anexados e as ações de "Devolver" ou "Aprovar" direto ali, sem sair da tela.

Pipeline de tarefas em formato Kanban da TrueValue, com modal de aprovação de tarefa aberto

Cada projeto tem um anel de progresso combinando três eixos ao mesmo tempo,orçamento usado, horas consumidas e checklist de entregas,visível já na listagem, antes mesmo de abrir o projeto. Dentro dele, um gráfico de rosca detalha quanto cada pessoa da equipe está consumindo do orçamento total, e tags livres (Sustentabilidade, ESG, Logística, SaaS, VueJS) ajudam a categorizar o trabalho para buscas futuras.

Página de projetos da TrueValue com listagem de contas e detalhe do projeto Klabin com orçamento, horas e visualização de custo

A tela de Usuários trata cada pessoa como uma unidade de custo rastreável: valor da hora, tarefas concluídas, tarefas em aberto e tempo médio por tarefa, com um histórico visual de custo e horas ao longo dos meses. É a peça que fecha o ciclo,o Dashboard mostra o todo, os Grupos mostram o time, e aqui aparece o indivíduo.

Tela de gestão de usuários da TrueValue com dados pessoais, tarefas concluídas e histórico de custo

O Roadmap organiza todos os projetos e pessoas numa linha do tempo mensal ou semanal, com barras coloridas por colaborador dentro de cada projeto expandido. É a visão que um diretor pede na reunião de segunda-feira: "o que está em andamento, e até quando".

Roadmap em formato Gantt da TrueValue, com projetos e colaboradores organizados por mês

No mobile, o Dashboard, o menu de perfil (com cargo e badge de "Team Leader"), o detalhe do projeto e a lista de projetos arquivados seguem exatamente a mesma lógica de informação do desktop,só reorganizada em telas únicas e navegação por gaveta lateral, para o gestor que precisa checar um número entre uma reunião e outra.

Telas mobile da TrueValue: dashboard, menu de perfil, detalhe de projeto e projetos arquivados

Para sustentar consistência entre desktop, mobile e as dezenas de variações de card e gráfico do produto, foi construído um Design System dedicado,o TrueCore. Ele define a tipografia (Roboto, nos pesos Regular e Bold) e uma paleta pensada para funcionar sobre fundo escuro, onde cada cor carrega um significado semântico dentro dos dashboards.

Azul,dados e navegação
Verde-água,produtivo
Amarelo,atenção / passivo
Coral,improdutivo / erro
Roxo,destaque
Azul-marinho,superfícies
Quase-preto,fundo base

A escolha de fundo escuro por padrão não foi só estética: numa ferramenta que fica aberta o dia inteiro na tela de um gestor, alternando entre gráficos e listas de números, o contraste reduzido cansa menos a vista do que um branco puro em uso prolongado.

Como o objetivo declarado era reduzir o esforço para extrair um insight, as metas de sucesso do projeto giraram em torno de tempo de decisão, não só satisfação de uso:

MétricaO que mede
Tempo até identificar um projeto deficitárioDo login até localizar a conta com maior gasto sobre ganho
Consolidação de contas num único painelNúmero de clientes corporativos visíveis sem trocar de tela
Adoção do checklist de projeto% de projetos que passam a usar orçamento + horas + checklist juntos
Uso do app mobile pela liderançaFrequência de acesso fora do horário comercial

Contato

Interessado em trabalhar comigo?

Me chame pelo LinkedIn