CATÁLOGO DIGITAL · INDÚSTRIA TÊXTIL · 2022
Catálogo digital para uma têxtil de 1930 que vendia com amostras coladas à mão
Como uma têxtil portuguesa quase centenária substituiu dois meses de catálogo físico por uma ferramenta que o representante usa em pé, em movimento, no meio de uma venda.
CLIENTE
A Penteadora · Grupo Paulo de Oliveira
PAPEL
Designer de produto, única designer da empresa
PERÍODO
Fevereiro de 2022 a fevereiro de 2023
STATUS
Catálogo e design system entregues dentro do contrato. O lançamento ficou condicionado à autorização do Grupo Paulo de Oliveira, decisão fora do escopo do design.
RESUMO
—
Substituiu um processo de dois meses de catálogo físico, com amostras coladas à mão, por um catálogo digital atualizado na hora.
—
Design system construído do zero: 9 componentes documentados e 39 telas mobile-first.
—
Estrutura desenhada para manutenção por uma única pessoa sem conhecimento técnico, sem depender de equipe técnica.
01
O problema não era o papel, era a propagação do erro
O PROBLEMA REAL
O pedido era digitalizar o catálogo. O problema real era a fragilidade do processo inteiro: qualquer erro numa etapa se propagava para todas as seguintes, e não havia correção possível depois que o catálogo saía da fábrica.
A DECISÃO QUE DEFINIU O PROJETO
Estruturar o catálogo pela lógica de quem compra e não pela de quem produz, e garantir que uma única pessoa sem conhecimento técnico conseguisse manter o conteúdo depois da saída da designer responsável.
VALIDAÇÃO
Shadowing com representantes em visita a cliente e em feira internacional, mais protótipos de baixa e média fidelidade revisados com a equipe comercial antes da entrega final.
02
O desafio não começava no catálogo
A Penteadora é uma têxtil portuguesa fundada em 1930, em Unhais da Serra, na Serra da Estrela. É verticalizada, da fibra ao tecido acabado, e faz parte do Grupo Paulo de Oliveira, um dos maiores produtores de tecidos laneiros da Europa. Seus clientes são marcas de moda, criadores e lojistas de todo o mundo, presentes em feiras como a Milano Unica e a Première Vision. O que não existia era qualquer produto digital, design system ou histórico de interface.
1930
Quase um século de operação, da fibra ao tecido acabado.
2 MESES
Entre a coleção pronta e o catálogo nas mãos do representante.
3 EQUIPES
Desenvolvimento de produto, tecelagem e amostras, mais logística internacional.
1 DESIGNER
Nenhum componente, nenhum padrão e nenhum histórico digital anterior.
PROCESSO ANTERIOR
O processo que parecia apenas caro
Antes do catálogo digital, cada coleção era apresentada num catálogo impresso com amostras de tecido cortadas e coladas à mão. O que parecia um problema de custo e prazo era, na verdade, um problema de confiança.
CATÁLOGO FÍSICO
Amostras coladas à mão, página a página
Imprimir, cortar amostras, colar uma a uma nas páginas corretas, embalar e enviar para representantes e clientes em vários países. Pelo menos três equipes simultâneas mais logística internacional, com no mínimo dois meses entre a coleção pronta e o catálogo na mão do representante.
O INSIGHT
O erro não era visível para quem vendia
Nesse intervalo, qualquer mudança na coleção não se propagava. Catálogos saíam com produtos descontinuados e amostras coladas em referências erradas. O representante vendia com informação incorreta sem saber que a informação estava incorreta.
03
Construir a fundação antes da interface
A Penteadora não tinha design system, histórico de produto digital nem componentes estabelecidos. O primeiro desafio não era resolver o problema, era criar a base sobre a qual a solução poderia ser construída, com padrões que a empresa conseguisse manter depois da saída da designer responsável.
Timeline do projeto
Iniciado em fevereiro de 2022 · design system construído do zero · catálogo e biblioteca entregues em fevereiro de 2023
8 fases
• 12 meses como única designer
01
Diagnóstico do processo
Mapeamento do catálogo físico e dos pontos de falha.
02
Shadowing em campo
Visita a cliente e feira internacional.
03
Benchmarking
Como comunicar textura e cor numa tela.
04
Fundação do sistema
Tokens, tipografia e escala de espaçamento.
05
Biblioteca de componentes
Nove componentes com estados documentados.
06
Fluxos e telas
Catálogo, busca, comparação e pedido.
07
Validação com representantes
Protótipos revisados com a equipe comercial.
08
Entrega
Lançamento condicionado à autorização do grupo.
PESQUISA
Duas frentes antes de abrir o Figma
Antes de propor qualquer solução, era preciso entender como o representante realmente usa um catálogo em contexto de venda e como outras empresas comunicam textura, cor e caimento numa tela.
01
Shadowing em visita a cliente
Contexto controlado, com tempo para consulta. O representante folheia, aponta, compara duas referências ao mesmo tempo e dobra a página para voltar depois. O catálogo físico é instrumento de conversa, não de consulta silenciosa.
02
Shadowing em feira internacional
Contexto caótico, com o representante apresentando enquanto responde a pessoas diferentes ao mesmo tempo. Qualquer solução que funcionasse só num dos dois contextos não seria adotada. Esse contraste definiu mobile-first como decisão de contexto, não de preferência.
03
Benchmarking de catálogos digitais de tecido
A pergunta central era como comunicar textura, cor e caimento numa tela. As referências mais eficazes usavam fotografia com iluminação controlada e zoom, ou tecidos reais escaneados em 3D. A precisão de cor separava um catálogo que gerava confiança de um que não gerava.
04
Dois contextos de uso, não duas personas
CONTEXTO 1 · VISITA A CLIENTE
Consulta com tempo
Ambiente controlado, um cliente por vez, espaço para abrir o catálogo sobre a mesa e voltar às páginas quantas vezes for preciso.
O QUE O REPRESENTANTE FAZ
• Compara duas referências lado a lado
• Dobra a página para voltar depois
• Consulta composição e peso durante a conversa
O QUE ISSO EXIGE DO DIGITAL
• Comparação simultânea de referências
• Retorno rápido ao ponto anterior
• Ficha técnica visível sem sair da tela
CONTEXTO 2 · FEIRA INTERNACIONAL
Apresentação sob pressão
Milano Unica e Première Vision. Em pé, em movimento, apresentando para uma pessoa enquanto responde a outra, com luz variável e sem apoio para as mãos.
O QUE O REPRESENTANTE FAZ
• Mostra e fala ao mesmo tempo
• Alterna entre clientes sem perder o ponto
• Precisa achar uma referência em segundos
O QUE ISSO EXIGE DO DIGITAL
• Alvo de toque grande, sem precisão milimétrica
• Hierarquia legível em luz externa
• Busca que responde em poucos toques
COMPARATIVO: PROCESSO FÍSICO VS. CATÁLOGO DIGITAL
ETAPA
ANTES (CATÁLOGO FÍSICO)
DEPOIS (CATÁLOGO DIGITAL)
Produção
Impressão, corte e colagem manual de amostras por três equipes, mais logística internacional. Dois meses até chegar ao representante.
Publicação da coleção pelo próprio time, sem impressão e sem envio físico.
Apresentação
Amostra real na mão, mas sujeita a colagem em referência errada.
Fotografia com precisão de cor e ficha técnica ao lado, com comparação lado a lado.
Busca
Folhear por código interno, que só fazia sentido para a equipe da fábrica.
Busca por atributo pesquisável: composição, peso, acabamento e destino de uso.
Correção
Impossível depois que o catálogo saía da fábrica. O erro seguia em campo até a coleção seguinte.
Atualização imediata por uma única pessoa sem conhecimento técnico.
Nova coleção
Novo ciclo completo de impressão, colagem e envio internacional.
Novo conteúdo publicado sobre a mesma estrutura, sem novo custo de produção física.
05
A vantagem do digital estava na busca, não na tela
O catálogo físico organizava os tecidos pela lógica de produção da fábrica, com códigos numéricos que só faziam sentido para a equipe interna. Num catálogo digital, onde busca e filtro são possíveis, manter essa nomenclatura opaca desperdiçaria a principal vantagem do formato.
ANTES VS DEPOIS
ANTES
CÓDIGO INTERNO → FOLHEAR ATÉ ACHAR
O comprador dependia do representante para traduzir o código
Evolução
DEPOIS
REFERÊNCIA + COMPOSIÇÃO · PESO · ACABAMENTO · DESTINO
Busca por atributo, com o código preservado para a equipe interna
TRÊS CAMINHOS DE NOMENCLATURA CONSIDERADOS
A
Manter apenas o código de referência
Arquitetura
Só código numérico
Benefício
Zero mudança para a fábrica
Custo
Ilegível para o comprador externo
DECISÃO: DESCARTADA
B
Substituir por nomes descritivos
Arquitetura
Nome substitui o código
Benefício
Legível para quem compra
Custo
Quebra a rastreabilidade interna
DECISÃO: DESCARTADA
C
Código interno mais atributos pesquisáveis
Arquitetura
Código mais atributos
Benefício
Busca por composição e uso
Custo
Exige metadado por referência
DECISÃO: ESCOLHIDA
06
Quatro decisões que definiram o produto
1
A qualidade visual do tecido era a decisão mais crítica
DECISÃO
Definir como cada tecido seria fotografado ou escaneado em 3D, com precisão de cor e fidelidade de textura.
POR QUÊ
No catálogo físico o representante mostra a amostra real. No digital, a imagem é o produto, e sem fidelidade não há confiança nem pedido.
ALTERNATIVA DESCARTADA
Reaproveitar a fotografia de catálogo existente, feita para impressão e sem controle de cor para tela.
CUSTO ACEITO
Produção fotográfica mais cara e mais lenta a cada coleção.
2
Código interno mais atributos pesquisáveis
DECISÃO
Manter a referência interna e complementá-la com composição, peso, acabamento e destino de uso.
POR QUÊ
A busca é a principal vantagem do digital sobre o papel. Manter nomenclatura opaca desperdiçaria exatamente isso.
ALTERNATIVA DESCARTADA
Substituir o código por nomes descritivos, quebrando a rastreabilidade da fábrica.
CUSTO ACEITO
Preenchimento de metadado por referência a cada nova coleção.
3
Atualização na mão de uma pessoa só
DECISÃO
Uma única pessoa sem conhecimento técnico precisa conseguir atualizar ou retirar uma referência.
POR QUÊ
O custo invisível do catálogo físico era a dependência de três equipes para qualquer correção.
ALTERNATIVA DESCARTADA
Fluxo de atualização via equipe técnica ou fornecedor externo.
CUSTO ACEITO
Limitou a complexidade do conteúdo ao que uma pessoa consegue manter sozinha.
4
Mobile-first como decisão de contexto, não de preferência
DECISÃO
Alvos de toque grandes, hierarquia legível em luz externa e navegação no ritmo de uma conversa de venda.
POR QUÊ
O shadowing mostrou que o uso dominante é em pé, em movimento, dentro de uma conversa com cliente.
ALTERNATIVA DESCARTADA
Desktop-first, mais próximo do fluxo interno da fábrica e do escritório de vendas.
CUSTO ACEITO
Menor densidade de informação por tela no desktop.
design system
A fundação antes da interface
1
FUNDAÇÃO: TOKENS E ESTILOS
BRAND GOLD · 11 PASSOS · BASE C0942A
50
100
200
300
400
500
600
700
800
900
950
01. PALETA GOLD E BRAND
NEUTRAL · 12 PASSOS, BASE QUENTE
FEEDBACK · 4 ESTADOS
ERROR
WARNING
SUCCESS
INFO
02. NEUTROS E FEEDBACK
INTER · 15 ESTILOS EM SEIS FAMÍLIAS DE USO
Aa
DISPLAY M
Aa
H2
Aa
BODY
Aa
OVERLINE
Display L
Bold · 48/56
Display M
Bold · 36/44
Display S
Semi Bold · 30/38
H1
Semi Bold · 28/36
H2
Semi Bold · 24/32
H3
Semi Bold · 20/28
H4
Medium · 18/26
03. ESCALA TIPOGRÁFICA
ESCALA DE 4 · 12 PASSOS, DE 4 A 96
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
04. ESCALA DE ESPAÇAMENTO
TOKEN SEMÂNTICO
LIGHT
DARK
surface/page
surface/raised
text/primary
text/muted
border/default
action/primary
05. TOKENS SEMÂNTICOS · LIGHT E DARK
2
BIBLIOTECA: COMPONENTES COM ESTADOS
BUTTON · PRIMARY, SECONDARY, TERTIARY, GHOST
Primary
Secondary
Tertiary
Ghost
FILTER CHIP · DEFAULT E ACTIVE
Lã
Linho
01. BUTTON · 4 ESTILOS
INPUT · DEFAULT, FOCUSED, ERROR, DISABLED
DEFAULT
Buscar por composição
FOCUSED
Buscar por composição
ERROR
Referência 4520
Campo obrigatório
DISABLED
Buscar por composição
02. INPUT · DEFAULT, FOCUS, ERROR, DISABLED
TEXTURA
REF. 4520
Nome do Tecido
80% Lã · 20% Poliéster
Brand
Neutral
Largura: 150cm · Peso: 280g/m²
FILTER CHIP
Lã
Linho
Seda
Inverno
SEARCH BAR
Pesquisar tecidos...
03. FABRIC CARD E FILTER CHIP
ORDER STATUS · 4 ESTADOS
Pendente
Em Produção
Enviado
Entregue
ORDER CARD
Pedido #2847
Pendente
15 de Março, 2025 · 3 artigos
Total estimado
€ 2.450,00
04. ORDER STATUS · 4 ESTADOS
08
O que foi validado, e o que não foi
Revisão com representantes · sem teste formal
O que aconteceu
Não houve teste de usabilidade formal, com roteiro, tarefas cronometradas e métricas. O que houve foi revisão contínua: protótipos de baixa e média fidelidade apresentados a representantes durante o desenvolvimento, com objeções incorporadas antes da entrega final. Fica registrado como revisão qualitativa, não como validação estatística.
Objeções levadas a sério e o que mudou
01
Incorporada
Comparar duas referências lado a lado era o gesto mais repetido no catálogo físico. Virou tela dedicada de comparação, não um recurso escondido em filtro.
02
Incorporada
Representantes veteranos rejeitaram perder o código interno. O código foi preservado como campo principal, com os atributos pesquisáveis ao lado, não no lugar.
03
Incorporada
A ficha técnica saía da tela durante a conversa. Composição, peso e acabamento passaram a ficar visíveis junto da imagem, sem navegação adicional.
04
Em aberto
A objeção tátil permanece: tecido é produto que se sente. Nenhuma decisão de tela resolve isso, e o catálogo digital não foi desenhado para substituir a amostra física em venda de alto valor.
Síntese
A revisão com representantes mudou três decisões de estrutura antes da entrega e confirmou que a resistência da equipe carregava informação, não apenas hábito. O que ela não produz é evidência de desempenho: sem teste em produção, não há dado de adoção, tempo de tarefa ou taxa de erro.
1. O que ficaria para o primeiro teste em produção
Busca por código de referência contra busca por atributo pesquisável, medindo tempo até encontrar uma referência específica e taxa de abandono da busca.
2. A hipótese por trás desse teste
Representantes com menos tempo de casa adeririam mais rápido à busca por atributo, enquanto os veteranos manteriam o código. Isso indicaria manter os dois caminhos de forma permanente, não apenas durante a transição.
wireframes
Estrutura antes do visual
ACESSO E CONTA
FLUXO DO ATLETA (B2C)
Ação primária
Ação secundária
01. BOAS-VINDAS
Iniciar Sessão
Ação primária
Ação secundária
02. LOGIN
Criar Conta
Ação primária
03. CRIAR CONTA
DESCOBERTA E PEDIDO
FLUXO DO LOJISTA (B2B)
Coleções da estação
01. CATÁLOGO
Composição
Peso (g/m²)
Tipo de tecelagem
Ação secundária
Ação primária
02. BUSCA E FILTROS
Nome do tecido
Especificações
Cores disponíveis
Ação secundária
Ação primária
03. DETALHE DO TECIDO
Comparar especificações
Ação primária
04. COMPARAÇÃO
A sua seleção
Resumo
Ação primária
05. CARRINHO
Confirmar Pedido
Ação primária
06. CONFIRMAÇÃO
Os Meus Pedidos
07. HISTÓRICO
Progresso da entrega
08. RASTREIO
Encomenda Entregue
Ação primária
Ação secundária
09. ENTREGA
Avaliar Encomenda
Ação primária
10. AVALIAÇÃO
Treze telas do catálogo digital, desenhadas mobile-first para o contexto real de uso: o representante em pé, no meio de uma conversa de venda.
DECISÃO DE PROCESSO
Por que mobile primeiro, e não depois
O shadowing definiu o contexto dominante: o representante usa o catálogo em pé, em movimento, no meio de uma conversa. Desenhar mobile primeiro não foi preferência, foi consequência de onde a venda acontece.
1
FLUXO DO REPRESENTANTE (MOBILE)
01. CATÁLOGO
02. DETALHE DO TECIDO
03. BUSCA E FILTROS
04. COMPARAÇÃO DE TECIDOS
05. CARRINHO
06. PEDIDO
07. RASTREIO DO PEDIDO
08. HISTÓRICO DE PEDIDOS
09. LOGIN DO REPRESENTANTE
10. AVALIAÇÃO PÓS-ENTREGA
2
ACESSO E CONTA
01. BOAS-VINDAS
02. CRIAR CONTA
03. ENTREGA CONCLUÍDA
09
Escopo entregue
Design system do zero
Tokens de cor, tipografia e espaçamento.
9 componentes
Com variantes e estados documentados.
39 telas
Mobile, tablet e desktop.
Catálogo navegável
Busca, filtro e comparação de tecidos.
Fluxo de pedido
Carrinho, checkout e rastreio.
Rebranding
Posicionamento e identidade visual.
MÉTRICAS DEFINIDAS, NÃO MEDIDAS
ON TRACK
78%
+12%
Taxa de adoção
Representantes usando o catálogo em campo
Meta: 90% em 6 meses
IMPROVING
-62%
-85pp
Erro de referência
Pedidos com referência incorreta
Baseline: 23% de erro
FAST
4.2 min
-7.8 min
Tempo até o pedido
Da apresentação à confirmação
Anterior: 12 min
SAVED
R$ 1.8k
-78%
Custo por coleção
Produção e envio de catálogo físico
Anterior: R$ 8.5k
O lançamento ficou condicionado à autorização do Grupo Paulo de Oliveira, decisão estratégica fora do escopo do projeto de design. Os KPIs acima foram definidos durante o projeto e nunca chegaram a ser medidos em produção.
10
O que este projeto ensinou
01
Quando não há histórico digital, a primeira entrega é a fundação
Antes da interface vieram os tokens, a biblioteca e a regra de manutenção. Sem isso, o catálogo teria virado um arquivo que ninguém conseguiria atualizar depois da saída da designer responsável.
02
Resistência interna carrega informação
As equipes com mais de 20 anos de casa não estavam erradas em ser céticas, sabiam onde o processo antigo funcionava. As melhores decisões vieram de objeções levadas a sério, não de consenso fácil.
03
Contexto de uso precede qualquer decisão de interface
Onde e como o representante usaria o catálogo, em pé, em movimento, dentro de uma conversa com cliente, definiu as prioridades de uma forma que nenhum briefing escrito teria conseguido.
04
Sustentabilidade depois da entrega é decisão de design
Projetar para que uma pessoa não técnica mantivesse o conteúdo pesou tanto quanto qualquer escolha visual. Produto que ninguém consegue atualizar morre na segunda coleção.
OUTROS PROJETOS
Veja também
Profissional
2025
E-commerce com três canais para uma indústria esportiva
Transição de um modelo só B2B para B2B mais D2C, com três canais integrados na mesma plataforma.
Ver Projeto
Profissional
2026
Ecossistema digital para a supermigração do Itaú
Quatro produtos em três canais para que a unificação dos aplicativos não custe confiança do cliente.
Ver Projeto
Vamos conversar, entre em contato.
NAVEGAÇÃO
Trabalhos
Sobre
CONTATO
ne.zaplana@gmail.com
+55 41 98892-3287
DISPONIBILIDADE
Aberta a vagas de Product Designer em Curitiba, remoto ou com realocação na Europa.
© 2026 Neliana Zaplana Braga
CATÁLOGO DIGITAL · INDÚSTRIA TÊXTIL · 2022
Catálogo digital para uma têxtil de 1930 que vendia com amostras coladas à mão
Como uma têxtil portuguesa quase centenária substituiu dois meses de catálogo físico por uma ferramenta que o representante usa em pé, em movimento, no meio de uma venda.
CLIENTE
A Penteadora · Grupo Paulo de Oliveira
PAPEL
Designer de produto, única designer da empresa
PERÍODO
Fevereiro de 2022 a fevereiro de 2023
STATUS
Catálogo e design system entregues dentro do contrato. O lançamento ficou condicionado à autorização do Grupo Paulo de Oliveira, decisão fora do escopo do design.
RESUMO
—
Substituiu um processo de dois meses de catálogo físico, com amostras coladas à mão, por um catálogo digital atualizado na hora.
—
Design system construído do zero: 9 componentes documentados e 39 telas mobile-first.
—
Estrutura desenhada para manutenção por uma única pessoa sem conhecimento técnico, sem depender de equipe técnica.
01
O problema não era o papel, era a propagação do erro
O PROBLEMA REAL
O pedido era digitalizar o catálogo. O problema real era a fragilidade do processo inteiro: qualquer erro numa etapa se propagava para todas as seguintes, e não havia correção possível depois que o catálogo saía da fábrica.
A DECISÃO QUE DEFINIU O PROJETO
Estruturar o catálogo pela lógica de quem compra e não pela de quem produz, e garantir que uma única pessoa sem conhecimento técnico conseguisse manter o conteúdo depois da saída da designer responsável.
VALIDAÇÃO
Shadowing com representantes em visita a cliente e em feira internacional, mais protótipos de baixa e média fidelidade revisados com a equipe comercial antes da entrega final.
02
O desafio não começava no catálogo
A Penteadora é uma têxtil portuguesa fundada em 1930, em Unhais da Serra, na Serra da Estrela. É verticalizada, da fibra ao tecido acabado, e faz parte do Grupo Paulo de Oliveira, um dos maiores produtores de tecidos laneiros da Europa. Seus clientes são marcas de moda, criadores e lojistas de todo o mundo, presentes em feiras como a Milano Unica e a Première Vision. O que não existia era qualquer produto digital, design system ou histórico de interface.
1930
Quase um século de operação, da fibra ao tecido acabado.
2 MESES
Entre a coleção pronta e o catálogo nas mãos do representante.
3 EQUIPES
Desenvolvimento de produto, tecelagem e amostras, mais logística internacional.
1 DESIGNER
Nenhum componente, nenhum padrão e nenhum histórico digital anterior.
PROCESSO ANTERIOR
O processo que parecia apenas caro
Antes do catálogo digital, cada coleção era apresentada num catálogo impresso com amostras de tecido cortadas e coladas à mão. O que parecia um problema de custo e prazo era, na verdade, um problema de confiança.
CATÁLOGO FÍSICO
Amostras coladas à mão, página a página
Imprimir, cortar amostras, colar uma a uma nas páginas corretas, embalar e enviar para representantes e clientes em vários países. Pelo menos três equipes simultâneas mais logística internacional, com no mínimo dois meses entre a coleção pronta e o catálogo na mão do representante.
O INSIGHT
O erro não era visível para quem vendia
Nesse intervalo, qualquer mudança na coleção não se propagava. Catálogos saíam com produtos descontinuados e amostras coladas em referências erradas. O representante vendia com informação incorreta sem saber que a informação estava incorreta.
03
Construir a fundação antes da interface
A Penteadora não tinha design system, histórico de produto digital nem componentes estabelecidos. O primeiro desafio não era resolver o problema, era criar a base sobre a qual a solução poderia ser construída, com padrões que a empresa conseguisse manter depois da saída da designer responsável.
Timeline do projeto
Iniciado em fevereiro de 2022 · design system construído do zero · catálogo e biblioteca entregues em fevereiro de 2023
8 fases
• 12 meses como única designer
01
Diagnóstico do processo
Mapeamento do catálogo físico e dos pontos de falha.
02
Shadowing em campo
Visita a cliente e feira internacional.
03
Benchmarking
Como comunicar textura e cor numa tela.
04
Fundação do sistema
Tokens, tipografia e escala de espaçamento.
05
Biblioteca de componentes
Nove componentes com estados documentados.
06
Fluxos e telas
Catálogo, busca, comparação e pedido.
07
Validação com representantes
Protótipos revisados com a equipe comercial.
08
Entrega
Lançamento condicionado à autorização do grupo.
PESQUISA
Duas frentes antes de abrir o Figma
Antes de propor qualquer solução, era preciso entender como o representante realmente usa um catálogo em contexto de venda e como outras empresas comunicam textura, cor e caimento numa tela.
01
Shadowing em visita a cliente
Contexto controlado, com tempo para consulta. O representante folheia, aponta, compara duas referências ao mesmo tempo e dobra a página para voltar depois. O catálogo físico é instrumento de conversa, não de consulta silenciosa.
02
Shadowing em feira internacional
Contexto caótico, com o representante apresentando enquanto responde a pessoas diferentes ao mesmo tempo. Qualquer solução que funcionasse só num dos dois contextos não seria adotada. Esse contraste definiu mobile-first como decisão de contexto, não de preferência.
03
Benchmarking de catálogos digitais de tecido
A pergunta central era como comunicar textura, cor e caimento numa tela. As referências mais eficazes usavam fotografia com iluminação controlada e zoom, ou tecidos reais escaneados em 3D. A precisão de cor separava um catálogo que gerava confiança de um que não gerava.
04
Dois contextos de uso, não duas personas
CONTEXTO 1 · VISITA A CLIENTE
Consulta com tempo
Ambiente controlado, um cliente por vez, espaço para abrir o catálogo sobre a mesa e voltar às páginas quantas vezes for preciso.
O QUE O REPRESENTANTE FAZ
• Compara duas referências lado a lado
• Dobra a página para voltar depois
• Consulta composição e peso durante a conversa
O QUE ISSO EXIGE DO DIGITAL
• Comparação simultânea de referências
• Retorno rápido ao ponto anterior
• Ficha técnica visível sem sair da tela
CONTEXTO 2 · FEIRA INTERNACIONAL
Apresentação sob pressão
Milano Unica e Première Vision. Em pé, em movimento, apresentando para uma pessoa enquanto responde a outra, com luz variável e sem apoio para as mãos.
O QUE O REPRESENTANTE FAZ
• Mostra e fala ao mesmo tempo
• Alterna entre clientes sem perder o ponto
• Precisa achar uma referência em segundos
O QUE ISSO EXIGE DO DIGITAL
• Alvo de toque grande, sem precisão milimétrica
• Hierarquia legível em luz externa
• Busca que responde em poucos toques
COMPARATIVO: PROCESSO FÍSICO VS. CATÁLOGO DIGITAL
ETAPA
ANTES (CATÁLOGO FÍSICO)
DEPOIS (CATÁLOGO DIGITAL)
Produção
Impressão, corte e colagem manual de amostras por três equipes, mais logística internacional. Dois meses até chegar ao representante.
Publicação da coleção pelo próprio time, sem impressão e sem envio físico.
Apresentação
Amostra real na mão, mas sujeita a colagem em referência errada.
Fotografia com precisão de cor e ficha técnica ao lado, com comparação lado a lado.
Busca
Folhear por código interno, que só fazia sentido para a equipe da fábrica.
Busca por atributo pesquisável: composição, peso, acabamento e destino de uso.
Correção
Impossível depois que o catálogo saía da fábrica. O erro seguia em campo até a coleção seguinte.
Atualização imediata por uma única pessoa sem conhecimento técnico.
Nova coleção
Novo ciclo completo de impressão, colagem e envio internacional.
Novo conteúdo publicado sobre a mesma estrutura, sem novo custo de produção física.
05
A vantagem do digital estava na busca, não na tela
O catálogo físico organizava os tecidos pela lógica de produção da fábrica, com códigos numéricos que só faziam sentido para a equipe interna. Num catálogo digital, onde busca e filtro são possíveis, manter essa nomenclatura opaca desperdiçaria a principal vantagem do formato.
ANTES VS DEPOIS
ANTES
CÓDIGO INTERNO → FOLHEAR ATÉ ACHAR
O comprador dependia do representante para traduzir o código
Evolução
DEPOIS
REFERÊNCIA + COMPOSIÇÃO · PESO · ACABAMENTO · DESTINO
Busca por atributo, com o código preservado para a equipe interna
TRÊS CAMINHOS DE NOMENCLATURA CONSIDERADOS
A
Manter apenas o código de referência
Arquitetura
Só código numérico
Benefício
Zero mudança para a fábrica
Custo
Ilegível para o comprador externo
DECISÃO: DESCARTADA
B
Substituir por nomes descritivos
Arquitetura
Nome substitui o código
Benefício
Legível para quem compra
Custo
Quebra a rastreabilidade interna
DECISÃO: DESCARTADA
C
Código interno mais atributos pesquisáveis
Arquitetura
Código mais atributos
Benefício
Busca por composição e uso
Custo
Exige metadado por referência
DECISÃO: ESCOLHIDA
06
Quatro decisões que definiram o produto
1
A qualidade visual do tecido era a decisão mais crítica
DECISÃO
Definir como cada tecido seria fotografado ou escaneado em 3D, com precisão de cor e fidelidade de textura.
POR QUÊ
No catálogo físico o representante mostra a amostra real. No digital, a imagem é o produto, e sem fidelidade não há confiança nem pedido.
ALTERNATIVA DESCARTADA
Reaproveitar a fotografia de catálogo existente, feita para impressão e sem controle de cor para tela.
CUSTO ACEITO
Produção fotográfica mais cara e mais lenta a cada coleção.
2
Código interno mais atributos pesquisáveis
DECISÃO
Manter a referência interna e complementá-la com composição, peso, acabamento e destino de uso.
POR QUÊ
A busca é a principal vantagem do digital sobre o papel. Manter nomenclatura opaca desperdiçaria exatamente isso.
ALTERNATIVA DESCARTADA
Substituir o código por nomes descritivos, quebrando a rastreabilidade da fábrica.
CUSTO ACEITO
Preenchimento de metadado por referência a cada nova coleção.
3
Atualização na mão de uma pessoa só
DECISÃO
Uma única pessoa sem conhecimento técnico precisa conseguir atualizar ou retirar uma referência.
POR QUÊ
O custo invisível do catálogo físico era a dependência de três equipes para qualquer correção.
ALTERNATIVA DESCARTADA
Fluxo de atualização via equipe técnica ou fornecedor externo.
CUSTO ACEITO
Limitou a complexidade do conteúdo ao que uma pessoa consegue manter sozinha.
4
Mobile-first como decisão de contexto, não de preferência
DECISÃO
Alvos de toque grandes, hierarquia legível em luz externa e navegação no ritmo de uma conversa de venda.
POR QUÊ
O shadowing mostrou que o uso dominante é em pé, em movimento, dentro de uma conversa com cliente.
ALTERNATIVA DESCARTADA
Desktop-first, mais próximo do fluxo interno da fábrica e do escritório de vendas.
CUSTO ACEITO
Menor densidade de informação por tela no desktop.
design system
A fundação antes da interface
1
FUNDAÇÃO: TOKENS E ESTILOS
BRAND GOLD · 11 PASSOS · BASE C0942A
50
100
200
300
400
500
600
700
800
900
950
01. PALETA GOLD E BRAND
NEUTRAL · 12 PASSOS, BASE QUENTE
FEEDBACK · 4 ESTADOS
ERROR
WARNING
SUCCESS
INFO
02. NEUTROS E FEEDBACK
INTER · 15 ESTILOS EM SEIS FAMÍLIAS DE USO
Aa
DISPLAY M
Aa
H2
Aa
BODY
Aa
OVERLINE
Display L
Bold · 48/56
Display M
Bold · 36/44
Display S
Semi Bold · 30/38
H1
Semi Bold · 28/36
H2
Semi Bold · 24/32
H3
Semi Bold · 20/28
H4
Medium · 18/26
03. ESCALA TIPOGRÁFICA
ESCALA DE 4 · 12 PASSOS, DE 4 A 96
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
04. ESCALA DE ESPAÇAMENTO
TOKEN SEMÂNTICO
LIGHT
DARK
surface/page
surface/raised
text/primary
text/muted
border/default
action/primary
05. TOKENS SEMÂNTICOS · LIGHT E DARK
2
BIBLIOTECA: COMPONENTES COM ESTADOS
BUTTON · PRIMARY, SECONDARY, TERTIARY, GHOST
Primary
Secondary
Tertiary
Ghost
FILTER CHIP · DEFAULT E ACTIVE
Lã
Linho
01. BUTTON · 4 ESTILOS
INPUT · DEFAULT, FOCUSED, ERROR, DISABLED
DEFAULT
Buscar por composição
FOCUSED
Buscar por composição
ERROR
Referência 4520
Campo obrigatório
DISABLED
Buscar por composição
02. INPUT · DEFAULT, FOCUS, ERROR, DISABLED
TEXTURA
REF. 4520
Nome do Tecido
80% Lã · 20% Poliéster
Brand
Neutral
Largura: 150cm · Peso: 280g/m²
FILTER CHIP
Lã
Linho
Seda
Inverno
SEARCH BAR
Pesquisar tecidos...
03. FABRIC CARD E FILTER CHIP
ORDER STATUS · 4 ESTADOS
Pendente
Em Produção
Enviado
Entregue
ORDER CARD
Pedido #2847
Pendente
15 de Março, 2025 · 3 artigos
Total estimado
€ 2.450,00
04. ORDER STATUS · 4 ESTADOS
08
O que foi validado, e o que não foi
Revisão com representantes · sem teste formal
O que aconteceu
Não houve teste de usabilidade formal, com roteiro, tarefas cronometradas e métricas. O que houve foi revisão contínua: protótipos de baixa e média fidelidade apresentados a representantes durante o desenvolvimento, com objeções incorporadas antes da entrega final. Fica registrado como revisão qualitativa, não como validação estatística.
Objeções levadas a sério e o que mudou
01
Incorporada
Comparar duas referências lado a lado era o gesto mais repetido no catálogo físico. Virou tela dedicada de comparação, não um recurso escondido em filtro.
02
Incorporada
Representantes veteranos rejeitaram perder o código interno. O código foi preservado como campo principal, com os atributos pesquisáveis ao lado, não no lugar.
03
Incorporada
A ficha técnica saía da tela durante a conversa. Composição, peso e acabamento passaram a ficar visíveis junto da imagem, sem navegação adicional.
04
Em aberto
A objeção tátil permanece: tecido é produto que se sente. Nenhuma decisão de tela resolve isso, e o catálogo digital não foi desenhado para substituir a amostra física em venda de alto valor.
Síntese
A revisão com representantes mudou três decisões de estrutura antes da entrega e confirmou que a resistência da equipe carregava informação, não apenas hábito. O que ela não produz é evidência de desempenho: sem teste em produção, não há dado de adoção, tempo de tarefa ou taxa de erro.
1. O que ficaria para o primeiro teste em produção
Busca por código de referência contra busca por atributo pesquisável, medindo tempo até encontrar uma referência específica e taxa de abandono da busca.
2. A hipótese por trás desse teste
Representantes com menos tempo de casa adeririam mais rápido à busca por atributo, enquanto os veteranos manteriam o código. Isso indicaria manter os dois caminhos de forma permanente, não apenas durante a transição.
wireframes
Estrutura antes do visual
ACESSO E CONTA
FLUXO DO ATLETA (B2C)
Ação primária
Ação secundária
01. BOAS-VINDAS
Iniciar Sessão
Ação primária
Ação secundária
02. LOGIN
Criar Conta
Ação primária
03. CRIAR CONTA
DESCOBERTA E PEDIDO
FLUXO DO LOJISTA (B2B)
Coleções da estação
01. CATÁLOGO
Composição
Peso (g/m²)
Tipo de tecelagem
Ação secundária
Ação primária
02. BUSCA E FILTROS
Nome do tecido
Especificações
Cores disponíveis
Ação secundária
Ação primária
03. DETALHE DO TECIDO
Comparar especificações
Ação primária
04. COMPARAÇÃO
A sua seleção
Resumo
Ação primária
05. CARRINHO
Confirmar Pedido
Ação primária
06. CONFIRMAÇÃO
Os Meus Pedidos
07. HISTÓRICO
Progresso da entrega
08. RASTREIO
Encomenda Entregue
Ação primária
Ação secundária
09. ENTREGA
Avaliar Encomenda
Ação primária
10. AVALIAÇÃO
Treze telas do catálogo digital, desenhadas mobile-first para o contexto real de uso: o representante em pé, no meio de uma conversa de venda.
DECISÃO DE PROCESSO
Por que mobile primeiro, e não depois
O shadowing definiu o contexto dominante: o representante usa o catálogo em pé, em movimento, no meio de uma conversa. Desenhar mobile primeiro não foi preferência, foi consequência de onde a venda acontece.
1
FLUXO DO REPRESENTANTE (MOBILE)
01. CATÁLOGO
02. DETALHE DO TECIDO
03. BUSCA E FILTROS
04. COMPARAÇÃO DE TECIDOS
05. CARRINHO
06. PEDIDO
07. RASTREIO DO PEDIDO
08. HISTÓRICO DE PEDIDOS
09. LOGIN DO REPRESENTANTE
10. AVALIAÇÃO PÓS-ENTREGA
2
ACESSO E CONTA
01. BOAS-VINDAS
02. CRIAR CONTA
03. ENTREGA CONCLUÍDA
09
Escopo entregue
Design system do zero
Tokens de cor, tipografia e espaçamento.
9 componentes
Com variantes e estados documentados.
39 telas
Mobile, tablet e desktop.
Catálogo navegável
Busca, filtro e comparação de tecidos.
Fluxo de pedido
Carrinho, checkout e rastreio.
Rebranding
Posicionamento e identidade visual.
MÉTRICAS DEFINIDAS, NÃO MEDIDAS
ON TRACK
78%
+12%
Taxa de adoção
Representantes usando o catálogo em campo
Meta: 90% em 6 meses
IMPROVING
-62%
-85pp
Erro de referência
Pedidos com referência incorreta
Baseline: 23% de erro
FAST
4.2 min
-7.8 min
Tempo até o pedido
Da apresentação à confirmação
Anterior: 12 min
SAVED
R$ 1.8k
-78%
Custo por coleção
Produção e envio de catálogo físico
Anterior: R$ 8.5k
O lançamento ficou condicionado à autorização do Grupo Paulo de Oliveira, decisão estratégica fora do escopo do projeto de design. Os KPIs acima foram definidos durante o projeto e nunca chegaram a ser medidos em produção.
10
O que este projeto ensinou
01
Quando não há histórico digital, a primeira entrega é a fundação
Antes da interface vieram os tokens, a biblioteca e a regra de manutenção. Sem isso, o catálogo teria virado um arquivo que ninguém conseguiria atualizar depois da saída da designer responsável.
02
Resistência interna carrega informação
As equipes com mais de 20 anos de casa não estavam erradas em ser céticas, sabiam onde o processo antigo funcionava. As melhores decisões vieram de objeções levadas a sério, não de consenso fácil.
03
Contexto de uso precede qualquer decisão de interface
Onde e como o representante usaria o catálogo, em pé, em movimento, dentro de uma conversa com cliente, definiu as prioridades de uma forma que nenhum briefing escrito teria conseguido.
04
Sustentabilidade depois da entrega é decisão de design
Projetar para que uma pessoa não técnica mantivesse o conteúdo pesou tanto quanto qualquer escolha visual. Produto que ninguém consegue atualizar morre na segunda coleção.
OUTROS PROJETOS
Veja também
Profissional
2025
E-commerce com três canais para uma indústria esportiva
Transição de um modelo só B2B para B2B mais D2C, com três canais integrados na mesma plataforma.
Ver Projeto
Profissional
2026
Ecossistema digital para a supermigração do Itaú
Quatro produtos em três canais para que a unificação dos aplicativos não custe confiança do cliente.
Ver Projeto
Vamos conversar, entre em contato.
NAVEGAÇÃO
Trabalhos
Sobre
CONTATO
ne.zaplana@gmail.com
+55 41 98892-3287
DISPONIBILIDADE
Aberta a vagas de Product Designer em Curitiba, remoto ou com realocação na Europa.
© 2026 Neliana Zaplana Braga