Diseño UI/UX y de producto
Investigación, sistemas de diseño e interfaces accesibles, diseñadas para construirse.
El buen diseño se decide antes de la primera pantalla: quién usa el producto, qué necesita hacer y qué le frena. Hacemos la investigación, damos forma a los flujos, creamos un sistema de diseño en Figma y entregamos a ingeniería componentes listos para construir, accesibles según WCAG 2.2 y preparados para la European Accessibility Act.
01 / Qué incluye
Entrevistas, pruebas de usabilidad y análisis de datos que muestran dónde se atasca la gente de verdad, antes de discutir colores.
Tokens, componentes y patrones en Figma alineados con tu código, para que las nuevas pantallas sean coherentes y baratas de construir.
Contraste, teclado y lectores de pantalla diseñados desde el principio según WCAG 2.2 AA y la European Accessibility Act.
Patrones para respuestas en streaming, citas de fuentes, pasos de aprobación humana y estados de error claros en los que confiar.
02 / Stack
Estándar del sector, aburrida en el buen sentido: herramientas con futuro, que el próximo ingeniero también conocerá.
Diseño y prototipado
Figma
Diseño, prototipos y sistemas de diseño
FigJam
Talleres, flujos y mapas de recorrido
Framer
Prototipos interactivos de alta fidelidad
Maze
Pruebas de usabilidad remotas
Investigación y analítica
Hotjar
Mapas de calor y grabaciones de sesiones
PostHog
Analítica de producto y embudos
Dovetail
Síntesis de investigación y biblioteca de hallazgos
Google Analytics 4
Análisis de tráfico y conversiones
Del diseño al código
Storybook
Biblioteca viva de componentes
Tokens Studio
Tokens de diseño sincronizados con el código
Tailwind CSS
Estilos que reflejan los tokens de diseño
shadcn/ui
Componentes base accesibles
03 / Enfoque
Validamos supuestos con usuarios reales pronto, cuando un cambio cuesta un boceto y no un sprint.
Cada pantalla se monta con componentes compartidos, para que diseño y código no se separen.
La accesibilidad es un requisito en cada revisión, no una auditoría al final.
Especificaciones, estados y casos límite documentados en Figma y Storybook, para que lo construido coincida con el diseño.
04 / Estándares
Seguimos estándares del sector y métodos probados en cada proyecto: son los que hacen que el presupuesto se mantenga.
05 / Infraestructura
Buenas preguntas
Respuestas directas a lo que preguntan los clientes antes de empezar.
Normalmente un poco aporta mucho. WNC hace primero unas pocas entrevistas y pruebas de usabilidad en los flujos más arriesgados, para que las decisiones de diseño se basen en cómo usa la gente el producto y no en opiniones.
Trabajo relacionado
Proyectos y productos nuestros en los que intervino este servicio.
Start
Cuéntanos sobre tu producto y tus usuarios. Te diremos dónde la investigación o un sistema de diseño rendirán antes.
Let’s manage Ver desarrollo web
