Hoy os traemos un nuevo business case donde hemos tenido la oportunidad de trabajar sobre un e-commerce ya existente y mejorar radicalmente la experiencia de compra, sin intervenir en la apariencia de la web. 

 

Uno de los grandes hitos de este proyecto ha sido el cambio del proceso de checkout hacia una solución más dinámica y sencilla y una optimización de la función de búsqueda. Con este cambio, y desde la selección del artículo, el cliente puede concluir la compra en menos de 45 segundos. Y, por supuesto, realizar una búsqueda definida de los artículos de la tienda (por marcas, colores, categorías, etc…) o un filtrado dinámico e inmediato en el propio listado de productos.

 

Se trata de un proyecto realizado sobre una tienda de gafas multimarca, líder en su segmento, y que, como veremos se enfrentaba a diferentes problemas de rendimiento y user experience. 

 

Para conseguir este objetivo aplicamos diferentes tecnologías en diferentes niveles de la web (front y back). 

 

Problemas que afectan a la conversión

El e-commerce sobre el que trabajamos tenía numerosas carencias que comprometían enormemente los resultados de conversión. Los más importantes y urgentes de resolver eran los siguientes:

 

1. Mal rendimiento de la web, con una navegación lenta y poco segura.
2. Un checkout con errores y poco intuitivo.
3. Puntuaciones muy bajas en Lighthouse, estándar del mercado para las métricas básicas.
4. Sin posibilidad de generar contenidos de marketing y modificar catálogo de una manera sencilla.
5. Búsqueda y filtrado de productos lentos y con problemas

 

Todos estos puntos tenían un efecto directo sobre ratios de conversión, pero también de usabilidad en lo que se refiere al tráfico desde móvil, un punto crítico.

 

Qué tecnologías hemos empleado:

El éxito de nuestro proyecto e-commerce ha sido emplear diferentes tecnologías para combatir cada uno de los problemas, diferenciándose de la solución utilizada originalmente, monolítica y poco flexible. Todo esto focalizándose además en no provocar un incremento de costes sobre los actuales.

 

Este approach nos ha permitido trabajar de forma desconectada en las diferentes partes de la web y aplicando la mejor solución disponible para resolver cada uno de los problemas que fueron definidos en el scope.

 

Entre las tecnologías que hemos utilizado en este proyecto se encuentran las siguientes:

 

Para un mejor rendimiento

 

• Utilizamos Static Site Generator (SSG) para acelerar la navegación y convertirla en una experiencia rápida y fluida. Esta tecnología nos permite generar un sitio web con aparente contenido estático, por lo tanto muy rápido, pero cuyo origen de datos es dinámico y flexible.
  La tecnología usada en concreto ha sido Gatsby, solución SSG basada en React.

 

Para acceder al catálogo y contenidos de marketing de forma sencilla

 

• Un Content Management System independiente y SaaS (Software as a Service), para gestionar todos los aspectos dinámicos del site a través de una interfaz web accesible y fácil de usar, y pudiendo mantener tanto catálogo como contenidos de marketing de manera directa o través de cargas de datos masivas.
  Optamos por DatoCMS, una solución SaaS altamente flexible y configurable.

 

Para mejorar el sistema de pago

 

• Se optó por utilizar una herramienta de Checkout tipo SaaS, para implementar un checkout ágil y moderno de manera rápida pero con la flexibilidad necesaria tanto en métodos de envío, tipos de pago, gestión de direcciones, etc.
  SnipCart es una solución sólida y potente que permite una gestión integrada de todo el flujo de un pedido.

 

Para mejorar el sistema de búsqueda y filtrado

 

• Aprovechando la aproximación SSG, se implementó una búsqueda en cliente, de manera que la búsqueda de catálogo es inmediata y efectiva. De esta manera, al inicializar la página de construyen índices que pueden ser usados en cualquier momento durante la navegación. El filtrado se realiza de la misma manera, utilizando los índices de manera flexible para generar resultados filtrados sobre la lista de productos de manera inmediata.
  Js Search es una librería actualizada y con implantación en el mercado que provee todas estas funcionalidades de forma cómoda y fácil de utilizar desde JavaScript.

 

Cómo funciona el nuevo check out

La elección de SnipCart nos permitió incorporar fácilmente una pasarela de pago a una web ya existente, sin complicaciones adicionales y de manera personalizada.

 

Esta tecnología, cuenta además con integraciones fundamentales en cualquier e-commerce, como son por ejemplo, el pago desde móvil, la conexión a múltiples pasarelas de pago, aplicación de descuentos, opciones de envío, etc…

 

Sin embargo, el gran cambio viene desde el punto de vista del usuario, siendo posible realizar una compra sin registro en menos de 45 segundos.

 

El nuevo checkout es totalmente responsive y permite personalizaciones importantes en este sentido, como por ejemplo cambiar el tamaño de los botones de compra en la versión móvil (que generalmente deben ser más grandes) o el tamaño y los colores de la fuente.

 

También nos permite realizar la compra como invitado, sin la barrera que supone cubrir un formulario con campos de información que no son necesarios.

Cómo hemos mejorado la función de búsqueda y los filtros

La búsqueda y los diferentes filtros han pasado ahora a ser algo inmediato, de carga muy rápida, y que transmite la misma sensación de “navegación estática” que el resto de la web. 

 

Basta con configurar una fuente de datos, el catálogo proveniente del CMS, y una serie de índices, propiedades del catálogo a elección del cliente, para que la búsqueda y los filtros queden configurados y accesibles en cualquier momento de la navegación.

 

Con la propia configuración de los índices se construye el listado de posibles valores de los filtros, de manera dinámica utilizando los datos existentes del catálogo.

 

Además, se pueden utilizar diferentes estrategias de búsqueda (resultado exacto, parcial, con prefijos,...) de manera muy fácil y cómoda, incluso pudiendo implementar nuestras propias estrategias personalizadas (por ejemplo, case insensitive pero con restricciones para palabras clave).

 

¿Qué os parece nuestro último proyecto? ¿Tenéis experiencia usando tecnologías similares?