On The Go – Consumer Insights Platform
On The Go – Consumer Insights Platform
Design System para Performance & Usabilidade.
Design System para Performance & Usabilidade.
Desenvolvendo um Design System proprietário para otimizar fluxos e diminuir a carga cognitiva na criação de pesquisas complexas.
Desenvolvendo um Design System proprietário para otimizar fluxos e diminuir a carga cognitiva na criação de pesquisas complexas.
Resumo
Na On The Go, capacitamos pesquisadores de mercado a elaborar pesquisas conversacionais.
Ao projetar um Design System proprietário para nossa ferramenta de criação de pesquisas, transformamos uma interface densa e com problemas de feedback em uma experiência simplificada e intuitiva — reduzindo erros e aumentando a eficiência até mesmo para os scripts mais complexos.
Meu papel
Como Ux Designer à frente do projeto, desenvolvi o redesign da ferramenta de criação de pesquisas chamada Builder. Com um Produto mais maduro e uma equipe de desenvolvimento fortalecida, o momento era ideal para uma reformulação completa. Minhas responsabilidades incluíram:
Conduzir entrevistas aprofundadas com os redatores e stakeholders para compreender os pontos problemáticos;
Estabelecer a base para um novo sistema de design proprietário;
Desenvolver e testar protótipos da nova interface;
Criar documentação detalhada para a futura implementação.
Produto
survey Builder On The Go
Entregáveis
Design System On the go
Ferramentas
Figma
Time
1 Product Designer
2 Front-End Developer
1 Back-end Developer
1 Product Manager
Habilidades
Visual & ui design
Atomic Design
user research
Information Architecture
Interaction design
interface prototype
[O desafio]
Quando Ferramentas enfrentam demandas complexas.
O Builder, utilizado pelos nossos especialistas em pesquisa enfrentava dificuldades para atender às crescentes demandas de projetos de pesquisa de mercado cada vez mais volumosos e sofisticados.
Inicialmente construída com Material UI, a ferramenta funcionava bem para pesquisas menores, mas revelou limitações ao lidar com roteiros maiores com múltiplos tipos de perguntas, lógica de ramificação e fluxos densos.
Principais problemas.
Desempenho degradado
Os redatores esperavam por volta de 20 minutos para carregar as páginas antes de iniciar o trabalho. Edições e mover blocos causava muitos delays no workflow.
Falta de feedback
Os usuários não conseguiam confirmar facilmente se suas ações haviam sido salvas ou processadas corretamente, gerando desconfiança na ferramenta.
Interface poluída
Roteiros longos se tornavam difíceis de gerenciar sem uma visão clara do fluxo do diálogo.
Essas limitações se tornaram críticas à medida que nossas pesquisas aumentaram em complexidade — algumas ultrapassando 50+ perguntas com diversas lógicas e funis.
As falhas da ferramenta impactavam diretamente a criação das pesquisas, desperdiçavam tempo de produção e geravam frustração nos usuários.
Nosso time de front-end concluiu que o Material UI, embora eficiente para interfaces mais simples, era pesado demais para nossas necessidades em evolução.
O Projeto.
Em vez de tentar remendar os problemas, focamos em criar um Design System personalizado do zero para melhor atender às nossas demandas específicas.
Compreendendo a Complexidade.
Compreendendo a Complexidade.
A ferramenta suportava mais de 16 tipos de perguntas, cada uma adaptada a diferentes metodologias de pesquisa, e apresentava duas visualizações distintas.
[Modo roteiro]
Uma interface limpa e semelhante a um editor de texto, focada no conteúdo.
[modo bot]
Repleta de opções para fluxos, saltos condicionais e lógicas de ramificação.
Entrevistas com redatores e stakeholders para decodificar termos técnicos como “funil”, “peso da opção” e “opções de ordenação”.
Identificação de tarefas repetitivas e soluções alternativas que os usuários criaram para contornar limitações da interface.
Mapeamento de todos os tipos de perguntas e seus componentes para construir um panorama claro dos blocos essenciais
Unificando Design com Princípios Atômicos.
Unificando Design com Princípios Atômicos.
Nosso objetivo era expandir o Design System que já estava sendo refinado em outras partes do aplicativo, onde havíamos começado a migrar do Material UI para uma interface própria.
Introduzido melhorias na UI, maior aderência às heurísticas de usabilidade e funcionalidades aprimoradas — refletindo a rápida evolução do produto.
Para lidar com a complexidade da ferramenta de criação de pesquisas, adotei uma abordagem de design atômico.
Dividindo a UI em componentes reutilizáveis e escaláveis, desde elementos básicos (botões, campos de entrada) até estruturas complexas (cards de perguntas) garantindo consistência.
Construindo um Design System Completo.
Paleta de cores.
Adaptei o esquema existente do aplicativo, migrando dos tons escuros e densos do Material UI para uma paleta mais clara e organizada, com escolhas semânticas:
Cores específicas para containers (divs, cards) para definir a estrutura
Cores distintas para conteúdo (textos, ícones, elementos interativos) para melhorar a clareza
Essa mudança reduziu a fadiga ocular dos redatores que passam horas na ferramenta
Switch Tabs.
Componentes flexíveis que suportavam ícones, texto ou ambos, escalando de 2 a 4 itens para personalização mais rápida das perguntas do que dropdowns tradicionais.
Floating Switch.
Um elemento persistente que seguia os usuários enquanto rolavam a página, permitindo alternar rapidamente entre os modos Script e Bot sem ocupar espaço vertical valioso.
Figma File.
Figma file.
Status Atual & Próximos Passos
Finalizamos com sucesso as fases de design e documentação deste projeto.
Agora, a implementação está em andamento, com a equipe de desenvolvimento dando vida a esses componentes.
Quando implementado, esse redesign permitirá que os redatores criem pesquisas mais complexas e sofisticadas com mais eficiência e menos erros, possibilitando a coleta de dados de maior qualidade para pesquisas conversacionais.
[O desafio]
Quando Ferramentas enfrentam demandas complexas.
O Builder, utilizado pelos nossos especialistas em pesquisa enfrentava dificuldades para atender às crescentes demandas de projetos de pesquisa de mercado cada vez mais volumosos e sofisticados.
Inicialmente construída com Material UI, a ferramenta funcionava bem para pesquisas menores, mas revelou limitações ao lidar com roteiros maiores com múltiplos tipos de perguntas, lógica de ramificação e fluxos densos.
Principais problemas.
Desempenho degradado
Os redatores esperavam por volta de 20 minutos para carregar as páginas antes de iniciar o trabalho. Edições e mover blocos causava muitos delays no workflow.
Falta de feedback
Os usuários não conseguiam confirmar facilmente se suas ações haviam sido salvas ou processadas corretamente, gerando desconfiança na ferramenta.
Interface poluída
Roteiros longos se tornavam difíceis de gerenciar sem uma visão clara do fluxo do diálogo.
Essas limitações se tornaram críticas à medida que nossas pesquisas aumentaram em complexidade — algumas ultrapassando 50+ perguntas com diversas lógicas e funis.
As falhas da ferramenta impactavam diretamente a criação das pesquisas, desperdiçavam tempo de produção e geravam frustração nos usuários.
Nosso time de front-end concluiu que o Material UI, embora eficiente para interfaces mais simples, era pesado demais para nossas necessidades em evolução.
O Projeto.
Em vez de tentar remendar os problemas, focamos em criar um Design System personalizado do zero para melhor atender às nossas demandas específicas.
Compreendendo a Complexidade.
A ferramenta suportava mais de 16 tipos de perguntas, cada uma adaptada a diferentes metodologias de pesquisa, e apresentava duas visualizações distintas.
[Modo roteiro]
Uma interface limpa e semelhante a um editor de texto, focada no conteúdo.
[modo bot]
Repleta de opções para fluxos, saltos condicionais e lógicas de ramificação.
Entrevistas com redatores e stakeholders para decodificar termos técnicos como “funil”, “peso da opção” e “opções de ordenação”.
Identificação de tarefas repetitivas e soluções alternativas que os usuários criaram para contornar limitações da interface.
Mapeamento de todos os tipos de perguntas e seus componentes para construir um panorama claro dos blocos essenciais
Unificando Design com Princípios Atômicos.
Nosso objetivo era expandir o Design System que já estava sendo refinado em outras partes do aplicativo, onde havíamos começado a migrar do Material UI para uma interface própria.
Introduzido melhorias na UI, maior aderência às heurísticas de usabilidade e funcionalidades aprimoradas — refletindo a rápida evolução do produto.
Para lidar com a complexidade da ferramenta de criação de pesquisas, adotei uma abordagem de design atômico.
Dividindo a UI em componentes reutilizáveis e escaláveis, desde elementos básicos (botões, campos de entrada) até estruturas complexas (cards de perguntas) garantindo consistência.
Construindo um Design System Completo.
Paleta de cores.
Adaptei o esquema existente do aplicativo, migrando dos tons escuros e densos do Material UI para uma paleta mais clara e organizada, com escolhas semânticas:
Cores específicas para containers (divs, cards) para definir a estrutura
Cores distintas para conteúdo (textos, ícones, elementos interativos) para melhorar a clareza
Essa mudança reduziu a fadiga ocular dos redatores que passam horas na ferramenta
Switch Tabs.
Componentes flexíveis que suportavam ícones, texto ou ambos, escalando de 2 a 4 itens para personalização mais rápida das perguntas do que dropdowns tradicionais.
Floating Switch.
Um elemento persistente que seguia os usuários enquanto rolavam a página, permitindo alternar rapidamente entre os modos Script e Bot sem ocupar espaço vertical valioso.
Figma File.
Status Atual & Próximos Passos
Finalizamos com sucesso as fases de design e documentação deste projeto.
Agora, a implementação está em andamento, com a equipe de desenvolvimento dando vida a esses componentes.
Quando implementado, esse redesign permitirá que os redatores criem pesquisas mais complexas e sofisticadas com mais eficiência e menos erros, possibilitando a coleta de dados de maior qualidade para pesquisas conversacionais.
[O desafio]
Quando Ferramentas enfrentam demandas complexas.
O Builder, utilizado pelos nossos especialistas em pesquisa enfrentava dificuldades para atender às crescentes demandas de projetos de pesquisa de mercado cada vez mais volumosos e sofisticados.
Inicialmente construída com Material UI, a ferramenta funcionava bem para pesquisas menores, mas revelou limitações ao lidar com roteiros maiores com múltiplos tipos de perguntas, lógica de ramificação e fluxos densos.
Principais problemas.
Desempenho degradado
Os redatores esperavam por volta de 20 minutos para carregar as páginas antes de iniciar o trabalho. Edições e mover blocos causava muitos delays no workflow.
Falta de feedback
Os usuários não conseguiam confirmar facilmente se suas ações haviam sido salvas ou processadas corretamente, gerando desconfiança na ferramenta.
Interface poluída
Roteiros longos se tornavam difíceis de gerenciar sem uma visão clara do fluxo do diálogo.
Essas limitações se tornaram críticas à medida que nossas pesquisas aumentaram em complexidade — algumas ultrapassando 50+ perguntas com diversas lógicas e funis.
As falhas da ferramenta impactavam diretamente a criação das pesquisas, desperdiçavam tempo de produção e geravam frustração nos usuários.
Nosso time de front-end concluiu que o Material UI, embora eficiente para interfaces mais simples, era pesado demais para nossas necessidades em evolução.
O Projeto.
Em vez de tentar remendar os problemas, focamos em criar um Design System personalizado do zero para melhor atender às nossas demandas específicas.
Compreendendo a Complexidade.
A ferramenta suportava mais de 16 tipos de perguntas, cada uma adaptada a diferentes metodologias de pesquisa, e apresentava duas visualizações distintas.
[Modo roteiro]
Uma interface limpa e semelhante a um editor de texto, focada no conteúdo.
[modo bot]
Repleta de opções para fluxos, saltos condicionais e lógicas de ramificação.
Entrevistas com redatores e stakeholders para decodificar termos técnicos como “funil”, “peso da opção” e “opções de ordenação”.
Identificação de tarefas repetitivas e soluções alternativas que os usuários criaram para contornar limitações da interface.
Mapeamento de todos os tipos de perguntas e seus componentes para construir um panorama claro dos blocos essenciais
Unificando Design com Princípios Atômicos.
Nosso objetivo era expandir o Design System que já estava sendo refinado em outras partes do aplicativo, onde havíamos começado a migrar do Material UI para uma interface própria.
Introduzido melhorias na UI, maior aderência às heurísticas de usabilidade e funcionalidades aprimoradas — refletindo a rápida evolução do produto.
Para lidar com a complexidade da ferramenta de criação de pesquisas, adotei uma abordagem de design atômico.
Dividindo a UI em componentes reutilizáveis e escaláveis, desde elementos básicos (botões, campos de entrada) até estruturas complexas (cards de perguntas) garantindo consistência.
Construindo um Design System Completo.
Paleta de cores.
Adaptei o esquema existente do aplicativo, migrando dos tons escuros e densos do Material UI para uma paleta mais clara e organizada, com escolhas semânticas:
Cores específicas para containers (divs, cards) para definir a estrutura
Cores distintas para conteúdo (textos, ícones, elementos interativos) para melhorar a clareza
Essa mudança reduziu a fadiga ocular dos redatores que passam horas na ferramenta
Switch Tabs.
Componentes flexíveis que suportavam ícones, texto ou ambos, escalando de 2 a 4 itens para personalização mais rápida das perguntas do que dropdowns tradicionais.
Floating Switch.
Um elemento persistente que seguia os usuários enquanto rolavam a página, permitindo alternar rapidamente entre os modos Script e Bot sem ocupar espaço vertical valioso.
Figma File.
Status Atual & Próximos Passos
Finalizamos com sucesso as fases de design e documentação deste projeto.
Agora, a implementação está em andamento, com a equipe de desenvolvimento dando vida a esses componentes.
Quando implementado, esse redesign permitirá que os redatores criem pesquisas mais complexas e sofisticadas com mais eficiência e menos erros, possibilitando a coleta de dados de maior qualidade para pesquisas conversacionais.
