Comprar persianas sob medida exige comparar estilos, dimensões, tecidos e configurações. No mobile, opções densas e feedback pouco visível aumentavam a carga cognitiva.
E-commerce · VTEX · Design system
Tuiss RaamdecoratieUma compra sob medida que continua clara em cada tela e mercado.
Migração e evolução do e-commerce holandês com personalização progressiva, componentes responsivos e uma base visual preparada para escala.
Visitar produto em produção
Visão geral
PapelProduct Designer2023 até o momento
ColaboraçãoProduct Owner, design, engenharia e stakeholders internacionais
Escopo
O desafio
Comprar persianas sob medida exige comparar estilos, dimensões, tecidos e configurações. No mobile, opções densas e feedback pouco visível aumentavam a carga cognitiva.
A migração de plataforma aconteceu junto ao rebranding e à expansão para diferentes mercados. Sem tokens, regras responsivas e componentes flexíveis, cada adaptação criaria retrabalho.
Princípios de decisão
Critérios ligados ao risco e ao resultado do produto.
Perguntar na ordem certa
A personalização apresenta decisões quando a pessoa já tem contexto para respondê-las.
Manter ação e feedback próximos
Preço, seleção e próximo passo continuam visíveis durante jornadas longas, especialmente no mobile.
Escalar marca e produto juntos
Tokens semânticos e modos absorvem diferenças de mercado sem fragmentar a experiência.
Processo
Do sistema invisível a uma entrega verificável.
Auditar o legado
Páginas críticas, padrões duplicados e pontos de fricção foram organizados por impacto na compra.
Desenhar a arquitetura
Categorias, filtros e personalização ganharam uma sequência coerente entre descoberta e decisão.
Prototipar mobile primeiro
Gestos, áreas de toque, feedback e ações persistentes foram validados em telas menores.
Sistematizar a interface
Figma Variables, tokens e componentes suportaram temas, estados e diferentes mercados.
Acompanhar a entrega
Documentação responsiva e revisão com desenvolvimento reduziram divergências na implementação VTEX.
Solução
A jornada organiza opções complexas em grupos legíveis, mostra impacto de cada escolha e mantém ações importantes acessíveis. O sistema visual conecta o rebranding às regras reais do produto.
Como chegou à produção
Componentes usam propriedades, variantes, tokens semânticos e estados responsivos. A base permite reutilização entre home, categoria, busca, PDP e área logada.
1Dúvida de compra→
2Arquitetura de escolha→
3Protótipo mobile→
4Componente e token→
5Implementação VTEX
Resultados
Impacto que vai além da interface.
A entrega criou uma experiência mais coesa e uma fundação preparada para evolução contínua. O time passou a reutilizar decisões e regras em vez de redesenhar padrões a cada página.
Ana teve papel essencial no projeto, contribuindo com ideias relevantes, aprimorando soluções e garantindo consistência na execução.