Cómo construimos Woven Inc

La leyenda de la ropa personalizada obtiene el cambio de imagen de los Harpers

¿Quién es Woven Inc?

Woven Inc es uno de los líderes del Reino Unido en ropa personalizada que ofrece solo los más altos estándares de serigrafía, bordado, transferencias y acabado de prendas.

Su equipo tiene una vasta experiencia en ropa personalizada que incluye serigrafía y bordado. Utilizan algunas de las últimas técnicas para proporcionar un acabado inigualable en su ropa.

Debido a este alto estándar, Woven Inc. se ha convertido en el proveedor de servicios cuando las empresas necesitan su marca de ropa.

¿Qué fue lo breve?

Se le pidió a Harpers que rediseñara el sitio web existente para que sea más fácil de usar con el fin de maximizar su potencial SEO.

Nos dijeron que nos mantuviéramos cerca del esquema de color y la marca originales y que mejoráramos las líneas de productos disponibles para los clientes.

También fue necesario crear una importación de los catálogos de proveedores externos para que los productos y los datos se puedan actualizar fácilmente cuando sea necesario.

¿Cómo lo hicimos?

Decidimos hacer de este un tipo de diseño de material con diseños de bordes y sombras en productos y botones.

Como Woven Inc tenía una gran cantidad de líneas de productos y variaciones de esos productos (alrededor de 5000 productos, cada uno con un posible 10 a 50 variaciones) necesitábamos un sistema de categorización y filtro completo.

Además de esto, necesitábamos conectarnos a varias cuentas de redes sociales, como Instagram, y mostrar imágenes de trabajos anteriores y existentes.

El final resulto

La página de inicio

Mantuvimos las cosas simples en la página de inicio con intros, llamadas a acciones y algunos enlaces rápidos a las secciones de productos.

Creamos algunos efectos de rebote de tipo elástico para cuando los botones se muestran y cuando el texto se reproduce originalmente en la pantalla.

Categorías personalizadas

Las páginas de categoría son fáciles de navegar debido al sistema de filtro a la izquierda de cada página. Los visitantes pueden filtrar rápidamente por categoría, color, marca, precio y más.

Los propios productos contienen calificaciones que han sido otorgadas por clientes anteriores y compradores de esos artículos.

Páginas de tableta

Como todos los sitios web, Woven Inc. necesitaba adaptarse bien a diferentes resoluciones y tipos de dispositivos. En particular, el impacto de las imágenes de alta resolución debía ser igual de bueno sin importar el tamaño del dispositivo que esté viendo.

Vistas móviles

Más del 50% del mercado de navegadores ahora ve sitios web en dispositivos móviles. Si su sitio no responde (se adapta a todos los tipos de resoluciones) está perdiendo negocios.

Movimos cosas como los menús de página y la funcionalidad de búsqueda fuera de la pantalla hasta que el usuario las activó y simplificamos el diseño para teléfonos inteligentes.

Las cosas técnicas

Estadísticas

Básicamente, creamos este sitio web desde cero, pero importamos los datos existentes del producto y las páginas de información. Estas son algunas de las cosas que hicimos…

Funcionalidad de comercio electrónico con filtro y búsqueda en vivo

Integramos el sistema de WooCommerce en el motor del sitio para habilitar la funcionalidad de comercio electrónico y luego lo excluimos, por lo que solo se activaron las funciones que necesitábamos. En la solicitud de los clientes, la funcionalidad de la cesta de la compra se deshabilitó hasta más tarde en el trimestre cuando se sintieron listos para comenzar a procesar los pedidos en línea.

También creamos un sistema de filtro en vivo para que los visitantes puedan profundizar en los productos disponibles para mostrar solo lo que les interesa. Basamos este sistema de filtro en la marca, el tipo de ropa, el color, el tamaño y otros parámetros.

DevOps

Movimos el sitio web de Woven Inc de su alojamiento compartido lento a un VPS dedicado y optimizamos el sistema para que funcionara como un rayo. También migramos la base de datos a MariaDB y el servidor web a NginX por motivos de velocidad.

Scripts

Eliminamos WordPress al núcleo e integramos la biblioteca de animación GSAP para algunos efectos extravagantes, como deslizar los paneles, desplazar hacia abajo las páginas y los efectos elásticos en los botones emergentes. También inhabilitamos una gran cantidad de engrosamiento de encabezados que viene con WordPress, como los puntos finales de API.

Optimización

Utilizamos muy pocos complementos (como es habitual) y, en cambio, codificamos nuestra propia funcionalidad para el sitio web. Esto nos permitió mantener el código al mínimo y solo ejecutar las rutinas que el sitio necesitaba. También escribimos reglas de servidor web específicas para ngx_pagespeed y distribuimos el sitio en Cloudflare para que se cargue instantáneamente, sin importar desde qué lugar del mundo lo esté viendo el usuario.