Un rediseño de The SilverTrap pensado primero para móviles y sin necesidad de una aplicación

  • Alek Tysklind
  • 7 min read
A Mobile-First, App-Free Redesign for The SilverTrap

The SilverTrap es una startup danesa con una trampa nueva y no tóxica para pececillos de plata (skægkræ), una plaga que se ha convertido en un problema común en hogares y empresas de toda Escandinavia. Su primera tienda era un tema Dawn básico y sin personalizar. La reconstruimos con el tema Horizon de Shopify como una tienda móvil primero y «sin aplicaciones»: las funciones que normalmente ofrecen las aplicaciones de pago, como las ofertas adicionales en el carrito y los mensajes de envío gratuito, están integradas en el tema, por lo que la tienda es rápida y barata de mantener. La tienda en línea se encuentra en thesilvertrap.dk.

Resumen del proyecto

Los fundadores de The SilverTrap habían diseñado y producido una trampa fabricada en Dinamarca, que utiliza únicamente ingredientes naturales y se puede recargar en segundos. Lo que les faltaba era una tienda que explicara rápidamente un tipo de producto nuevo y facilitara la compra desde el móvil. El sitio antiguo era genérico y no destacaba la marca.

Solicitaron un rediseño basado en un sitio de referencia de alto rendimiento, centrado en el móvil, ya que aproximadamente el 95 % de sus ventas provienen de teléfonos, y en la conversión. El reto consistía en ofrecer funciones que normalmente requieren aplicaciones (complementos del carrito, ofertas adicionales, mensajes dinámicos) sin depender de aplicaciones de terceros que ralentizaran el sitio.

Objetivos

  • Móvil primero Diseñar primero para el móvil y luego adaptar el diseño a la versión de escritorio.
  • Ecosistema sin aplicaciones Recrear funciones propias de las aplicaciones, como las ofertas adicionales en el carrito y los mensajes de envío gratuito, mediante Liquid y JavaScript personalizados para mantener la velocidad.
  • Contenido centrado en los beneficios Cambiar el enfoque de las especificaciones técnicas a lo que la trampa ofrece al cliente: un hogar tranquilo, sin veneno, sin contacto y recargas sencillas.
  • Fácil de mantener Utilizar los bloques anidados de Horizon para que el cliente pueda modificar los diseños sin dañarlos.

El diseño

Una página de inicio centrada en la marca

La página de inicio presenta un banner principal dividido en cuadrículas: una persona colocando la trampa junto a un rodapié, la trampa en sí y una escena limpia de un baño, cada una con una breve promesa («Recupera tu hogar», «Fácil, rápido y sin complicaciones»). Debajo, una fila de cuatro tarjetas de beneficios responde de un vistazo a las principales preguntas: entrega rápida (de 1 a 3 días con DAO), diseño danés, 100 % no tóxica y recargable. En la parte superior, una barra estrecha repite las promesas clave: envío gratuito a partir de 299 DKK, certificación e-mark y diseño danés.

La página de inicio de The SilverTrap en escritorio
La página de inicio: banner principal dividido en cuadrículas con la trampa en uso, tarjetas de beneficios y barra de promesas en la parte superior.

Paquetes adaptados al tamaño del problema

En lugar de vender un solo producto, la tienda ofrece conjuntos: de una, tres, seis, nueve y doce unidades. El selector de paquetes detalla exactamente qué contiene cada conjunto (trampas, cebo para la primera recarga, vasos de plástico), para quién es adecuado («para probar o complementar», «para apartamentos pequeños», «para un hogar de tamaño medio») y el ahorro respecto al precio habitual, además de marcar los paquetes más grandes con una etiqueta de envío gratuito. La comparación orienta a los clientes hacia el conjunto adecuado para su hogar.

El selector de paquetes de The SilverTrap
Elige tu paquete: qué contiene cada conjunto, para quién es adecuado, el ahorro y la etiqueta de envío gratuito en los conjuntos más grandes.

Una comparación que explica el producto

Un tipo de trampa nuevo debe explicarse. Una tabla comparativa enfrenta a The SilverTrap con las trampas de pegamento y el cebo envenenado en ocho puntos, desde su carácter no tóxico y seguro hasta su capacidad de recarga y asequibilidad, con una fotografía del producto en un hogar real junto a la tabla.

La tabla comparativa de The SilverTrap
Comparación con trampas de pegamento y cebo envenenado.

Una página de producto diseñada para facilitar la decisión

La página de producto va al grano: un encabezado claro, cuatro razones breves para elegir la trampa, el selector de paquetes con el precio y el ahorro, una breve indicación de idoneidad para el paquete elegido, un botón de añadir al carrito y una frase de «compra segura», con iconos de pago y promesas de entrega y devoluciones debajo. Una galería de fotos del producto y de estilo de vida se sitúa a la izquierda, y más abajo en la página se explica la historia del producto en bloques breves: por qué los pececillos de plata son un problema, cómo funciona la trampa y dónde colocarla.

La página de producto de The SilverTrap en escritorio
La página de producto: beneficios, selector de paquetes, precio, botón de añadir al carrito y promesas de entrega y devoluciones.

Un carrito que guía el pedido

El carrito es un cajón deslizante con las funciones que hemos integrado en el tema en lugar de añadir una aplicación. Si un cliente añade solo una trampa, el cajón le indica que se recomiendan al menos tres para un hogar y que el envío de tres trampas también es gratuito. Debajo de los artículos, una sección de «Otros también compraron» ofrece el cebo y una trampa adicional con un solo clic, y el cliente confirma las condiciones mediante una casilla de verificación antes de finalizar la compra.

El cajón del carrito de The SilverTrap
El cajón del carrito: recomendación de comprar al menos tres trampas, productos complementarios y casilla de verificación de condiciones.

En el móvil

En el móvil, las cuadrículas se apilan en una sola columna, la barra de promesas se desplaza, la galería de productos permite deslizar las miniaturas y el cajón del carrito ocupa toda la pantalla con las mismas ofertas adicionales y el mismo paso de verificación de condiciones.

The SilverTrap en el móvil
Móvil: la página de inicio, la página de producto y el cajón del carrito.

Cómo trabajamos

Base y tema

Elegimos Horizon por sus bloques anidados, que nos permitieron crear diseños complejos sin codificar cada sección, y configuramos una cuadrícula móvil primero.

Funcionalidad sin aplicaciones

Desarrollamos nosotros mismos las ofertas adicionales del carrito y la lógica de productos complementarios en Liquid y JavaScript, junto con los mensajes de envío gratuito, por lo que no necesitan aplicaciones de pago.

Contenido

Reestructuramos el texto del producto para destacar la marca y los beneficios de solucionar el problema, en lugar de presentar especificaciones áridas, y configuramos la tienda en danés para su mercado local.

Rendimiento

Revisamos el código para evitar la sobrecarga de scripts no utilizados y optimizamos los recursos para redes móviles, de modo que una tienda con muchas fotografías siga cargando rápidamente.

Resultado

The SilverTrap ahora cuenta con una tienda ágil y centrada en la marca que realiza el trabajo de una tienda con muchas aplicaciones sin las cuotas mensuales ni el coste de rendimiento: una página de inicio clara, un selector de paquetes, una página de producto y un carrito que guía a los clientes hacia el número adecuado de trampas. Está construida con Horizon, por lo que el equipo puede seguir editándola por sí mismo.

  • Rediseño móvil primero con el tema Horizon
  • Ofertas adicionales en el carrito y mensajes de envío gratuito integrados de forma nativa, sin aplicaciones adicionales
  • Selector de paquetes, tabla comparativa y página de producto centrada en los beneficios
  • Contenido del producto que destaca los beneficios y la confianza

Alek Tysklind

Desarrollador de temas de Shopify con más de 10 años de experiencia ayudando a empresas a crecer en línea.

¿Estás trabajando en una tienda de Shopify?

Cuéntame qué estás construyendo y dónde te has atascado. Lo revisaremos juntos en una llamada de diagnóstico gratuita.

Reserva una llamada de descubrimiento gratuita

Proyectos seleccionados

Sigue leyendo