Embedded Files
Resumo
Neste projeto foi feito o redesign da funcionalidade voltada à gravação e transcrição automática de videoconferências. A ideia foi centralizar tudo em um só lugar — transcrições, comentários e os insights gerados por IA — facilitando a consulta e o uso desses dados no dia a dia das equipes.
Após mapear as principais fricções com usuários, analisar dados de vendas e suporte, e fazer um benchmark com players como Fireflies e tl;dv, redesenhamos todo o fluxo em parceria com o time de engenharia.
Um dos principais ganhos foi a economia de tempo na gestão dessas informações: os usuários agora acessam reuniões passadas com transcrição integrada, compartilham trechos com facilidade e recebem e-mails automáticos com resumos — o que antes exigia tempo manual de organização e envio.
A solução também trouxe impacto comercial, sendo usada como diferencial em negociações. Mesmo sem métricas quantitativas formais, observamos adoção espontânea e um aumento claro na satisfação dos usuários.
Objetivo
O objetivo deste projeto foi centralizar e otimizar o acesso a informações geradas em reuniões — como gravações, transcrições e insights por IA — reduzindo o tempo gasto na gestão e compartilhamento desses dados, melhorando a eficiência e o aproveitamento comercial do conteúdo.
A meta era transformar essas informações em algo facilmente acessível, acionável e útil para diferentes times (vendas, suporte, produto), aumentando o valor percebido da ferramenta e sua competitividade no mercado.
Desafio
O desafio central deste projeto foi transformar um processo fragmentado e pouco eficiente de gestão de reuniões — com gravações, transcrições e anotações dispersas — em uma experiência unificada, intuitiva e que economizasse tempo para os usuários.
Isso exigiu repensar não apenas a interface, mas também o fluxo de uso e a integração entre funcionalidades, equilibrando viabilidade técnica com usabilidade real, especialmente em um cenário com múltiplas fontes de informação e limitações operacionais.
Meu Papel
● Mapeamento de fricções: Levantamento de dores e obstáculos com base em entrevistas, suporte e comportamento de uso.
● Benchmarking: Análise de concorrentes diretos (como Fireflies e tl;dv) para identificar boas práticas e oportunidades.
● Redefinição do fluxo de uso: Reestruturação completa da jornada do usuário para tornar o acesso às transcrições e insights mais intuitivo.
● Criação de protótipos: Desenvolvimento de interfaces interativas com foco em clareza, rapidez de consulta e integração com o player de vídeo.
● Colaboração com engenharia: Alinhamento contínuo com o time técnico para garantir viabilidade e eficiência na implementação.
● Otimização de tempo de gestão: Soluções que reduziram etapas manuais (como e-mails e organização de anotações) com automações e centralização.
● Validação com usuários: Coleta de feedback e ajustes com base em testes informais para garantir aderência às necessidades reais.
● Apoio a times de vendas: Criação de recursos que se tornaram argumentos comerciais para diferenciação do produto.
Processo de Pesquisa
Visão anterior da funcionalidade
Por se tratar de um processo de redesign, foi fundamental documentar a visão do produto na sua versão atual. Essa análise permitiu identificar pontos de fricção na experiência do usuário e mapear oportunidades de melhoria, servindo como base para decisões mais assertivas ao longo do projeto.
Levantamento de dados
Com o objetivo de embasar de forma sólida as decisões tomadas durante o desenvolvimento desta funcionalidade, foram analisados dados provenientes dos setores de Suporte, Vendas e Pós-Vendas.
Essa investigação permitiu mapear os principais desafios enfrentados pelos usuários e identificar os pontos mais críticos da jornada, garantindo que as melhorias propostas estejam alinhadas com as reais necessidades dos clientes e com os feedbacks recebidos ao longo do tempo.
Benchmarking
Esta etapa teve como foco a identificação de oportunidades de melhoria nos processos e na interface do produto, por meio de uma análise comparativa com empresas de segmentos semelhantes.
O objetivo foi mapear boas práticas de mercado que possam ser incorporadas à nossa solução, reduzindo fricções na experiência do usuário e aumentando a eficiência do uso. Como referência, foram avaliadas plataformas como Apollo, Fireflies, tl;dv e Bluedot.
Alinhamento com Engenharia
Desde o início do projeto, priorizei uma conexão constante entre Design e Desenvolvimento, com o objetivo de antecipar possíveis limitações técnicas e, junto ao time, encontrar as melhores alternativas para contorná-las.
Essa abordagem tem sido essencial para garantir viabilidade técnica, reduzir retrabalho e manter o alinhamento entre a proposta de valor e sua implementação.
Descobertas & Definições
A partir da análise consolidada de todas as informações levantadas nas etapas anteriores, incluindo referências de mercado, dados internos e validações com os times, sintetizei os principais aprendizados e direcionamentos estratégicos nos seguintes pontos-chave:
1) Informações úteis
Na versão anterior da tela, não era possível acessar o conteúdo das gravações, apenas o registro de que a videoconferência havia ocorrido. Essa limitação comprometia a rastreabilidade e dificultava o resgate de informações relevantes.
2) Integração eficiente
Ligações e videochamadas realizadas por meio de outras ferramentas não eram integradas nem exibidas nessa tela, o que fragmentava a visualização do histórico de interações e dificultava o acompanhamento do relacionamento com o cliente.
3) Decisões estratégicas
Os dados de transcrição das gravações, assim como os insights gerados a partir delas, não eram exibidos na interface anterior. Essa ausência limitava o aproveitamento das informações extraídas das reuniões, impactando negativamente na tomada de decisão e no acompanhamento estratégico das interações.
4) Alinhamento prejudicado
A interface anterior não oferecia a possibilidade de compartilhar, de forma estruturada, os dados obtidos durante a reunião com os participantes. Isso comprometia a troca de informações relevantes, dificultava o alinhamento entre as partes envolvidas e reduzia o valor colaborativo das interações.
5) Visibilidade centralizada
Havia uma dificuldade significativa para que os gestores das equipes de vendas acompanhassem as negociações em andamento. A falta de visibilidade centralizada limitava o monitoramento do progresso, a identificação de gargalos e a atuação proativa nas oportunidades estratégicas.
6) Eficiência na operação
Era necessário assistir à gravação completa das reuniões para identificar os pontos mais relevantes, o que tornava o processo demorado e ineficiente. Essa limitação dificultava o acesso rápido a informações-chave e comprometia a agilidade na tomada de decisão.
7) Escalabilidade
Para acessar o conteúdo das gravações, era necessário abrir individualmente cada card no pipeline, o que tornava a consulta lenta e pouco escalável. Essa limitação impactava a produtividade e dificultava uma visão abrangente das interações registradas.
8) Efeito viral
Gerar efeito de viralização entre os participantes das reuniões, estimulando o compartilhamento espontâneo da funcionalidade e ampliando sua adoção de forma orgânica. Essa abordagem visa transformar cada reunião em um ponto de disseminação da solução, impulsionando o engajamento e a visibilidade do produto.
Softwares & Ferramentas
Durante a criação do projeto, utilizamos ferramentas estratégicas para garantir eficiência e alinhamento entre as equipes:
▪️Figma para prototipagem em alta fidelidade, handoff com desenvolvedores e documentação de uso;
▪️GitHub para gerenciamento e documentação da funcionalidade;
▪️Productboard para o levantamento de requisitos e planejamento do roadmap.
O Protótipo
O protótipo final desta funcionalidade foi desenvolvido alinhado às expectativas dos stakeholders, à análise de benchmarks de mercado e a insights gerados a partir de uma escuta ativa dos clientes, considerando feedbacks, comportamentos de uso e os principais pontos de fricção identificados.
Como resultado, entregamos uma solução robusta, com um padrão visual consistente e plenamente conectada às necessidades do negócio e à experiência esperada pelo usuário.
Tela Inicial
A tela inicial foi desenvolvida com base nos padrões visuais do Design System da Leads2b e alinhada às interfaces já existentes no sistema, garantindo consistência visual e preservando a familiaridade da experiência para o usuário.
O conteúdo foi organizado em duas abas distintas — uma para agendamentos futuros e outra para os já realizados — com o objetivo de facilitar a navegação e manter o histórico acessível de forma clara e intuitiva.
A resolução de 1280x550 foi adotada como padrão nos mockups após análises detalhadas da área útil de tela dos usuários, utilizando dados da ferramenta LogRocket.
Identificamos que muitos usuários visualizam a plataforma com espaço reduzido devido à presença de elementos como a barra do sistema operacional, barra do navegador e favoritos.
Com essa definição de resolução, conseguimos evitar problemas de quebra de layout em diferentes visualizações, garantindo maior estabilidade e compatibilidade no uso da interface.
Visualização das gravações
A tela de visualização das gravações foi projetada com foco na praticidade e na centralização das informações mais relevantes.
A estrutura permite que o usuário acompanhe a gravação sendo executada, enquanto tem acesso simultâneo a dados como transcrições, comentários, participantes e insights gerados por IA.
Além disso, a interface mantém visíveis os principais dados de negócio — como o deal vinculado (ou não), responsável, data e hora da execução — bem como ações rápidas, como download da gravação, compartilhamento e navegação entre registros.
Na representação a seguir, é possível visualizar um exemplo de gravação vinculada a um negócio, juntamente com os insights gerados por inteligência artificial, disponíveis de forma acessível para análise.
Gravações de Áudio
Com o objetivo de unificar o acesso às gravações dentro da plataforma, foi proposta a inclusão das gravações de ligações em áudio na mesma rotina visual utilizada para as gravações de vídeo. Essa abordagem visa facilitar a navegação do usuário, além de padronizar o formato de apresentação das informações extraídas das gravações, independentemente da modalidade — áudio ou vídeo — promovendo uma experiência mais coesa e eficiente.
A seguir, é possível visualizar um exemplo de gravação vinculada a um negócio, juntamente com os insights gerados por inteligência artificial, disponíveis de forma acessível para análise.
Blank States
Para garantir um melhor alinhamento com a equipe de desenvolvimento e facilitar a implementação, também foram desenvolvidas versões das telas sem dados, ou blank states.
Essas versões têm como objetivo ilustrar de forma clara a estrutura e o comportamento esperado da interface, independentemente do conteúdo exibido. Além disso, a iniciativa contribui para a padronização visual entre as diversas funcionalidades da plataforma, reforçando a consistência da experiência do usuário.
● Tela inicial
● Visualização da gravação
Email de Resumo
Com o intuito de ampliar o alcance do conteúdo da plataforma e engajar os clientes de nossos clientes, foi desenvolvido um e-mail de resumo da gravação.
Esse e-mail contém informações-chave da reunião e inclui diversos gatilhos estratégicos que incentivam o prospect a criar uma conta na plataforma.
Dessa forma, ele passa a ter acesso completo aos dados e funcionalidades, fortalecendo o engajamento e contribuindo para a conversão de novos usuários.
Handoff Design - Engenharia
Para garantir uma comunicação mais eficaz entre as equipes de Design e Engenharia, adotamos uma abordagem colaborativa desde as etapas iniciais de prototipação. Trabalhamos juntos na definição de um escopo viável, considerando tanto a stack tecnológica quanto o tempo disponível para o projeto.
Esse alinhamento antecipado permitiu identificar e ajustar eventuais limitações técnicas ainda na fase de ideação, assegurando que apenas funcionalidades tecnicamente viáveis fossem prototipadas.
Como resultado, o processo se tornou mais fluido, promovendo uma integração real entre designers e desenvolvedores e viabilizando uma comunicação mais transparente, ágil e eficiente ao longo de toda a execução da solução.
O arquivo de protótipos foi estruturado para garantir um entendimento coeso e acessível a todos os perfis envolvidos no projeto — desenvolvedores, designers, product managers e stakeholders.
Os frames estão agrupados em seções conforme suas respectivas funcionalidades, proporcionando uma navegação mais intuitiva. Elementos reutilizados foram devidamente componentizados e organizados na lateral esquerda do arquivo, promovendo consistência visual e facilitando futuras manutenções.
Além disso, setas indicativas foram adicionadas para representar os fluxos de navegação ou ações esperadas, reforçadas por mensagens de Informação, Atenção e Importante, com o objetivo de destacar requisitos específicos que, por alguma razão, não puderam ser completamente prototipados.
Essa organização contribui para uma comunicação mais eficiente entre as equipes e minimiza dúvidas durante o processo de desenvolvimento.
Resultados
Em razão do encerramento do contrato de prestação de serviço, foi possível coletar apenas alguns dados pontuais, que são apresentados a seguir como forma de ilustrar indícios de impacto e uso das novas soluções.
👍🏻 Redução significativa do tempo de gestão
Houve uma redução significativa do tempo de gestão das reuniões, onde os usuários passaram a acessar transcrições, gravações e insights em um único lugar, eliminando tarefas manuais como organização de anotações e envio de resumos que antes necessitavam ser feitos um a um.
👍🏻 Adoção orgânica da funcionalidade
Foi implementado um redirecionamento automático para a página de gravação ao término das reuniões. Essa ação estratégica promoveu a descoberta da nova funcionalidade de forma orgânica pelos usuários e incentivou sua adoção como parte do fluxo natural de uso da plataforma.
👎 Comparação e análise de métricas
O novo menu de acesso foi implementado e disponibilizado inicialmente apenas para uma parcela da base de usuários, como parte de uma liberação controlada. No entanto, essa limitação de abrangência impossibilitou a obtenção de comparativos precisos nas métricas de uso entre a versão anterior e a nova interface.
👍🏻 Aumento da satisfação dos usuários
Clientes que anteriormente haviam registrado tickets com reclamações sobre a rotina antiga demonstraram alta satisfação com a nova funcionalidade implementada. Após a mudança, esses usuários passaram a utilizá-la com frequência, indicando uma melhora significativa na experiência e na percepção de valor da solução.
👎 Ajustes pontuais
A funcionalidade de compartilhamento precisou ser redesenhada após a identificação de dificuldades operacionais por parte dos usuários. Além disso, o e-mail de resumo passou por ajustes para se adequar às limitações técnicas da ferramenta de disparo, garantindo sua entrega e funcionamento corretos dentro dos parâmetros disponíveis.
👍🏻 Ganho de valor comercial
A equipe de vendedores interna passou a utilizar a nova tela como um dos recursos principais nas demonstrações para novos clientes. A funcionalidade tem sido destacada como um diferencial, especialmente por sua usabilidade e pelas vantagens apresentadas em relação à versão anterior, contribuindo para um discurso comercial mais eficaz e alinhado ao valor da solução.
👍🏻 Simplificação do processo e aumento da eficiência
A nova tela viabilizou a melhoria e simplificação de diversos processos relacionados às chamadas, como o vínculo direto com negócios, o registro automatizado de atividades, a possibilidade de cópia segmentada de trechos de texto, a organização das gravações em faixas de áudio, entre outras funcionalidades que tornaram a rotina mais prática e eficiente para os usuários.
Lições & Aprendizados
Durante este projeto, ampliei meus conhecimentos e, a partir dessa reflexão, identifiquei pontos de aprendizado valiosos que contribuirão diretamente para novos projetos.
● Processo e Colaboração
A colaboração entre Design e Engenharia desde as etapas iniciais do projeto foi essencial para alinhar escopo, stack e viabilidade técnica ainda na fase de ideação, otimizando o tempo e evitando retrabalho. Além disso, a adoção de uma comunicação visual clara e bem estruturada com arquivos organizados, uso de componentes e mensagens orientativas, garantiu maior entendimento e fluidez entre todos os envolvidos, incluindo designers, desenvolvedores, PMs e stakeholders.
● Experiência do Usuário
Testar e ajustar com base em feedback contínuo é fundamental para aprimorar a experiência do usuário, como evidenciado nas melhorias nas funcionalidades de compartilhamento e e-mail de resumo, que inicialmente apresentaram barreiras de usabilidade e técnicas. Além disso, pequenas ações, como o redirecionamento automático ao final das reuniões, mostraram ter grande impacto na adoção, incentivando a descoberta e o uso recorrente de novas funcionalidades.
● Métricas e Validação
O acesso contínuo a métricas é crucial para validar decisões de design, já que a falta de dados após o término do contrato impossibilitou uma análise completa dos resultados. Além disso, liberações parciais do novo menu para apenas parte dos usuários dificultaram comparações quantitativas precisas, evidenciando a importância de estratégias de rollout bem planejadas para garantir a coleta eficaz de dados e análises confiáveis.
Obrigado!
Transforme suas ideias em realidade conosco!
Entre em contato e invista em um design revolucionário para seu produto.
Projeto desenvolvido em 2024 - © Todos os direitos reservados.É proibida qualquer reprodução, total ou parcial, cópia ou divulgação deste conteúdo sem expressa autorização do autor.
Conheça outros projetos
Google Sites
Report abuse