Metropolitana nació hace más de cuatro décadas convirtiéndose en la empresa líder nacional en la comercialización de todo tipo de pisos, incorporando constantemente productos que acompañan los continuos cambios de estilo, servicios y tecnologías requeridos por el mercado actual.
El tipo de venta que realiza Metropolitana se conoce como venta consultiva. Esto se debe a que, a menudo, el cliente tiene dificultades en identificar el tipo de productos/materiales que mejor se adapten a sus necesidades y la cantidad que debe comprar. La irregularidad de las dimensiones de las superficies y los desperdicios propios de los cortes hacen que la estimación de cantidades a menudo no sea un tema trivial.
Se trata de una empresa con un marcado foco en sus clientes, consumidor final, empresas y arquitectos, lo que le ha brindado un prestigio bien ganado, tanto por sus políticas de atención, su servicio post venta y su asesoramiento siempre bien valorados.
La empresa es muy dinámica en acciones de marketing. A las clásicas mega liquidaciones que realiza dos veces al año se le suman una variada selección de promociones y ofertas que la caracterizan.
Cuando nos plantearon que querían iniciarse en el comercio electrónico, nos llenó de entusiasmo. La reputación de la empresa y los desafíos del proyecto eran un gran incentivo.
Los retos eran varios: la solución tecnológica debía soportar la estrategia y comunicación online marcada por la venta consultiva, los diferentes públicos, la sólida reputación que cuidar y un departamento de marketing muy dinámico.
La flexibilidad de BigCommerce nos daba la tranquilidad que necesitábamos. Scaffolding ya tenía una madurez y una estabilidad suficiente; partíamos con una serie de desafíos ya resueltos. Era claro que iba a crecer y recibir mejoras. Era el momento de demostrar el valor de Scaffolding y someter a prueba su arquitectura pensada para oficiar de base en una solución a medida.
El tema: Scaffolding
Diseño personalizado
Siendo una empresa vinculada al rubro de la decoración, el diseño del sitio era un tema de especial interés, así que desde el comienzo quedó claro que requería un diseño a medida.
También estaba claro que, dado sus constantes acciones de marketing, el sitio iba a tener evoluciones casi constantemente.
Sabiendo que BigCommerce libera nuevas versiones de Cornerstone periódicamente y que Scaffolding estaba en plena evolución, el primer desafío estaba en su arquitectura. Se había pensado desde sus inicios con una organización de templates y componentes de manera tal que, al aplicar nuevas versiones, tanto de Cornerstone, tema base Scaffolding, como de Scaffoilding, tema base de nuestros desarrollos a medida, los conflictos fueran mínimos y de muy fácil resolución.
Hoy, dos años después, podemos decir que Scaffolding permite actualizar versiones estándar y personalizadas de forma segura y en tiempos mínimos.
Sitio: https://metropolitana.com.uy/
Conversor de superficie a unidades
Un aspecto crítico de la compra de estos productos es la dificultad, por parte del cliente, para determinar la cantidad a comprar. La mayoría de los productos se venden en cajas o por metro lineal con un ancho fijo, pero el cliente lo dimensiona por metros cuadrados.
Para facilitarle al cliente el cálculo así como la comprensión del precio, se necesitaba desarrollar un convers de m² a cajas o a metros lineales de producto y mostrar el precio en m² además, naturalmente, del precio por unidad.
La solución vino de los custom fields del producto. Dependiendo del producto, el comercio carga los parámetros de conversión correspondiente facilitando al cliente que ingrese la cantidad en m² para que el conversor le defina la cantidad de unidades o viceversa, si el cliente elige las unidades se informa los m² que corresponden.
Adicionalmente, con esos mismos parámetros de conversión, se configuró uno de los Display Widget de Scaffolding para mostrar el precio por m².
Ejemplo: https://metropolitana.com.uy/pisos-de-madera/liston-h2o-piso-de-madera-de-6mm-resistente-al-agua
Destacar atributos del producto
Para hacer más atractiva la descripción del producto, Metropolitana nos planteó que se pudiera mostrar en la página del producto, íconos correspondiente a atributos que se quisieran destacar, de forma tal que de un vistazo rápido, el cliente pudiera identificar.
Nuevamente los custom field vinieron al rescate. Al agregar al producto un custom field de nombre _badges (Scaffolding no muestra los custom fields que comienzan con guion bajo) que contenga los nombres de los atributos a destacar, Scaffolding busca en el folder de Image manager, archivos de imágenes que tengan dichos nombres con extensión .png.
https://metropolitana.com.uy/pisos-de-madera/liston-h2o-piso-de-madera-de-6mm-resistente-al-agua
Promociones automáticas y ofertas
El comercio realiza dos promociones anuales caracterizadas por poner prácticamente todo el catálogo con descuentos. Estos descuentos suelen ser diferentes, incluso para productos de una misma categoría.
La aplicación del descuento lo tiene muy bien resuelto BigCommerce con sus Automatic promotions, con solo definir una regla para cada descuento queda resuelto.
Lo siguiente era destacar estas promociones en los listados productos. Siempre funciona destacar en el propio producto el descuento, mucho más efectivo que hacerlo con un banner al inicio de la página de la categoría. En este caso era obligatorio, en una misma categoría podían haber productos con diferentes descuentos.
Gracias a Display Widget de Scaffolding, esto tampoco representaba una dificultad.
El tercer requisito era disponer de una landing page en la que se listaran productos seleccionados agrupados por rango de descuento. Esto sí representaba un reto.
La solución vino gracias a la posibilidad de asignarle un template a una categoría. Fue así que se agregó un nuevo template de categoría a Scaffolding, que lo llamamos Subcategories. Este template puede listar productos agrupados por subcategorías. Creando una subcategoría para cada rango de descuento y asignándole los productos a destacar, se obtuvo la landing page solicitada.
Naturalmente, este listado con productos agrupados por subcategoría tiene múltiples uso, permite mostrar en una misma página, una selección de productos ordenada, que facilitan el descubrimiento de productos con la consecuente mejora de la experiencia de usuario.
FIG: Captura de la página de subcateoría con rango de descuentos
Mostrar variantes en páginas de categoría
Gran parte de los productos tienen variantes con diseños diferentes. Poder desplegarle las diferentes variantes ya en las página de categoría (o en los listados de productos en general), ayuda al descubrimiento de productos y representa una mejora en la experiencia del usuario, al no tener que entrar a cada producto para conocer las alternativas disponibles.
La funcionalidad Show Product Variant de Scaffolding (SPV) permite configurar que se muestren imágenes miniaturas de las variantes o swatch images de las opciones en listados de productos como categoría, feeds, resultado de búsqueda, etc.
Incluso SPV soporta la selección de estas miniaturas, mostrándola en forma ampliada, haciendo que Display Widget se actualice con los datos de la variante seleccionada, mostrando, por ejemplo, el precio correspondiente. Además, en caso de seleccionar el producto para ir a la página del mismo, la variante elegida es seleccionada automáticamente.
Ejemplo: https://metropolitana.com.uy/pisos-de-madera/
Mostrar el diseño seleccionado sobre la imagen
La preocupación de Metropolitana por informar claramente al cliente nos impuso otro reto también referente a las variantes: que al seleccionar una variante, el usuario viera en forma clara (sobre la imagen) el diseño elegido.
Display Widget ya actualizaba la información que mostraba al seleccionar una variante, pero nos faltaba tener el valor de la opción seleccionada para mostrarlo. Fue así que incorporamos un nuevo tipo de token a Display Widget: Variant option tokens.
Como su nombre lo indica, estos tokens refieren a las opciones de una variante. Por ejemplo, si se tiene una opción Color, el token {Color} toma el valor correspondiente al color de la variante seleccionada.
Con este nuevo token la solución era inmediata. Definiendo un Display widget con el contenido Diseño: {design} y ubicándolo sobre la imagen, el desafío estaba resuelto.
https://metropolitana.com.uy/pisos-flotantes/pisos-laminados-smart
Mostrar descuentos por medios de pago
Una característica que no es común a todos los países perop sí se tiene en Uruguay, es que los bancos (emisores de tarjeta de crédito) hacen acuerdos con los grandes comercios y ofrecen descuentos si el cliente utiliza sus medios de pago en la compra.
Nuevamente, Display Widget de Scaffolding brindó la solución. Configurando una regla de descuento es posible crear display widgets que muestren el precio rebajado, el ahorro o el porcentaje de descuento, incluso, para beneplácito de los bancos, incluir logo del medio de pago, llamando la atención sobre la oportunidad de ahorro.
Mailing a Clientes VIP
Como se mencionó al inicio, Metropolitana tiene diferentes públicos. Por ejemplo, colegios y arquitectos son dos de sus públicos a los que se le ofrece condiciones comerciales especiales.
Lo que se quería era enviarles un email de tal manera que al hacer clic e ir al sitio, se le comunicara a estos clientes en productos seleccionados, descuentos, cupones u otra comunicación sin que estos tuvieran que estar identificados en el sitio.
Display Widget permitía esa comunicación, el desafío era hacerlo solo a ciertas personas y sin necesidad de identificarse mediante login.
Surgió así un nuevo token: URL token.
Con solo agregar un parámetro a la URL que lo lleva al sitio, se puede definir un token con el valor deseado que estará disponible en cualquier bloque de Display Widget.
Por ejemplo, agregándole a la url el parámetro dwt_vip_coupon=PRE-BLACK-FRIDAY, se crea un token de nombre vip_coupon que tendrá el valor PRE-BLACK-FRIDAY. De esta manera, un display widget con el contenido "-15% con el cupón {vip_coupon}" mostrará a estos visitantes "-15% con el cupón PRE-BLACK-FRIDAY".
Peso del producto
Los productos de Metropolitana pueden pesar varios kilos. Un piso flotante de buena calidad para cubrir tan solo 10m2 llega a pesar 70kg y más.
Metropolitana, caracterizada por el cuidado del cliente, quería que el usuario tuviera presente el peso de manera de no sorprenderse con el costo de flete.
No era suficiente mostrar el peso unitario, sino que el objetivo era mostrar el peso correspondiente a la cantidad elegida. Se incorporó una funcionalidad que muestra, en lugar destacado, el peso total correspondiente a la cantidad seleccionada del producto.
Integraciones y aplicaciones
Metro 360
La venta consultiva suele requerir la intervención de una asesor de compra. Desde el inicio se definió que debía incluir la facilidad de un chat, en el caso de Metropolitana, la elección era WhatsApp.
Scaffolding tiene esa facilidad en forma nativa a través de su funcionalidad Contact Widget. Basta configurarlo, indicar en que lugares mostrarlo (puede ser en el menú y/o flotando en la parte inferior de la pantalla) para habilitar el chat en línea.
Sabiendo de su política de brindar asesoramiento y tranquilidad a sus clientes, el planteo fue configurarle el carrito al usuario en forma remota, sin siquiera requerir que sea un cliente logueado, el visitante podía ser anónimo.
Así se implementó Metro 360 que con un simple clic del usuario se comunica con un asesor de compra, e incluso puede compartirle su carrito para que el asesor revise su compra. Durante la comunicación con el cliente, el asesor selecciona los productos y cantidades que el cliente necesita para luego enviarle un link al cliente.
Al ir a ese link, el cliente es derivado a un carrito con los productos y cantidades seleccionadas por el asesor de compra. Así, el cliente termina la compra con la tranquilidad de que un asesor de Metropolitana lo asesoró en lo que debía comprar.
Product card widget
El cliente es un usuario asiduo de Page Builder y de Display Widget de Scaffolding. Cuando realiza campañas con descuentos, prefiere elegir individualmente los productos a mostrar y en que ubicación de la home hacerlo.
Los widgets de Page Builder, Product y Product set, permiten elegir los productos y ubicarlos en la home, pero estos no usan el template de product card (el que aparece en los listados de productos), por los bloques de Display Widget no se muestran, perdiendo así la posibilidad de desdtacar los elementos de promoción, justamente en la home.
Fue así que desarrollamos dos widgets para Page Builder, similares a Product y Product set de Page Builder, pero que utilizan el template product card, es decir, muestran los productos como se muestran en las categorías u otro listado de productos.
De esta manera, utilizando Page Builder, pueden seleccionar los productos en forma individual y ubicarlo en cualquier región de la home, y que estos se muestre con los bloques de destaque característicos de Display Widgets.
Peso del carrito
La preocupación de Metropolitana por informar el peso del envío, siendo que pueden ser de varias decenas de kilos, nos llevío a mostrar el peso del producto por la cantidad seleccionada, pero faltaba mostrar el peso total del carrito.
Esto era un poco más complejo pero las APIs de BigCommerce permitían la solución. Desarrollamos una funcionalidad que se comunica mediante APIs para obtener los productos del carrito, calcular el peso total y mostrárselo al cliente.
Stock al día
No hay dos opiniones, los clientes se sienten muy frustrados cuando compran un producto que finalmente no tiene stock. Tratándose de Metropolitana, este aspecto era no negociable, el stock debía estar al día para evitar a sus clientes una mala experiencia.
BigCommerce resuelve muy bien el informar la existencia o no del producto, pero naturalmente requiere que el stock esté actualizado. El ERP de Metropolitana es un sistema legacy desarrollado para la empresa que no dispone de APIs para poder acceder a la información, pero tiene la posibilidad de generar planillas Excel.
Utilizando las planillas Excel como formato de intercambio de datos, las APIs y webhooks de BigCommerce y un generador de planillas, nos permitieron automatizar el proceso de actualización de stock sin inconvenientes.
Obtener el código postal
En Uruguay no hay un uso intensivo del código postal, solicitarlo en el momento del checkout, puede que haga dudar al cliente y abandone la compra. Esto implicaba una pérdida de ventas y una mala experiencia del usuario, ambos problemas disgustaban a Metropolitana.
Naturalmente BigCommerce utiliza el código postal para establecer las reglas de shipping, por lo que era necesario obtenerlo.
La solución pasó por desarrollar un servicio que mapeara el 100% de las localidades de Uruguay para incorporar un auto-complete en el campo de localidad, que permitiera seleccionar fácilmente la localidad para el envío, obteniendo así el código postal correspondiente.
Así el cliente tiene absoluta tranquilidad que está indicando correctamente la localidad y el código postal correspondiente se ingresa en forma automártica.
Aplicar descuentos según medio de pago
Scaffolding, a través de una de su funcionalidad más destacada, Display Widget, nos permitió fácilmente informar el precio del producto, el ahorro o el porcentaje de descuento si el cliente opta por un determinado medio de pago.
Lo que faltaba era aplicar el descuento si correspondía y mostrarlo tanto para el cliente como para el merchant. Dado que no es común este tipo de descuentos, necesitábamos desarrollar una solución.
Con el Bank Identification Number (“BIN”) era fácil identificar si correspondía descuento o no, y con las facilidades para modificar el carito y la orden a través de las APIs de BigCommerce, se implementó una solución que aplica correctamente el descuento, lo detalla en la orden y lo informa claramente al cliente como al comercio.
Conclusiones
BigCommerce y Scaffolding nos permitió sortear todos los retos y desarrollarle a Metropolitana una ecommerce que cumple con todos sus requisitos.
La flexibilidad de BigCommerce, con sus APIS y webhooks, nos facilitó desarrollar las particularidades que el proyecto requería. Sumado a nuestra plataforma en Drupal, preparada para desarrollar servicios que interactúen con BigCommerce en forma simple y segura, nos permitió desarrollar integraciones y apps en forma muy eficiente.
Scaffolding por su lado, nos permitió iniciar el proyecto con gran parte de los desafíos resueltos y su arquitectura, pensada para montar soluciones custom sobre el tema, hizo el resto para que los desarrollos particulares sobre el tema, se hicieran con menor esfuerzo.
Luego de dos años, nos enorgullece saber que el cliente está muy satisfecho, que el sitio sigue evolucionando y brindando las soluciones que la estrategia de Metropolitana requiere, con solidez, seguridad y eficiencia.