A história em 30s
O problema. Antes deste projeto, a personalização de temas dependia fortemente de layouts predefinidos. Isso limitava a flexibilidade dos lojistas, retardava a iteração e dificultava a escala entre diferentes setores: alta dependência de temas predefinidos, criação e adaptação lentas de temas, e dificuldade de manter consistência em escala.
O que eu fiz. Projetei um sistema modular de temas composto por seções configuráveis e reutilizáveis, hero, grades de produtos, navegação, rodapé, e um editor visual que permitia aos lojistas montar e personalizar lojas sem código, preservando as regras do sistema. As decisões foram informadas por análise competitiva, insights qualitativos de clientes e diretrizes de UX do Baymard Institute.
O que mudou. A plataforma foi lançada em produção com marcas de varejo, incluindo Pier 1 e RadioShack, escalando para mais de 2.000 lojas registradas na plataforma em múltiplos setores.
O raciocínio: quatro regras que escalam
O real risco não estava em nenhuma tela específica: estava em construir design de sistema em vez de design de tela. Mas a própria modularidade tinha uma restrição que eu não escolhi: para o MVP, a engenharia definiu os blocos de construção, os tipos de seção concretos e seus limites, para que pudéssemos lançar rápido em vez de esperar por um sistema totalmente flexível. Meu trabalho foi atuar dentro disso: aplicar as diretrizes do Baymard Institute para decidir quais desses blocos definidos pela engenharia realmente importavam para lojistas tentando converter, e moldar o MVP em torno desse subconjunto em vez do leque completo que eu originalmente queria. Quatro princípios guiaram cada decisão dentro dessa restrição:
- → Modularidade: seções, não páginas. Cada página montada a partir de seções reutilizáveis e intercambiáveis, hero, grades de produtos, navegação, rodapé.
- → Restrições por padrão: menos opções, menos layouts quebrados. Limitar o que os lojistas podiam combinar evitava que os layouts quebrassem, em vez de depender de o lojista perceber.
- → Previsibilidade: mesmo componente, mesmo comportamento. Cada componente se comporta de forma consistente, seja qual for a página ou o contexto em que é usado.
- → Controle progressivo: potência sem sobrecarregar. A personalização é exposta gradualmente, não tudo de uma vez, para que lojistas novos comecem rápido e os avançados ainda tenham profundidade.
Visão geral da solução
Um sistema modular de temas, aplicado diretamente às restrições acima:
- → 14 tipos de seção que os lojistas podiam combinar e reconfigurar sem tocar em código.
- → Mais de 80 propriedades de configuração expostas progressivamente, não todas de uma vez.
- → 6 presets de tema dando aos lojistas um ponto de partida rápido antes de personalizar mais.
- → Um editor visual que não pode quebrar o layout. Preservava as regras do sistema, então a personalização era segura por construção, não pelo cuidado do lojista.
Exemplos de tema
Resultados
- → Lançado em produção com marcas de varejo, incluindo Pier 1 e RadioShack
- → Mais de 2.000 lojas registradas na plataforma em múltiplos setores
- → Significativamente mais flexibilidade de layout do que a abordagem anterior de templates estáticos, sem adicionar desenvolvimento sob medida por lojista
Reflexão
- 1 Regras escalam. Telas não. Definir componentes e restrições capazes de escalar com o negócio importou mais do que decisões de telas individuais.
- 2 Flexibilidade versus velocidade, e a velocidade tinha que vencer primeiro. Os blocos de construção foram definidos pela engenharia para o MVP, o que significou menos personalização para os lojistas do que eu teria projetado em uma versão ideal. Usei as diretrizes do Baymard para priorizar quais restrições importavam mais para a conversão, de modo que o conjunto limitado que lançamos ainda funcionasse bem para os lojistas, mesmo não sendo o sistema que eu teria construído com mais tempo.
- 3 O design em nível de sistema se acumula, mesmo um restringido. Um conjunto consistente de regras, ainda que mais reduzido do que o pretendido, escala de um jeito que decisões pontuais de tela jamais conseguiriam.