DOCUMENTO
Product Design Deep Dive
CONTENIDO
Research · Usuarios · Arquitectura · User Flows · Design System · Componentes · Iteraciones
OBJETIVO
Mostrar cómo se estructuró y diseñó el producto antes de su implementación.
Proceso de diseño de producto.
La interfaz final es sólo una capa del producto. Antes de diseñar pantallas, definí la estructura, los flujos, y los sistemas que soportan la experiencia de ETA Web. Esta página documenta ese proceso.
01 · INVESTIGACIÓN Y HALLAZGOS
Metodología
El trabajo de investigación operó en dos niveles distintos:
A. Experiencia acumulada de la comunidad
- Años administrando Empleo Tattoo Argentina
- Conversaciones con la comunidad y DMs
- Observación de comportamientos e interacción histórica con usuarios
B. Research específico para el diseño del sitio
- Entrevistas formales y encuestas
- Análisis de respuestas de la comunidad
Se llevaron a cabo exactamente 5 entrevistas en profundidad (mediante planilla y videollamada, observando la interacción con la página). Además, a través de historias de Instagram se hicieron preguntas a la comunidad, obteniendo más de 50 respuestas e interacciones de usuarios.
Resultados de investigación
- Búsqueda fragmentadaLos estudios pierden horas buscando artistas calificados a través de DMs, grupos de Facebook y el boca a boca, ya que no existe un canal unificado formal.
- Incompatibilidad de plataformasLinkedIn o Computrabajo no logran capturar las modalidades únicas de la industria (alquiler de box, porcentaje, guest spot).
- Ruido para los artistasReciben información constante pero sin filtros por modalidad o estilo, lo que genera un alto costo cognitivo para encontrar una oferta relevante.
Principales hallazgos
La especificidad importa más que parecer corporativo
- ↳ Si el producto parece corporativo o genérico, los usuarios desconfían.
- ↳ Decisión de diseño: Adopté una estética minimalista, brutalista y en blanco y negro para transmitir seriedad y demostrar comprensión de los códigos del rubro.
Especificidad es confianza
- → Filtros por estilo artístico y modalidad son vitales para decisiones rápidas.
- → Sin especificidad, hay rechazo y desconfianza en la oferta.
El problema es de fricción
- → No falta tecnología para comunicarse (Instagram + WhatsApp ya cumplen ese rol).
- → Falta centralización y estandarización en cómo se publica la información.
02 · USUARIOS Y ARQUETIPOS
Entendiendo a los Usuarios
Construí estos arquetipos en Figma para representar los dos perfiles principales del producto (el Tatuador y el Estudio) y utilizarlos como referencia y foco durante el diseño. No son personas reales, sino artefactos de diseño que resumen las necesidades, motivaciones y dolores extraídos de la investigación.
03 · ESTRUCTURA DEL PRODUCTO
Arquitectura de la información
Estructura sistémica y jerarquía de contenidos de ETA web. Se define el mapa estructural del producto, organizando la navegación en pilares fundamentales. La arquitectura diferencia entre pantallas de interfaz y las diferentes secciones contenidas por las mismas.
04 · FLUJOS DE USUARIO
Arquitectura transaccional y de búsqueda
El sistema opera bajo un modelo de plataforma bilateral (Two-Sided Marketplace). Este diagrama documenta los dos recorridos críticos del producto:
- Lado de la oferta: Estudios → publican oportunidades (incluye flujo transaccional con Mercado Pago).
- Lado de la demanda: Tatuadores → buscan y contactan.
05 · SISTEMA DE DISEÑO
Identidad, Colores y Grillas
El sistema visual se basa en una escala monocromática estricta para dar prioridad al contenido, y una tipografía fluida que se adapta automáticamente al tamaño de la pantalla.
Paleta de Colores
Primary / Text
#000000
Background
#FFFFFF
Background Alt
#F4F4F4 (Tarjetas y Secciones)
Utility Grays
--gray-100 to --gray-900
Feedback
Error / Success
Sistema Tipográfico
DISPLAY 2XL · SERIF
Tattoo
Bodoni Moda | clamp(2.5rem, 8vw, 8rem) | Tracking: -0.02em
H2 · SERIF
Tattoo
Bodoni Moda | clamp(1.375rem, 2vw, 2.25rem)
BODY · SANS-SERIF
Tattoo Empleo es una plataforma centralizada...
Inter | 1rem (16px) | Line-height: 1.6
LABELS · SANS-SERIF
Tattoo Empleo
Inter | 0.6875rem - 0.75rem | Tracking: 0.2em
Spacing & Grid System
- MAX-W
Contenedores principales limitados a
max-w-7xl (1280px). - GRID
Grillas CSS asimétricas para layout de contenido (ej. formulario
grid-cols-[1fr_2.5fr]con título anclado a la izquierda). - SPACING
Espaciados macro generosos (
py-16,py-24,gap-16) para dar sensación de respiro (Whitespace), característica del diseño editorial.
06 · COMPONENTES & ESTADOS
Interacción y UI
El Componente Estrella: JobCard
Formato cuadrado (aspect-square) optimizado para la grilla. Transiciones prolongadas de hover (`duration-400 ease-editorial`) para que el movimiento se sienta orgánico y no mecánico.
Black
Panter
BUSCA
Tatuador /a
Realismo en back and grey
Botones
Bloques sólidos, sin border-radius. Reducción de opacidad al hacer hover en botones oscuros y cambio de fondo en botones claros.
DISABLED STATE
Navegación
NavBar ultra mínima con alto contraste. Hover effects sutiles.
07 · EVOLUCIÓN VISUAL
De Lo-Fi a producto final
La maduración del producto puede observarse en cómo la interfaz pasó de un enfoque estructural y denso (Wireframes) a una versión de MVP mucho más limpia, donde la información respira y la jerarquía se resuelve casi exclusivamente con escala tipográfica y espacio en blanco.
01 — Wireframe Lo-Fi
02 — Prototipo Hi-Fi
03 — Versión MVP Live
07 · PROCESO VISUAL
De Lo-Fi a alta fidelidad
La estructura se validó primero en wireframes de baja fidelidad, priorizando siempre la claridad informativa antes de aplicar la capa estética final.
WIREFRAMES / LO-FI
PROTOTIPO / MVP
