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.
Voltar aos projetosCASE 03 / 03
Tuiss Raamdecoratie / E-commerce · VTEX · Design system
Simplificando a compra de persianas sob medida na Tuiss.
Migração e evolução do e-commerce holandês com personalização progressiva, componentes responsivos e uma base visual preparada para escala.
E-commerce em produção, 2023 até o momento
PapelProduct Designer
Período2023 até o momento
TimeProduct Owner, design, engenharia e stakeholders internacionais
Escopo
UX/UI / Mobile first / Design system / Figma Variables / VTEX / Handoff e QA
01 / Contexto
Comprar sob medida, com mais clareza.
Por que importava
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.
02 / Critérios de design
Decisões com critério.
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.
03 / Processo
Do problema à decisão.
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.
Ler a variedade do catálogo
O site oferece caminhos por tipo de produto, ambiente, janela e material. A auditoria ajudou a distinguir o que apoia a descoberta do que pesa na comparação.
Organizar a escolha sob medida
A arquitetura conecta filtros, medidas e configurações em uma sequência mais legível, com feedback e próximo passo visíveis também no mobile.
04 / Solução
A resposta toma forma.
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.
Da proposta à implementação
Componentes usam propriedades, variantes, tokens semânticos e estados responsivos. A base permite reutilização entre home, categoria, busca, PDP e área logada.
Lógica da experiência
05 / Resultados
O que o projeto entregou.
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.”
Próximo case
Electrolux EuropaSimplificando a gestão global de fornecedores na Electrolux.