Case study · 2025
E-Commerce
B2C
Branding
Design System
Responsive
Rol
UX/UI Designer
Ilustrador
Desarrollo en Wordpress
Equipo
Herramientas
Figma (Auto Layout & Variables)
Wordpress & Elementor
Illustrator & Photoshop
Contexto
Diseñé Funny Cell Factory desde cero junto a un equipo de 3 personas: identidad de marca, UX/UI y desarrollo web para una tienda de merchandising científico con mucho humor. Después, ya como proyecto personal, reconstruí toda la interfaz en un sistema de diseño atómico, con un responsive real en desktop, tablet y mobile.
01 / El problema
Los laboratorios son espacios asépticos y monótonos. El cliente, un científico en activo, quería romper esa frialdad con humor de laboratorio en forma de merchandising.
02 / La solución
Decisión de Diseño: Para diferenciar la marca dentro del sector de merchandising científico, era necesario romper con el típico “azul corporativo” o blanco clínico. Se adoptó una paleta cromática vibrante y cálida.
01 / El problema
El catálogo creció mucho más rápido de lo previsto, y la web en WordPress no tenía la estructura necesaria para escalar sin perder consistencia visual.
02 / La solución
Organizamos el catálogo por colecciones temáticas claras para que cualquier producto se encontrara en menos de tres clics.
[01]
Case study
Investigación UX.
Investigué el proyecto combinando entrevistas directas con el stakeholder (un científico en activo), benchmarking de e-commerce y un proceso iterativo de wireframes en baja y alta fidelidad. Como proyecto personal, construí de manera individual un sistema de diseño atómico, completo y escalable.
Proceso: UX & UI
UX:
Entrevistas al stakeholder
Benchmarking e-commerce
Moodboard & dirección visual
Findings & Insights
Arquitectura de Información
Customer Journey
Wireframes Lo-Fi / Hi-Fi
UI:
Design System
Atomic Design
Design Tokens
Componentes con estados
Responsive
Variables
Prototipado avanzado
Síntesis de entrevistas con el stakeholder
Investigación UX
¿Qué necesita realmente la comunidad científica?
El humor de laboratorio nace de rutinas muy concretas: tesis, protocolos fallidos, jornadas eternas. Sintetizo las entrevistas con el stakeholder (un científico en activo) para entender qué chistes conectan de verdad con la comunidad.
Hallazgos clave
01
Pain point
El humor genérico de ciencia no conecta
El humor de laboratorio depende de jerga muy específica (pipetear, Western Blot, la crisis de la tesis) — un chiste de ciencia genérico no genera la misma identificación que uno hecho desde dentro.
02
Necesidad
Quien compra no siempre entiende el humor
Muchos regalos los hace alguien ajeno a la ciencia. La solución fue dar dos puertas de entrada al catálogo: por ocasión (cumpleaños, tesis, embarazo) para quien no sabe de ciencia, y por disciplina (neurociencia, microbiología…) para quien sí conoce al destinatario.
No bastaba con humor genérico de ciencia — necesitábamos la jerga exacta de un laboratorio real para que cada producto se sintiera como un chiste interno, no una broma genérica.
Customer Journey
01. Descubrimiento
Acción
Busca un regalo para un científico en Google, encuentra Funny Cell Factory.
Pensamiento
«No tengo ni idea de las bromas de laboratorio, espero encontrar algo que le guste.»
Emoción
Inseguridad
Oportunidades UX
Comunicar desde la home que la tienda también es para quien no es científico.
02. Exploración
Acción
Entra en la colección “Tesis” y ve varios diseños con chistes que no termina de entender.
Pensamiento
«No sé si esta broma tiene gracia… ¿Le gustará?.»
Emoción
Confusión
Oportunidades UX
Dar contexto del chiste sin destriparlo del todo, para reducir la incertidumbre al comprar.
03. Encuentra la sección de regalos
Acción
Descubre la sección “What are you celebrating?”, con colecciones por ocasión: cumpleaños, tesis, embarazo.
Pensamiento
«Esto sí lo entiendo — es un cumpleaños, no necesito saber de ciencia.»
Emoción
Alivio
Oportunidades UX
Navegación por ocasión en la home, para acertar sin necesitar conocer el nicho.
04. Compra
Acción
Añade al carrito, elige talla y color, y finaliza el pedido.
Pensamiento
«El envío es gratis y el proceso ha sido rápido.»
Emoción
Confianza
Oportunidades UX
Checkout simple y envío gratuito visible desde el primer momento.
05. Post-compra
Acción
El destinatario recibe el regalo y entiende el chiste.
Pensamiento
«¡Es buenísimo, ¿cómo lo has encontrado?!»
Emoción
Satisfacción
Oportunidades UX
Aprovechar la satisfacción del momento: redes visibles en el packaging.
Moodboard & Benchmarking
Branding
Romper la asepsia
del laboratorio
El gran insight del moodboard fue el contraste: si los laboratorios son fríos y neutros, la marca debía ser justo lo contrario. Desarrollé la dirección visual junto a María de la Caridad — una paleta vibrante y desenfadada, muy alejada de la asepsia clínica habitual en ciencia.
Paleta de marca
Rosa 500
Beige 500
Azul T 500
Menta 500
Granate 500
Palabras clave de dirección
Vibrante
Cercano
Colorido
Humor de laboratorio
Desenfadado
Benchmarking de arquitectura
LIV
No nos interesaba su estética, sino cómo componen y organizan las secciones de producto.
Science Collective
Su home y su shop son la misma página — inspiró fusionar descubrimiento y compra en un único scroll.
Kukuxumusu
Organiza un catálogo muy amplio por colecciones temáticas sin perder claridad de compra — referencia directa para nuestro propio catálogo creciente.
Waterdrop
Bloques de producto muy visuales combinados con prueba social (reseñas, cifras de clientes) integrada en el propio scroll de home.
Proceso de logo
Aplicaciones de marca
Findings & Insights
Findings
El catálogo creció mucho más rápido de lo previsto, con productos de muchas categorías distintas: camisetas, tazas, sudaderas, delantales, bodies de bebé.
La marca necesita venderse tanto por disciplina científica (inmunología, neurociencia…) como por ocasión (cumpleaños, tesis, embarazo) — dos formas de buscar muy distintas.
El humor de laboratorio depende de jerga muy específica; un chiste genérico de ciencia no conecta igual que uno hecho desde dentro.
Gran parte del descubrimiento ocurre entre compañeros de laboratorio: el producto se comparte antes de comprarlo.
Insights
Un sistema de diseño atómico permite escalar el catálogo sin perder consistencia visual, con componentes reutilizables.
Una card de producto única y flexible sirve para cualquier categoría (ropa, tazas, papelería) sin rediseñar cada vez que se añade una nueva.
Una doble taxonomía de navegación —por disciplina y por ocasión— resuelve necesidades de búsqueda muy distintas con el mismo catálogo.
Reforzar momentos compartibles (packaging, redes, reseñas) convierte cada compra en un canal de descubrimiento entre compañeros de laboratorio.
Arquitectura de la información
El catálogo creció mucho más rápido de lo previsto, así que creamos subgrupos por temática y categoría para poder navegarlo sin perderse: por disciplina científica, por ocasión (cumpleaños, tesis, bebés) y por tipo de producto. Home es el punto de partida único desde el que se puede entrar por cualquiera de las tres vías.
Home
Disciplina
Ocasión
Tipo de producto
Ficha producto
Blog
Sobre nosotros
Inmunología
Neurociencia
Microbiología
Cumpleaños
Tesis
Bebés
Camisetas
Tazas
Sudaderas
Carrito
Checkout
Árbol de navegación resumido · rutas reales del catálogo
[02]
Case study
Wireframing.
Empezamos los wireframes de baja fidelidad directamente en Figma, en escala de grises, para poder iterar rápido sin perder tiempo en detalle visual. Después pasamos a fidelidad alta, también en Figma aplicando los estilos finales.
Low-Fidelity Wireframes
Bocetos esquemáticos en escala de grises, hechos en Figma, para validar la arquitectura y el flujo rápido de la web antes de invertir en detalle visual.
High-Fidelity Wireframes
Pantallas en versión desktop rediseñadas en high fidelity.
[03]
Case study
Design System.
Construí un sistema de diseño propio para el e-commerce a partir de los wireframes: tipografía que combina personalidad de marca y legibilidad, la paleta vibrante de Funny Cell Factory documentada en tokens, y una librería de componentes con estados (Default, Hover, Active, Disabled) sobre un grid de 8px.
Tipografía
¿Por qué esta tipografía?
Nunito, utilizado en los títulos y subtítulos, mantiene esa estética gamberra y juguetona que el producto quería transmitir.
Mientras que Poppins ofrece una lectura más fácil para los cuerpos de texto.
Paleta cromática
Rosa 500
rgb: (223, 82, 122)
HEX: #DF527A
Beige 500
rgb: (249, 229, 209)
HEX: #F9E5D1
Azul T 500
rgb: (9, 156, 160)
HEX: #099CA0
Menta 500
rgb: (201, 228, 202)
HEX: #C9E4CA
Granate 500
rgb: (66, 45, 65)
HEX: #422D41
Negro puro
rgb: (0, 0, 0)
HEX: #000000
Soft Grid & Espaciado
Definí un sistema de espaciado basado en múltiplos de 8px (con pasos intermedios de 4px) para que paddings, gaps y tamaños de componentes fueran predecibles y fáciles de mantener.
space-8
8 px
0.5 rem
space-12
12 px
0.75 rem
space-16
16 px
1 rem
space-24
24 px
1.5 rem
space-32
32 px
2 rem
space-48
48 px
3 rem
Responsive breakpoints
Librería de componentes
Botones, campos de texto, tarjetas e iconografía con variantes Default, Hover, Active y Disabled documentadas como Variables de Figma.
Grid System
Mobile Grid
Rejilla base — Frame 393 × 852
Columnas
4
Ancho de columna
76px
Margen
20px
Gutter
16px
Tablet Grid
Rejilla base — Frame 834 x1024
Columnas
8
Ancho de columna
73px
Margen
40px
Gutter
24px
Desktop Grid
Rejilla base — Frame 1440x1024
Columnas
12
Ancho de columna
80px
Margen
108px
Gutter
24px
[04]
Case study
Pantallas.
Conclusiones
Proyecto real desarrollado con la agencia Diwar Marketing, en equipo con María de la Caridad (branding) y Adrián Redondo (Product Designer). Lo lanzamos en WordPress + Elementor; después, ya como proyecto personal, reconstruí toda la interfaz con Atomic Design y un sistema responsive completo en 3 breakpoints.
Impacto de la solución
El sistema de diseño atómico permite que el catálogo siga creciendo sin perder consistencia visual. La doble navegación —por disciplina y por ocasión— resuelve dos formas de buscar muy distintas, y una card de producto única se adapta a cualquier categoría, de camisetas a tazas.
Aprendizajes clave
Trabajar en un equipo real —branding, UX/UI y desarrollo— me enseñó a defender decisiones de diseño ante otros roles. Y retomar el proyecto después, ya en solitario, fue la oportunidad de construir el sistema de diseño que el lanzamiento original no tuvo tiempo de tener.
© 2026 Daniel Castiñeiras. Todos los derechos reservados.
Diseñador UX/UI en Madrid ·