Barcelona · 41°23′ N
(Caso 01)
(Caso 01)
· E-commerce
· E-commerce
Amor Amarelo
Amor Amarelo
Amor Amarelo
Diseño UX/UI y lanzamiento de una tienda en Shopify para una marca artesanal que vendía solo por Instagram.
Diseño UX/UI y lanzamiento de una tienda en Shopify para una marca artesanal que vendía solo por Instagram.
Diseño UX/UI y lanzamiento de una tienda en Shopify para una marca artesanal que vendía solo por Instagram.
UX/UI Designer · Freelance · Clienta real · Shopify · Figma · 2026
Resultados clave
Canal de venta propio, sin depender
de Instagram.
Canal de venta propio, sin depender de Instagram.
Una tienda online con catálogo, carrito y
pagos con Shopify Payments y PayPal.
Tienda lanzada en 4 semanas
Del brief al lanzamiento, en plazo. Hoy en pausa por decisión de la marca.
Encargos ordenados desde el primer mensaje
Un formulario guiado que reúne toda la información del pedido personalizado.
Canal de venta propio en Shopify, lanzado
en plazo. Hoy en pausa por decisión de la marca.
Resumen
Amor Amarelo crea cuadernos cosidos a mano, ilustraciones y talleres de art journaling en Barcelona. Vendía por Instagram, en ferias y en tiendas amigas, y su web compartía dominio con otra persona y era difícil de usar. Los encargos llegaban desordenados y sin un canal propio.
Amor Amarelo crea cuadernos cosidos a mano, ilustraciones y talleres de art journaling en Barcelona. Vendía por Instagram, en ferias y en tiendas amigas,
y su web compartía dominio con otra persona y era difícil de usar. Los encargos llegaban desordenados y sin un canal propio.
Fig. 01 · Home de la tienda
Reto
Reto
Crear un canal de venta propio, fácil de usar, que ordenara los encargos y transmitiera el valor artesanal de cada producto.
Empecé con dos reuniones con la clienta para definir la dirección de arte, los colores y los contenidos. Después trabajé en Figma con arquetipos,
mapa de empatía, punto de vista y arquitectura de la información.
Investigación
Investigación
Empecé con dos reuniones con la clienta para definir la dirección de arte, los colores y los contenidos. Después trabajé en Figma con arquetipos, mapa de empatía, punto de vista y arquitectura de la información.
Empecé con dos reuniones con la clienta para definir la dirección de arte, los colores y los contenidos. Después trabajé en Figma con arquetipos,
mapa de empatía, punto de vista y arquitectura de la información.
Fig. 02 · Buyer persona
Fig. 03 · Mapa de empatía
De la investigación a las decisiones
“No todo lo artesanal es realmente artesanal.” “Es caro, pero vale
la pena.” “Prefiero menos cosas, pero con sentido.”
“No todo lo artesanal es realmente artesanal.”
“Es caro, pero vale
la pena.” “Prefiero menos cosas, pero con sentido.”
Clara no compra por impulso: investiga, lee reseñas y guarda productos antes de decidir.
Desconfía de las fotos demasiado editadas y valora que la marca explique procesos y materiales.
Clara no compra por impulso: investiga, lee reseñas y guarda productos antes de decidir.
Desconfía de las fotos demasiado editadas y valora que la marca
explique procesos y materiales.
01 · Necesita pruebas de que lo artesanal es auténtico → una historia cosida a mano, con fotos reales.
02 · Valora que se expliquen procesos y materiales → tarjetas del taller con toda la información.
03 · Los encargos llegaban dispersos → un formulario guiado.
04 · Las tiendas físicas dan confianza → una sección de Tiendas amigas.
Fig. 04 · Arquitectura de la información
Decisiones de diseño
Decisiones de diseño
Decisión 1
Diseños personalizados
Problema
Los encargos llegaban por Instagram o de boca en boca, y responderlos era desordenado.
Decisión
Un formulario con tipo de producto y descripción del encargo, para que la clienta reciba toda la información desde el primer mensaje, junto a fotos de trabajos anteriores como inspiración.
Fig. 05 · Diseños personalizados
Decisión 1
Diseños personalizados
Problema
Los encargos llegaban por Instagram o de boca en boca, y responderlos era desordenado.
Decisión
Un formulario con tipo de producto y descripción del encargo, para que la clienta reciba toda la información desde el primer mensaje, junto a fotos de trabajos anteriores como inspiración.
Fig. 05 · Diseños personalizados
Decisión 1
Diseños personalizados
Problema
Los encargos llegaban por Instagram o de boca en boca, y responderlos era desordenado.
Decisión
Un formulario con tipo de producto y descripción del encargo, para que la clienta reciba toda la información desde el primer mensaje, junto a fotos de trabajos anteriores como inspiración.
Fig. 05 · Diseños personalizados
Decisión 2
Una historia cosida a mano
Problema
En una marca artesanal, la persona detrás del producto es parte de su valor.
Decisión
Una línea de tiempo donde una aguja y un hilo van uniendo fotos polaroid. La desarrollé a medida, generando el código con IA (Claude).
Fig. 06 · Una historia cosida a mano
Decisión 2
Una historia cosida a mano
Problema
En una marca artesanal, la persona detrás del producto es parte de su valor.
Decisión
Una línea de tiempo donde una aguja y un hilo van uniendo fotos polaroid. La desarrollé a medida, generando el código con IA (Claude).
Fig. 06 · Una historia cosida a mano
Decisión 2
Una historia cosida a mano
Problema
En una marca artesanal, la persona detrás del producto es parte de su valor.
Decisión
Una línea de tiempo donde una aguja y un hilo van uniendo fotos polaroid. La desarrollé a medida, generando el código con IA (Claude).
Fig. 06 · Una historia cosida a mano
Decisión 3
ArtJournaling, a primera vista
Problema
Las sesiones mensuales son un producto estrella, pero se perdían dentro de la tienda
Decisión
Un lugar propio en el menú principal y cuatro tarjetas (cuándo, dónde, qué incluye y precio) que resumen todo sin un solo clic.
Fig. 07 · ArtJournaling, a primera vista
Decisión 3
ArtJournaling, a primera vista
Problema
Las sesiones mensuales son un producto estrella, pero se perdían dentro de la tienda
Decisión
Un lugar propio en el menú principal y cuatro tarjetas (cuándo, dónde, qué incluye y precio) que resumen todo sin un solo clic.
Fig. 07 · ArtJournaling, a primera vista
Decisión 3
ArtJournaling, a primera vista
Problema
Las sesiones mensuales son un producto estrella, pero se perdían dentro de la tienda
Decisión
Un lugar propio en el menú principal y cuatro tarjetas (cuándo, dónde, qué incluye y precio) que resumen todo sin un solo clic.
Fig. 07 · ArtJournaling, a primera vista
Decisión 4
De la pantalla a la tienda física
Problema
Sus productos están en varias tiendas físicas, difíciles de encontrar.
Decisión
Tiendas amigas en el menú principal, con la dirección de cada tienda y un botón que lleva directo a Google Maps.
Fig. 08 · De la pantalla a la tienda física
Decisión 4
De la pantalla a la tienda física
Problema
Sus productos están en varias tiendas físicas, difíciles de encontrar.
Decisión
Tiendas amigas en el menú principal, con la dirección de cada tienda y un botón que lleva directo a Google Maps.
Fig. 08 · De la pantalla a la tienda física
Decisión 4
De la pantalla a la tienda física
Problema
Sus productos están en varias tiendas físicas, difíciles de encontrar.
Decisión
Tiendas amigas en el menú principal, con la dirección de cada tienda y un botón que lleva directo a Google Maps.
Fig. 08 · De la pantalla a la tienda física
La tienda
La tienda
Un vídeo en la home que muestra el producto y el oficio desde el primer segundo, un catálogo limpio con nombre y precio bajo cada cuaderno, testimonios como prueba
social y pagos con Shopify Payments y PayPal.
Un vídeo en la home que muestra el producto y el oficio desde el primer segundo, un catálogo limpio con nombre y precio bajo cada cuaderno, testimonios como prueba social
y pagos con Shopify Payments y PayPal.
Empecé con dos reuniones con la clienta para definir la dirección de arte, los colores y los contenidos. Después trabajé en Figma con arquetipos,
mapa de empatía, punto de vista y arquitectura de la información.
Fig. 09 · Catálogo de cuadernos
Fig. 09 · Catálogo de cuadernos
Fig. 10 · Ficha, carrito y checkout en móvil. Pantallas recreadas a partir del diseño original
Fig. 10 · Ficha, carrito y checkout en móvil. Pantallas recreadas a partir del diseño original
Resultados
Resultados
Resultados
01 ·Tienda lanzada en plazo: del brief al lanzamiento en 4 semanas, en abril de 2026.
02 · Un canal de venta propio, sin depender de Instagram ni del boca a boca.
03 · Un formulario guiado que ordena los encargos personalizados desde el primer mensaje.
04 · Pagos integrados con Shopify Payments y PayPal.
Testimonio
Las métricas a seguir
Conversión, carritos abandonados y cantidad de encargos recibidos por el formulario.
Conversión, carritos abandonados y cantidad de encargos recibidos por el formulario.
Conversión, carritos abandonados y cantidad de encargos recibidos por
el formulario.
Lo que aprendí
Propuse dar a Diseño personalizado un lugar propio en el menú; la clienta prefirió tenerlo dentro de Tienda. Trabajar con una clienta real es proponer, argumentar y también aceptar sus decisiones.
Propuse dar a Diseño personalizado un lugar propio en el menú; la clienta prefirió tenerlo dentro de Tienda. Trabajar con una clienta real es proponer, argumentar y también aceptar sus decisiones.
Propuse dar a Diseño personalizado
un lugar propio en el menú; la clienta prefirió tenerlo dentro de Tienda. Trabajar con una clienta real es proponer, argumentar y también aceptar sus decisiones.