Volver a trabajosCaso de estudio / 02

eCommerce · Landing pages · Mobile first

Del clic en el anuncioa una decisión más clara.

Landing pages mobile-first para múltiples productos de Happy Mammoth. Traduje mensajes de campaña desarrollados con copywriters en jerarquías visuales claras, módulos reutilizables y un recorrido de compra sin fricción.

Happy MammothLanding Pages
Landing PagesLanding Pages
ClienteHappy Mammoth
RolSenior Brand & eCommerce Designer
EnfoqueLanding pages · Jerarquía visual · Iteración informada por CRO
Fecha2026
Conexión de mensajeMobile-firstHistoria de productoCRO-informedDiseño responsiveeCommerce

El contexto

El anuncio iniciaba la conversación.

Cada landing page recibía visitantes directamente desde campañas pagas. Los copywriters definían los mensajes de campaña y producto; el diseño debía conservar esa continuidad, responder preguntas visualmente y mantener el impulso hacia la compra.

El desafío

Específica para convencer. Sistemática para escalar.

Distintos productos, públicos y ángulos de campaña aprobados necesitaban ejecuciones visuales propias sin reconstruir cada página desde cero. En mobile, cada sección tenía que justificar su lugar.

Pantalla de landing
Página

Dirección y ejecución

Mensaje aprobado. Recorrido visual claro.Construido alrededor de la decisión.

Partiendo del copy desarrollado por copywriters, transformé cada mensaje en jerarquía visual, secciones modulares y recorridos responsive; después refiné énfasis y ubicación mediante observaciones de CRO.

01

Traducir el mensaje aprobado

Convertí la dirección de campaña provista por copywriters en una primera pantalla visualmente continua con el anuncio.

Tráfico pago · Message match · Primer fold

02

Diseñar la jerarquía mobile

Priorizé producto, beneficio, prueba y CTA en pantallas pequeñas antes de expandir el layout.

Mobile first · Jerarquía · CTA

03

Ubicar la evidencia con intención

Ingredientes, explicaciones, testimonios y garantías aparecieron donde podían resolver la siguiente duda.

Educación · Prueba · Confianza

04

Refinar el flujo de conversión

Ajusté módulos, énfasis y comportamiento responsive usando aprendizajes de campaña y observaciones de CRO.

Iteración · CRO · Responsive QA

El sistema de páginas

Estructura reutilizable. Ejecución específica.

04 / Módulos
01

Entrada desde anuncios

Un primer fold que continúa el lenguaje y la promesa visual del anuncio.

02

Jerarquía visual del mensaje

El copy aprobado se traduce en una secuencia clara desde el problema y el beneficio hasta el mecanismo y el valor.

03

Apoyo a la decisión

Prueba, ingredientes, FAQs y garantías alrededor de preguntas reales.

04

Módulos responsive

Secciones reutilizables que se adaptan entre productos sin volverse genéricas.

Páginas seleccionadas

Distintos productos. Un mismo lenguaje de conversión.

Una selección de estructuras que muestra cómo el sistema visual se adapta entre productos, mensajes aprobados y etapas de la decisión.

Pantalla de landing
Página
Pantalla de landing
Página
Pantalla de landing
Página

Experiencia mobile

El mismo mensaje aprobado, reconstruido visualmente para la pantalla más chica.

Capturas mobile que muestran cómo se adaptan la jerarquía, el ritmo de contenido y el recorrido de compra sin modificar la dirección de campaña.

Landing mobile
Mobile
Landing mobile
Mobile
Landing mobile
Mobile
Landing mobile
Mobile

El resultado

Un framework repetiblepara historias de producto enfocadas.

Páginas que conectan visualmente la intención de campaña, la educación del producto y la compra en un solo recorrido.

El sistema permitió adaptar layout, jerarquía y módulos entre productos manteniendo consistentes los mensajes aprobados, la experiencia mobile y la ejecución final.

Los copywriters definieron los mensajes. Las observaciones de CRO informaron la iteración visual y la ubicación de contenidos.

Próximo proyecto

Beyond Alpha Design System & Website