Impulsando la experiencia de usuario para aumentar las ventas de Stumptown

Un rediseño enfocado en la conversión de la experiencia de compra de Stumptown: orientación más clara, detalles de producto más sólidos y un checkout más fluido, diseñado y prototipado para escritorio y móvil.

  • Diseño UI/UX
  • Diseño web
  • Design System
  • Wireframing
  • Prototipado

Grabación de pantalla de los diseños de Stumptown en Figma: prototipo de escritorio con la página de inicio, guías de preparación, localizador de tiendas, página de producto con opción de suscripción y carrito, luego el prototipo móvil y el archivo de diseño con páginas, capas y estilos.

Decisiones clave de diseño

Claridad, diseñada en cada capa

  1. Wireframes de baja fidelidad

    Los wireframes de baja fidelidad simplifican el recorrido de compra y crean un camino claro desde el descubrimiento del producto hasta el pago.

  2. Diseño final

    Una jerarquía clara y detalles de producto enfocados simplifican la compra y respaldan decisiones seguras en escritorio y móvil.

  3. Prototipado

    Los prototipos de escritorio y móvil refinan el recorrido de compra, haciendo que la selección de producto y el pago sean claros e intuitivos.

Enfoque y proceso

Primero la evidencia. Después la expresión.

Exploré cómo compra la gente en Stumptown y enfoqué el rediseño en tres áreas de oportunidad: orientación, confianza en el producto e impulso en el checkout. Cada una dio forma a los wireframes, al diseño final, al sistema de diseño y a los prototipos interactivos para escritorio y móvil.

Vista general de los wireframes de Stumptown: pantallas de inicio, historia, listado y detalle de producto dispuestas una al lado de otra
La misma vista general de wireframes con conexiones azules de prototipo que unen cada pantalla

Design system

Consistencia en toda la marca

Sitio web en vivo

El sitio real de Stumptown en escritorio y móvil: hero Into the Wildwood, Product Finder, merchandising Wildwood, banner El Puente Natural, productos destacados y pie de página

Diseño en Figma

El rediseño en Figma en escritorio y móvil: hero Trapper Creek Decaf, compra por categoría, sección Coffee is about pleasure, beneficios de la suscripción y productos destacados
Conjunto completo de pantallas en Figma del flujo de Stumptown: inicio, historia, listado y detalle de producto
El mismo conjunto de pantallas conectado por líneas azules de flujo de prototipo
Componente de hero banner con tres diapositivas: Trapper Creek Decaf, un segundo estado de Trapper Creek Decaf tras una pausa y Guatemala Bella Vista, conectadas por transiciones de prototipo
Prototipo de tarjeta de producto en PLP: cuadrículas de tarjetas de café con opciones de tamaño y suscripción unidas por conexiones moradas de prototipo
Tarjeta de producto Strange Magic y flujo de suscripción: opciones de pedido único y de suscripción con ahorro, selector de cantidad y estados de Add to cart
Prototipo de la página Our story: lista de pestañas de Tasting, Roasting, Sourcing, Producers, History y Varieties vinculada a columnas de contenido extenso

Construyamos algo extraordinario.

Abierto a posiciones remotas de Senior UI/UX Designer y Design Lead.

HABLEMOS

Los campos marcados con un asterisco son obligatorios.