Orienteed logo verde y blanco
Ir al blog

Cómo mejorar radicalmente el checkout y la búsqueda de un ecommerce

por Adrián Alonso, 6/9/2020, 8:37:07 AM

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? 

 

Entradas relacionadas

Suscríbete a nuestra newsletter

¿Quieres saber más sobre comercio electrónico, tendencias, artículos y eventos de la industria eCommerce? ¡Suscríbete ahora a nuestro boletín mensual!

Utilizamos cookies para mejorar su experiencia y nuestros servicios, analizando la navegación en nuestro sitio web. Si continua navegando, consideramos que acepta su uso. Puede obtener más información pulsando aquí:
Política de cookies
Logotipo de Orienteed

Política de Cookies

Una cookie es un fichero que se descarga en su ordenador al acceder a determinadas páginas web. Las cookies permiten a las páginas web, entre otras cosas, almacenar y recuperar información sobre los hábitos de navegación de un usuario o de su equipo y, dependiendo de la información que contengan y de la forma en que utilice su equipo, pueden utilizarse para reconocer al usuario.
Son aquellas cookies imprescindibles para prestar el servicio solicitado, recordar las preferencias de configuración, así como para fines de seguridad y prevención de fraude. La página web no puede funcionar adecuadamente sin estas cookies.
Son aquellas cookies que nos ayudan a analizar el uso que nuestros usuarios hacen de la web y el número de visitantes. Permiten obtener información del número de visitantes, del origen de los mismos, del navegador que utilizan, del tiempo que permanecen en cada página, cuantifican el impacto de los anuncios, etc.

Cómo denegar o revocar el consentimiento de cookies

Las cookies pueden bloquearse o eliminarse mediante la configuración del navegador. En los siguientes enlaces se detalla cómo hacerlo en cada uno de los navegadores más utilizados.