← Todos los proyectos
UI Design Figma E-commerce

Mahou San Miguel

Rediseño de interfaces web para la experiencia de compra de entradas y eventos. Nuevas funcionalidades, línea visual actualizada y experiencia responsive para todos los dispositivos.

Cliente
Mahou San Miguel
Alcance
Rediseño de interfaces completas
Rol
UX/UI Designer
Tech stack
Figma
Año
2022

Modernizar la experiencia de compra de experiencias y eventos

Mahou San Miguel, marca líder en el sector cervecero español, necesitaba actualizar la interfaz de su plataforma de venta de experiencias y entradas. La sección "Experiencias" requería una modernización visual y funcional para mejorar la conversión y la experiencia del usuario.

El proyecto incluía:

  • Adaptación de la sección "Experiencias" a una nueva línea visual
  • Diseño de nuevas funcionalidades para la compra de entradas
  • Creación de landings para categorías de productos
  • Diseño de página explicativa "Compra recurrente"
  • Responsive design para desktop y mobile
PLP Experiencias: página de listado de experiencias
PLP Experiencias: página de listado con filtros y visualización de experiencias disponibles

Combinar marca y funcionalidad en una experiencia de compra fluida

El reto era diseñar interfaces que reflejaran la identidad moderna de Mahou mientras facilitaban un flujo de compra claro e intuitivo. La plataforma debía funcionar perfectamente en desktop, tablet y móvil, con especial atención en la experiencia mobile donde se concentraba la mayoría de conversiones.

  • Mantener coherencia visual con la marca Mahou
  • Simplificar el flujo de compra sin perder información
  • Diseñar para múltiples tipos de dispositivos
  • Crear una experiencia diferenciada para compra única vs. compra recurrente
  • Optimizar para conversión en mobile

Crear una experiencia de compra moderna y efectiva

  • Diseñar interfaces alineadas con la identidad visual de Mahou
  • Mejorar la tasa de conversión en la compra de experiencias
  • Facilitar la navegación y comprensión de opciones de compra
  • Crear un sistema responsive que funcione en todos los dispositivos
  • Diferenciar visualmente los flujos de compra única vs. recurrente
  • Implementar patrones de UX consolidados para e-commerce

Interfaz moderna con experiencia de compra intuitiva

Diseñé un sistema de interfaces consistente que mantenía la identidad visual de Mahou mientras facilitaba un flujo de compra claro. El diseño utilizaba componentes reutilizables para garantizar coherencia en toda la plataforma.

Página de listado (PLP)

La página de listado de experiencias incluye filtros intuitivos, visualización clara de información de eventos, precios y disponibilidad. El diseño prioriza la exploración y comparación de opciones, con un enfoque en la legibilidad y el contraste visual.

Página de detalle (PDP) y checkout

El flujo de compra se divide en pasos claros: selección de experiencia, cantidad de entradas, datos personales y confirmación. Cada paso reduce la fricción y proporciona feedback inmediato sobre el estado de la compra.

PDP Experiencia: página de detalle y compra
PDP Experiencia: detalle del evento con opción de seleccionar cantidad y proceder a checkout

Compra recurrente

Se diseñó una página específica para explicar y facilitar la compra recurrente, con una propuesta de valor clara y un flujo simplificado que reutilizaba componentes del flujo de compra única.

Landing Compra Recurrente: página explicativa desktop
Landing Compra Recurrente: explicación de beneficios con diseño simplificado y enfoque en claridad
PLP Experiencias: versión mobile
Responsive design: la misma experiencia funciona perfectamente en dispositivos móviles

Componentes y patrones

Creé un conjunto de componentes reutilizables que facilitaban la compra:

  • Cards de experiencia: con imagen, título, descripción breve y precio
  • Selector de cantidad: interfaz clara para elegir número de entradas
  • Indicador de disponibilidad: muestra claramente si la experiencia está disponible
  • Buttons de acción: con estados visuales para compra única y recurrente
  • Formulario de checkout: paso a paso con validación en tiempo real

«El diseño de e-commerce requiere equilibrio entre el marketing y la funcionalidad. La belleza visual sin fluidez en el checkout es tan contraproducente como la eficiencia sin marca. El reto está en integrar ambos seamlessly.»

Cada elemento debe servir tanto a la marca como a la conversión.

¿Necesitas rediseñar tu plataforma de e-commerce?

Hablemos sobre cómo mejorar la experiencia y aumentar conversiones.