La historia en 30s
El problema. Antes de este proyecto, la personalización de temas dependía en gran medida de diseños predefinidos. Esto limitaba la flexibilidad de los comerciantes, ralentizaba la iteración y dificultaba escalar entre distintas industrias: alta dependencia de temas predefinidos, creación y adaptación lentas de temas, y dificultad para mantener la consistencia a escala.
Qué hice. Diseñé un sistema modular de temas compuesto por secciones configurables y reutilizables, hero, cuadrículas de productos, navegación, pie de página, y un editor visual que permitía a los comerciantes ensamblar y personalizar tiendas sin código, preservando las reglas del sistema. Las decisiones se basaron en análisis competitivo, insights cualitativos de clientes y las guías de UX del Baymard Institute.
Qué cambió. La plataforma se lanzó en producción con marcas minoristas, incluidas Pier 1 y RadioShack, escalando a más de 2.000 tiendas registradas en la plataforma en múltiples sectores.
El razonamiento: cuatro reglas que escalan
El verdadero riesgo no estaba en ninguna pantalla en particular: estaba en construir diseño de sistema en lugar de diseño de pantalla. Pero la modularidad en sí tenía una restricción que yo no elegí: para el MVP, ingeniería definió los bloques de construcción, los tipos de sección concretos y sus límites, para poder lanzar rápido en lugar de esperar a un sistema totalmente flexible. Mi trabajo fue moverme dentro de eso: aplicar las guías del Baymard Institute para decidir cuáles de esos bloques definidos por ingeniería realmente importaban para los comerciantes que buscaban convertir, y moldear el MVP alrededor de ese subconjunto en lugar del rango completo que yo hubiera querido originalmente. Cuatro principios guiaron cada decisión dentro de esa restricción:
- → Modularidad: secciones, no páginas. Cada página ensamblada a partir de secciones reutilizables e intercambiables, hero, cuadrículas de productos, navegación, pie de página.
- → Restricciones por defecto: menos opciones, menos diseños rotos. Limitar lo que los comerciantes podían combinar evitaba que los diseños se rompieran, en lugar de depender de que el comerciante lo notara.
- → Previsibilidad: mismo componente, mismo comportamiento. Cada componente se comporta de forma consistente, sin importar en qué página o contexto se use.
- → Control progresivo: potencia sin abrumar. La personalización se expone gradualmente, no toda de una vez, de modo que los comerciantes nuevos arrancan rápido y los avanzados igual obtienen profundidad.
Resumen de la solución
Un sistema modular de temas, aplicado directamente sobre las restricciones anteriores:
- → 14 tipos de sección que los comerciantes podían combinar y reconfigurar sin tocar código.
- → Más de 80 propiedades de configuración expuestas progresivamente, no todas a la vez.
- → 6 preajustes de tema que daban a los comerciantes un punto de partida rápido antes de seguir personalizando.
- → Un editor visual que no puede romper el diseño. Preservaba las reglas del sistema, de modo que la personalización era segura por construcción, no por el cuidado del comerciante.
Ejemplos de tema
Resultados
- → Lanzado en producción con marcas minoristas, incluidas Pier 1 y RadioShack
- → Más de 2.000 tiendas registradas en la plataforma en múltiples sectores
- → Significativamente más flexibilidad de diseño que el enfoque anterior de plantillas estáticas, sin agregar desarrollo a medida por comerciante
Reflexión
- 1 Las reglas escalan. Las pantallas no. Definir componentes y restricciones capaces de escalar con el negocio importó más que las decisiones de pantallas individuales.
- 2 Flexibilidad contra velocidad, y la velocidad tenía que ganar primero. Los bloques de construcción fueron definidos por ingeniería para el MVP, lo que significó menos personalización para los comerciantes de la que yo habría diseñado en una versión ideal. Usé las guías de Baymard para priorizar qué restricciones importaban más para la conversión, de modo que el conjunto limitado que lanzamos siguiera funcionando bien para los comerciantes, aunque no fuera el sistema que habría construido con más tiempo.
- 3 El diseño a nivel de sistema se acumula, incluso uno restringido. Un conjunto de reglas consistente, aunque más reducido de lo previsto, escala de una forma que las decisiones puntuales de pantalla jamás podrían.