Diseños para +30.000 tiendas

Sebastián Marcó
Tiendanube Design
Published in
7 min readFeb 11, 2020

A mediados del 2018, nos propusimos cambiar la percepción de diseño que tenían nuestros clientes acerca de nuestro producto. Escuchábamos comentarios del tipo: “Tiendanube es para arrancar”, “te da lo básico para empezar, pero todas las tiendas se ven iguales”, “el diseño es muy limitado”, entre otras cosas, de las cuales pudimos extraer estos conceptos:

  • Los diseños tenían pocos sectores personalizables, por ejemplo: se podía cargar únicamente imágenes al carrusel y 3 banners.
  • Las opciones que brindaban los diseños eran limitadas. Brindamos la posibilidad de cambiar colores y algunas tipografías, pero esto no generaba grandes cambios en cómo se percibía una tienda.
  • Los diseños eran parecidos entre si. Todos generaban resultados muy similares, con estructuras de contenido casi idénticas.
  • El diseño de las tiendas no reflejaba el desarrollo del producto. El producto había crecido muchísimo, pero los diseños seguían ofreciendo lo mismo.

Sabíamos que existía el problema, pero no teníamos claridad sobre su solución. ¿Desarrollar nuevos diseños?, ¿rediseñar todo lo que ya teníamos?, ¿tercerizar el diseño?, ¿realizar modificaciones?, ¿agregar nuevas funcionalidades?… había que entender.

Entendiendo con usuarios

Empezamos a hablar (¡y mucho!) con nuestros clientes, sobre lo que necesitaban resolver con el diseño de sus tiendas. Escuchamos casos de todo tipo, rubro, tamaño y rol. La idea era entender por qué tenían esa percepción negativa.

Conseguimos muchísima información de la que necesitábamos extraer sólo lo fundamental para trazar la ruta que queríamos recorrer. Aislando cada opinión, empezamos a ver que nuestros clientes no estaban logrando mostrar la identidad de sus marcas en las tiendas: “A mi tienda le falta alma”, “no se ve mi marca” y que todo pasaba por la página de inicio, “quiero poner más banners”, “necesito destacar mis productos”, “las categorías importantes las tengo que poner en el home”, “¿como agrego un video en la página de inicio?”.

En esta primer instancia entendimos que el principal problema era que no dábamos el espacio ni la posibilidad de subir el contenido que las marcas necesitaban darles a sus usuarios.

Decidimos incorporar componentes en la página de inicio, que permitan mostrar con mucho más detalle los diferenciales de cada marca:

  • Mayor cantidad de banners
  • Destacar categorías
  • Agregar video a la página de inicio
  • Poner imagen y texto en un módulo informativo
  • Publicaciones de Instagram
Primeros cambios sobre Simple

Además realizamos ajustes estructurales de diseño para ampliar las posibilidades, agregando opciones de ancho del cuerpo de contenido, opciones de disposición y color en el encabezado y replanteando la estructura para dispositivos móviles, donde teníamos una misma solución para todos los diseños.

Opciones de encabezado para Simple

En Octubre de 2018, aplicamos estos últimos cambios al diseño “Simple”, “Material” y “Lifestyle”, pero incorporando los nuevos componentes a todos los demás.

Empezamos a ver cómo las nuevas posibilidades le daban a nuestros clientes mayor variedad y versatilidad a la hora de crear y personalizar sus tiendas, logrando transmitir diferentes conceptos con nuestros diseños. Todas nuestras tiendas ya no eran “tan iguales”.

De un side-project a la base de nuestros diseños

Avanzando con bastante velocidad, se hicieron mucho más evidentes algunas problemáticas con las que luchábamos día a día:

  • El código de cada diseño era diferente. Entonces, cada cambio que se aplicará a todos los diseños, nos generaba muchísimo esfuerzo.
  • No teníamos una base o lineamiento desde dónde partir en cada desarrollo.
  • Teníamos muchas apps y plugins que ya no resolvían las necesidades de nuestros clientes.
  • Aproximadamente el 65% de nuestras transacciones eran mobile, no todos nuestros diseños se había creado originalmente pensando en esos dispositivos.

Estos son algunos de los problemas con los que renegábamos constantemente al trabajar modificaciones en los diseños, por lo que decidimos encarar un Side-project, para atacarlos.

Generamos una base de código con un diseño muy sencillo y abierto para la generación de futuros diseños. Lo llamamos Base theme. En un principio lo publicamos para que nuestros Partners lo puedan utilizar en sus diseños a medida, y luego lo íbamos a poner a prueba en nuestros nuevos diseños.

Base theme — Mockup, Mobile, Desktop — Github Project

Si te interesa conocer más sobre este desarrollo, podes leer este artículo que cuenta como lo hicimos: “Base theme: un side-project no tan side”

La prueba de fuego

Desde la creación de Base theme pasaron 2 meses para que comencemos a trabajar en un nuevo diseño para Tiendanube. Era el momento perfecto para testearlo y si todo lo que habíamos planificado daba buenos resultados.

El objetivo era 1 diseño completamente nuevo, que a su vez tenga 2 versiones, mostrando flexibilidad y brindando posibilidades. Confiando mucho en el trabajo que habíamos realizado con el Base theme, decidimos encarar 2 diseños diferentes.

La primer propuesta la orientamos a tiendas de decoración y muebles, con imágenes grandes, aprovechando toda la pantalla, fotografías en gran tamaño y mucho aire. Un diseño limpio y contundente que luego llamaríamos “Idea”.

Idea — https://idea-theme.mitiendanube.com/

Cuando empezamos a aplicarlo al código del Base theme, descubrimos que el avance era tremendo. La velocidad para implementarlo fue muy alta. Teníamos mucho camino allanado. Los cambios más grandes pasaban por las particularidades del diseño, pero los componentes que ya tenía la base, absorbían los mayores esfuerzos.

El desafío más grande estuvo en las versiones del mismo diseño, que nos significó meterle mucha cabeza a las configuraciones y que con una simple acción por parte del administrador de la tienda, el diseño cambie sustancialmente.

Inmediatamente que terminamos la primera instancia de Idea nos pusimos a pensar Bahia, el segundo diseño. El resultado fue todavía más satisfactorio ya que se realizó en un tiempo aún menor y llegando a los plazos que nos habíamos propuesto.

La implementación de un diseño (en este caso 2) a partir de Base theme era un éxito.

Ajustando la mira

Luego de tener plena confianza en los resultados conseguidos, nos pusimos a analizar los estilos gráficos de todos nuestros diseños. Entendimos que a mayor cantidad de tiendas, mayores posibilidades y alternativas teníamos que brindar desde lo estético.

Estudiamos la situación, el mercado y muchísimos estilos, y fue cuando pudimos ver que no estábamos satisfaciendo una necesidad muy clara (hasta ese momento no lo era… por lo menos para nosotros) para el mercado de Brasil.

El tipo de sitio “Magazine”, se desprende de los portales o blogs, donde existen múltiples componentes con mucha información, gran número de destacados, diferentes tipos de contenidos y secciones dentro de una misma página. No teníamos ningún diseño que atacara esas problemáticas y nuestros clientes en Brasil lo estaban necesitando.

Con un promedio de cantidad de productos, categorías y menús mucho mayor al de Argentina, un diseño que contemple esto, atacaría directamente esta problemática.

Con ustedes… ¡Amazonas!.

Rápidamente ganó adoption en Brasil y se convirtió en uno de los Themes más utilizados.

Achicando diferencias

Con 3 diseños nuevos en 3 meses, lo que ocurrió fue que los más viejos quedaron desactualizados, desde lo técnico (código, plugins, estructura de archivos) como desde lo estético. Esto se traducía en un adoption muy bajo y decidimos trabajar en el reemplazo de uno de esos diseños: Boxy.

Mantuvimos las características particulares que tenía, pero agregamos todo lo nuevo, mayor flexibilidad y componentes que ya habíamos lanzado en Idea, Bahía y Amazonas.

Creamos Cubo, un theme pensado para tiendas modernas, con una estética limpia pero que admite una gran cantidad de productos, categorías, banners y destacados.

En este 2020 nos esperan nuevos desafíos para seguir ofreciendo a cada marca y sus clientes, la mejor experiencia de compra, desarrollando diseños que se adapten mejor a cada necesidad de negocio.

¡Muchísimas gracias por leer este artículo! estate atento, porque vamos a escribir más artículos sobre cómo va creciendo nuestro producto, nuestro equipo y nuestras experiencias.

Gracias al equipo de Consumers: Federico Iglesias, Bruno Navello y Valmir Alfonso, con los que trabajamos día a día para mejorar la experiencia y calidad de nuestros diseños.

--

--