3818 Design & Development

Integración con E-commerce

Problema

Nike no tiene su propio e-commerce en Argentina, por lo tanto tienen presencia en plataformas de e-commerce de terceros como por ejemplo: Dexter, Moov o Stockcenter. El problema es que sus productos no aparecen destacados del resto. Con cada campaña de lanzamiento de un producto no pueden obtener una presentación de calidad y exclusiva.

Solución

Generar una presencia de calidad, con un diseño exclusivo para cada campaña, explotando cualidades de diseño y desarrollo integradas a una plataforma de e-commerce de un tercero.

Proceso

Inicio

Con Nike estuvimos trabajando desde mediados de 2016. Fue un proceso largo y hubieron distintas etapas en donde fuimos evolucionando como equipo y ajustando las activaciones a las nuevas necesidades. La problemática de Nike es sencilla, aunque es un gran desafío y un proceso muy complejo construir una solución a medida para cada activación que va cambiando con cada lanzamiento.

Con Nike fuimos teniendo una evolución constante, proponiendo nuevas tecnologías, nuevos métodos y procedimientos que hicieron que cada activación sea un éxito. Actualmente llevamos más de 25 activaciones desde Agosto de 2016 y seguimos avanzando, aunque la primer activación que hicimos fue un gran experimento. No podemos hablar de cada una de las activaciones porque sería muy extenso, por eso dividimos toda la evolución en distintas etapas.

Etapa 1: Integración a e-commerce de terceros

Las decisiones que tomamos en esta etapa fueron el punto de partida para las próximas y una sólida base para comenzar a explorar nuevas propuestas. Una de nuestras primeras activaciones fue para el AirMax Day donde integramos un poco de diseño con una página interna del Prestashop de Tienda Fitzrovia. Las pautas de diseño y desarrollo las fuimos limitando cada vez más debido a la complejidad que tienen los e-commerce para modificarlos. Cumplimos con AirMax Day, pero no sentíamos que teníamos toda la libertad de exploración en diseño y tecnologías.

Pronto llegó la campaña de Magista que se iba a lanzar en Sportline y en Stockcenter. Teníamos que encontrar la forma de que el diseño que realicemos sea reproducible en cuanto a estética y tecnología se refiere en ambas plataformas de e-commerce. Veníamos de una experiencia de poca calidad visual debido a las limitaciones en Prestashop y nos encontramos que estas dos próximas activaciones iban a desarrollarse en una plataforma conocida como V-Tex, que es mucho más grande, monolítica y en su momento contaba con poca documentación y servicios. Teniendo todas estas contras y limitantes en nuestro camino, comenzamos a realizar pruebas, muchas de ellas fallaron; hasta que a partir de patrones, comportamientos y experiencias recolectadas, construimos una estrategia que nos permitió “separar” la página de la activación del resto del e-commerce y sus tecnologías, aunque nos ocupamos que a la vez sigan manteniendo una conexión funcional para consumir el stock y conseguir un proceso de compra que siempre terminaba en el e-commerce original.

La decisión de utilizar esta estrategia nos permitió también dar aspectos muy personalizados y con mucha imagen de marca a las activaciones. Pudimos explorar y cambiar la experiencia de compra para que sea exclusiva de Nike y de cada activación. Esto fue solo un inicio de lo que vendría más a futuro con las distintas exploraciones en diseño.

Etapa 2: Exploración visual avanzada y cambio de server

Estando conformes con la estrategia de cada campaña comenzamos a concentrar más esfuerzos en el apartado visual. Gracias a nuestro equipo de diseñadores y a los requisitos claros del cliente, conseguimos mejorar la experiencia de compra separando la página en diferentes áreas. Una de las ventajas de la explotación del diseño en esta etapa fue la inclusión de una descripción detallada del producto que se estaba lanzando. En las activaciones anteriores el concepto principal se basaba en “cajas de compra” con seleccionador de talle y cantidad. Fidelizar al cliente es un punto muy importante para Nike y incluir dedicadas descripciones con detalles interesantes de cada producto fue un punto que marcó un antes y un después en cómo presentamos los lanzamientos.

Comenzamos a escalar bastante en cuanto al apartado visual y con esto llegaron más requisitos para hacer más exclusiva la experiencia de comprar un producto de Nike. La inclusión de material 3D fue un punto interesante. Cada activación comenzaba a tener contenido 3D, una zapatilla que tenía una animación de despiece cuando clickeamos un botón, varias zapatillas que giran mostrando la totalidad del producto, cambio de color en el modelo 3D, etc. Fue un proceso interesante que según las métricas de Google Analytics, comenzó a atraer más usuarios a las páginas. Con la llegada de más visitantes consideramos la sana opción de utilizar un servidor dedicado y exclusivo para estas activaciones de Nike. Debido a la importancia de cada activación y para mejorar aún más la experiencia de compra, evitando congestiones o caídas, decidimos tomar este camino de generar exclusividad para nuestro cliente.

Etapa 3: Gridwall y carrito

Con la etapa anterior logramos una estabilidad visual y sistemática que nos permitía replicarla en cualquier e-commerce. Pero no todas las campañas tenían la misma importancia, incluso muchas de estas ocurrían en simultáneo y había que dividir esfuerzos. Debido a estos factores, en algunas campañas utilizamos una grilla de productos en vez de utilizar una descripción detallada, esto también se debe a que en algunas campañas no se tenía un producto de lanzamiento sino muchos, por ejemplo: Air Max Day en donde la cantidad de productos era inmensa.

Esta decisión trajo a colación otro desafío, donde la experiencia de uso se veía afectada ya que al clickear en el botón “comprar” y llegar al checkout (caja) del e-commerce, teniendo que retroceder en el sitio para poder comprar otro producto distinto, por lo que tuvimos que implementar un carrito propio en donde el usuario pueda agregar varios productos a este carrito y concluida la selección el usuario accione el botón que “envía” en un solo paso todos esos productos seleccionados al checkout. Por supuesto que esto fue una experiencia a nivel técnico y de desarrollo muy interesante, pero que sin dudas fue un gran paso adelante en cuanto a la construcción de un producto digital como lo es un e-commerce.

Etapa 4: Personalización de compra

Con unas propuestas de diseño bien consolidadas y la inclusión del carrito a las activaciones llegó una etapa en donde le dimos muchas herramientas a nuestro cliente para que pudiera contarnos más acerca de sus objetivos. El inicio del próximo gran paso vino con los lanzamientos de las camisetas de Boca y Rosario Central, donde le queríamos dar al usuario la posibilidad que de alguna forma pueda configurar el equipo deportivo según sus gustos y talles. Por ejemplo: brindar la posibilidad de llevar 2 camisetas suplente de talles distintos, un pantalón titular y un par de medias titular. Esta ventaja de configurar la compra vino acompañada de un “maniquí” digital estático al que se mostraba una u otra prenda según la selección.

Este concepto maduró y tuvo un hito importante con la llegada de Nike Tights (calzas deportivas) en donde desde la experiencia de uso y el diseño, explotamos las posibilidades que habíamos iniciado antes. En este gigante lanzamiento, el usuario podía literalmente vestir un maniquí digital, girar el modelo 3D para verlo de todos los ángulos, seleccionar los ítems que más le interesen y agregarlos al carrito todos juntos para proceder a la compra.

Esto supuso un desafío increíble para el equipo, hubo mucha más gente dedicada al proyecto que en otras activaciones, trabajamos con más iteraciones de diseño y prototipos, debatiendo a diario y proponiendo soluciones en base al feedback que generamos. Este proyecto también contaba con un gridwall de productos (listado en forma de grilla), esto significa que el lanzamiento de la campaña comenzó por lo más sencillo, teniendo la posibilidad de comprar cualquier producto y luego trabajamos sobre la versión extendida con maniquí. Esta metodología se conoce como Mínimo Producto Viable y se pone en evidencia en productos de tallas mayores como esta activación. Este método nos permitió a nosotros trabajar con más enfoque y le permitió a nuestro cliente comenzar a vender sin tener una versión final.

Etapa 5: Versión mobile

Todos los lanzamientos tienen su versión responsiva o adaptada a dispositivos móviles. Versión PC, tablet y smartphone. Sin embargo la constante evolución y por diversos requisitos del cliente, comenzamos a hacer 2 versiones de los lanzamientos. Los dos casos que dieron el comienzo a esto fueron el lanzamiento de la camiseta de Boca 2017 y la camiseta de Argentina Basket NTK 2017 en donde preparamos un desarrollo exclusivo para PC y otro para dispositivos móviles. La versión de PC se pensó para entrar más en detalle del producto, conocer las cualidades y convencer al usuario para que compre. El objetivo siempre fue incrementar las ventas y con la versión móvil lo que logramos es generar una relación más directa entre el producto y el consumidor aunque tuvimos que sacrificar la profundidad de la descripción. Estas decisiones hicieron que multipliquemos los esfuerzos por dos.

Con la llegada de Air Force 1 comprendimos que si bien necesitábamos una experiencia móvil más directa no podíamos darnos el lujo de multiplicar esfuerzos. Desde las primeras activaciones, el equipo de desarrollo había comenzado a generar un framework propio para estimular y facilitar el proceso de implementación en cada lanzamiento. Luego de más de un año de evolución, habiendo recaudado experiencia y teniendo esta situación de versión móvil y pc en mente, tuvimos que comenzar a reescribir el framework y llevarlo a otro nivel, optimizando los procesos, aprendiendo de los errores, de los requisitos y sobre todo generar de una forma inteligente dos versiones de una misma página utilizando exactamente el mismo código. Esta solución trajo también un replanteamiento el proceso de diseño, en donde la exploración visual estaría más controlada que antes pero en un equilibrio justo para brindar la mejor experiencia posible.

Es así que culminamos estos lanzamientos con versiones móviles estéticamente muy lindas, muy prolijas en el código y con una performance elevada. Sin duda para nosotros la versión más equilibrada de todos los lanzamientos.

Conclusión

Nuestro trabajo con Nike es un claro ejemplo de un trabajo impulsado por la persistencia, la dedicación, el trabajo en equipo multidisciplinario y un claro horizonte al cual dirigirse. El trabajo constante nos permitió evolucionar los procesos y evolucionar la forma en la que comprendemos al cliente, implementar nuevas tecnologías, tomar decisiones certeras y crecer como agencia. Nike pudo cumplir con todos sus lanzamientos en tiempo y forma y sin duda hemos generado una confianza mútua de trabajo que ha sido beneficioso para ambos.