Catálogo digital para uma têxtil de 1930
A Penteadora
Desenhei um catálogo mobile-first e seu design system a partir da observação de representantes em visitas e feiras têxteis.
Encontrar, consultar e comparar tecidos.
Apresentação animada de telas existentes do projeto. Não é uma gravação de interação ao vivo.
Consultar a coleçãoO case em poucas palavras
- O problema
- O catálogo impresso levava dois meses para ficar pronto e não permitia correções após o envio. Representantes ainda precisavam das amostras físicas.
- Meu papel
- Única Product Designer
- A decisão
- A observação nas visitas me levou a um catálogo mobile-first com busca técnica e comparação lado a lado, sem retirar os códigos internos.
- O que entreguei
- 39 telas e nove componentes documentados para catálogo, busca, comparação e pedidos.
- Evidências de validação
- O feedback dos representantes mudou a comparação e a ficha técnica. Foram revisões do design, sem taxa de sucesso formalmente medida.
- O que não foi medido
- Lançamento condicionado à autorização do grupo. Economia e velocidade dos pedidos não foram medidas.
Pesquisa, fluxos e prototipação
Pesquisa UX (UX Research), com shadowing e benchmarking, orientou os fluxos (User Flows). A prototipação (Prototyping), da baixa à alta fidelidade, apoiou as revisões com representantes.
Desenhar o primeiro catálogo digital.
Desenhei um catálogo e uma base de interface reutilizável para uma indústria têxtil portuguesa fundada em 1930. O trabalho foi de fevereiro de 2022 a fevereiro de 2023.
Ver as evidências
A empresa vende internacionalmente e não tinha produto digital nem biblioteca de componentes. Atuei da pesquisa ao catálogo e às revisões de protótipo com o time comercial.
Cada coleção levava dois meses para virar catálogo.
Catálogos físicos exigiam impressão, corte, colagem de amostras e envio internacional. Três equipes e dois meses separavam a coleção pronta do representante.
Ver as evidências
Digitalizar precisava preservar a confiança na textura e na cor, não apenas reduzir impressão. O catálogo digital não pretendia substituir amostras táteis em vendas de alto valor.
O ponto de partida físico
Fotografia do catálogo físico enviada para este case.
Observei como os tecidos eram apresentados nas visitas.
O shadowing em visitas e feiras internacionais mostrou representantes comparando tecidos em pé, em movimento e conversando com clientes. O benchmarking explorou fidelidade de textura e cor.
Ver as evidências
Representantes consultavam composição e peso durante a conversa, comparavam referências lado a lado e precisavam encontrar tecidos em segundos. Esses comportamentos moldaram a hierarquia.
Pesquisa e análise de referências
Artefatos de pesquisa enviados. As notas do benchmarking descrevem a análise de referências, não o desempenho do produto.
Conectei os códigos internos à busca técnica.
Preservei referências internas e acrescentei atributos pesquisáveis: composição, peso, acabamento e uso. Alvos de toque grandes e ficha técnica visível apoiam a conversa de venda.
Ver as evidências
Substituir códigos quebraria a rastreabilidade; apenas códigos continuariam opacos aos compradores. A escolha exige metadados por coleção, mas preserva os dois caminhos.
Duas perspectivas da jornada
Mapas de jornada das personas enviados, não resultados medidos. Artefatos originais em português.
Referência + Composição + Peso + Acabamento
Um catálogo pesquisável proposto, preservando a rastreabilidade interna.
O feedback deu uma tela própria à comparação.
Representantes revisaram protótipos de baixa, média e alta fidelidade. O feedback preservou códigos, tornou a comparação uma tela própria e trouxe a ficha técnica para junto da imagem.
Ver as evidências
Não houve roteiro formal nem taxa de sucesso medida. A evidência são as mudanças concretas após a revisão. A inspeção tátil continua sendo um limite que nenhuma tela elimina.
39 telas e uma biblioteca reutilizável.
Entreguei 39 telas mobile-first e 9 componentes documentados, com tipografia, espaçamento e tokens semânticos. Catálogo, busca, comparação e pedidos compartilham a mesma base.
Ver as evidências
O fluxo de atualização foi pensado para uma pessoa sem conhecimento técnico atualizar ou retirar referências. Fidelidade de cor e fotografia consistente são essenciais à confiança.
Além das telas móveis
Design desktop e mockup de apresentação enviados; não são evidências de uso em produção.
Encontrar, consultar e comparar tecidos.
Apresentação animada de telas existentes do projeto. Não é uma gravação de interação ao vivo.
Consultar a coleçãoBoas-vindas e acesso à conta.
Apresentação animada de telas existentes do projeto. Não é uma gravação de interação ao vivo.
Tela de boas-vindasConfirmação e acompanhamento do pedido.
Apresentação animada de telas existentes do projeto. Não é uma gravação de interação ao vivo.
Confirmar o pedidoVer a galeria completa de telas
Uma base digital entregue à empresa.
Entreguei o catálogo e a biblioteca de componentes. O lançamento continuou dependendo da autorização do grupo; por isso, os indicadores de negócio definidos não foram medidos.
Ver as evidências
Aprendi a tratar objeções como informação de pesquisa: códigos internos e amostras táteis continuavam importantes. Economia e velocidade dos pedidos precisariam ser medidas após o lançamento.