Contacto
Pedro Romo
[email protected]

Eesy Beauty

Un marketplace para centros de estética en Barcelona, Madrid y Sevilla. Desarrollo frontend, template custom y funciones REST API para una experiencia de compra rápida y altas conversiones.

  • Strategy

    E-Commerce, Wordpress, API REST, Google Maps API

  • Client

    Eesy Beauty

  • Fin de soporte

    Junio 2021

Mockup proyecto Eesy Beauty

DESAFÍO

Lanzar un e-commerce atractivo y fácil de utilizar para usuarios y administradores del sitio.

Desarrollo Frontend, Backend, Optimización de performance, SEO e infraestructura.

PRIMEROS PASOS CON EL FRONTEND

No hay mal final para un buen principio

Recibí un mockup muy completo. Con instrucciones, comentarios, imágenes en alta definición, croppings y comportamientos muy específicos. Un archivo de Illustrator de un poco más de 500mb que había que transformar en un sitio Web funcional, liviano y con altas conversiones.

DESARROLLO DEL BACKEND

No arregles lo que ya funciona

En una de las reuniones de avance surgió que el sitio debía tener una escala muy superior a la proyectada: 1400 centros de estética operativos, más las funciones administrativas del staff de la empresa. Esto cambió bastante la estructura respecto al backend.

Encontré un template de un sitio Web líder con excelente performance y decidí editar el código quitándole funciones innecesarias y agregando requisitos propios del proyecto: no arregles lo que ya funciona.

refactorizando template de Wordpress para Eesy Beauty

REFACTORING

  • Actualización de funciones WordPress y sintaxis a PHP 7.4
  • Eliminación y optimización de consultas a la base de datos (este plugin fue mi ayuda definitiva para conocer cada movimiento SQL)
  • Actualizción de clases CSS a Flexbox para reducir código y mejorar Web Core Vitals
  • Generar marcado basado en Schema.org para mejorar el posicionamiento en buscadores (SEO)
  • Generación de URLs de producto utilizando funciones Rest API
  • Remoción de componentes innecesarios, scripts, hojas de estilo, plugins, tipografías y todo lo que no sea requerido.
Proceso de compra completo. Desde el frontend hasta el email

PROPÓSITO

Convertir, convertir: vender

Convertir. Incorporando incentivos y técnicas de marketing: cupones de descuento, descuentos por cantidad, membresías, regalos, promociones volátiles.

Todo debió ser ajustado dentro de Woocomerce para evitar fraudes de usuarios y errores por parte del staff que trabaja en el sitio.

El backend debía generar vouchers únicos que se generaran al vuelo en .pdf y se envien por email. Luego de unos días, preguntar automáticamente al usuario cómo fue la experiencia y pedir una reseña. En caso de que fuera positiva generar un descuento del 5% para la próxima compra en concepto de agradecimiento.

Funciones custom muy interesantes.

REFACTORING WOOCOMMERCE

  • Script custom para evitar la compra de más de 2 vouchers por usuario, administrable desde el CMS (usé Advanced Custom Fields versión free)
  • Fields custom para generar rebajas especiales destinados a determinados usuarios (sin cupón).
  • Edición del template original de producto refactorizado al 100%, con slide de imágenes full-width, API de Google Maps.
  • Sistema de reseñas con envío de recordatorios automáticos, anti-spam y hardcodeables.
  • Tabs administrables indivudualmente (usé Insert PHP Snippet para evitar uso de plugins en Frontend y resolverlo con código crudo (más rápido, seguro y eficiente).
  • Generación de custom fields con marcado específico en el template basado en Schema.org integrando precios rebajados, duración de la oferta y puntuación del servicio (hardcodeable manualmente) apuntando a potenciar el posicionamiento SEO.
  • Seguimiento de clicks, carritos abandonados, productos eliminados de la orden, conversiones en JetPack, Google Analytics, Facebook Pixel y herramientas de análisis de comportamiento.

INFRAESTRUCTURA

El stack backend más avanzado

Stack utilizado

Wordpress es un CMS seguro, estable, con una extensa comunidad, flexible y así como está… ineficiente.

Renderizar una página implica consultar la base de datos, traer los recursos, interpretalos y enviárselos al cliente, en una versión muy simplificada. Se trata de muchos componentes que deben funcionar con óptima performance para lograr una experiencia ágil y buen posicionamiento en buscadores.

Los últimos días del proyecto los dediqué a afinar los mecanismos con múltiples técnicas de caché: browser, página y objetos, apoyándome en un servidor Clase A basado en Linux y customizado al detalle.

CÓMO LOGRAR UN BACKEND REACTIVO

  • Servidor VPS con instancias redundantes en Amazon Web Services basado en Linux CentOS 7
  • Caché de páginas con NGINX
  • Caché de objetos con Redis
  • Protección contra DDos con Bitninja
  • CDN y balance de carga con CloudFlare
  • Aislamiento de servicios (Redis, Backup) contenida en Docker
  • Políticas avanzadas de browser caché
  • Alertas de performance y carga con Pingodm Tools y Loader.io

¿250 usuarios concurrentes?
Muy suelto

Prueba de carga con hasta 250 usuarios concurrentes por minuto. 400ms de tiempo de respuesta promedio: un 50% mejor que los valores recomendados por GTMetrix.

Examen completo de performance
El soporte al proyecto finalizó en junio de 2021.
Las diferencias con el mockup o estadísticas de performance se deben a cambios posteriores introducidos por la empresa.