// caso de estudio · UI design
Live commerce · Responsive web

Experiencia de live commerce

Diseño de una experiencia responsive que integra transmisiones en vivo, descubrimiento de productos, señales de confianza y compra directa dentro de una misma homepage.

Rol · UI Design Plataforma · Mobile + Web Stack · Figma 2026
Wessex Mint · homepage de live commerce en desktop y mobile
01 · EL DESAFÍO

De estructura funcional a experiencia premium

Diseñar una homepage de live commerce que conectara transmisión, producto, confianza y compra dentro de una experiencia responsive clara.

01 · Live + Commerce
Jerarquía de compra
Dar protagonismo al live sin perder visibilidad del producto y el CTA.
02 · Trust
Confianza visible
Integrar autenticidad, reputación y beneficios cerca de la decisión.
03 · Responsive
Adaptación real
Mantener la jerarquía entre Desktop y Mobile sin limitarse a apilar contenido.
02 · DIRECCIÓN VISUAL

Un sistema premium para una categoría de alto valor

Una base editorial, componentes reutilizables y acentos visuales pensados para mantener claridad y consistencia entre Desktop y Mobile.

EDITORIAL + COMMERCE

Serif para jerarquía, sans para interacción.

COLOR CON PROPÓSITO

Charcoal, ivory y gold para contraste y énfasis.

SISTEMA COMPARTIDO

Variables semánticas y componentes reutilizables.

Paleta de color: charcoal, ivory y gold
Sistema tipográfico: serif editorial y sans para interacción
Componentes de acción
Componentes de formulario
Componentes de estado
Componentes de commerce
Componentes de commerce, variantes
03 · LIVE COMMERCE

El live como eje de compra

La experiencia organiza transmisión, producto y confianza dentro de una misma jerarquía, manteniendo la compra como acción principal sin sacar al usuario del contexto del live.

Player first
El contenido en vivo lidera la experiencia.
Product in context
El producto destacado permanece asociado a la transmisión y al CTA de compra.
Trust near conversion
Beneficios y reputación acompañan la decisión sin competir con Add to basket.
Hero de live commerce: transmisión, producto destacado y CTA de compra
04 · RESPONSIVE

La jerarquía se mantiene, el patrón cambia

La adaptación mobile conserva prioridades, pero cambia el patrón cuando el contenido lo necesita.

01 · TRENDING NOW
Grid → horizontal rail

La navegación lateral preserva tamaño de producto y legibilidad.

Trending now: grid en desktop, rail horizontal en mobile
DESKTOP · GRID (5 COLUMNS)MOBILE · HORIZONTAL RAIL
02 · A WORKING MINT
Cards → divided list

Los beneficios se simplifican para reducir peso visual y scroll innecesario.

A working mint: cards en desktop, lista dividida en mobile
DESKTOP · CARDS (4 COLUMNS)MOBILE · DIVIDED LIST
03 · FOOTER
Columns → grouped navigation

La navegación secundaria se compacta para priorizar contenido y reducir longitud.

Footer: columnas en desktop, navegación agrupada en mobile
DESKTOP · COLUMNSMOBILE · GROUPED NAV
05 · EXPERIENCIA FINAL

Una experiencia pensada para comprar en vivo

Una experiencia responsive que conecta contenido en vivo, descubrimiento de producto y confianza dentro de una misma identidad visual.

Experiencia final en desktop
Experiencia final en mobile
Experiencia final, vista completa
Live content · Commerce · Trust · Responsive