Diseño de producto UX/UI
Diseño UX/UI para que tu producto se use sin manual de instrucciones.
El diseño UX/UI decide cómo funciona tu app para quien la usa (UX) y cómo se ve cada pantalla (UI). Vemos cómo trabajan tus usuarios, ordenamos la información y diseñamos cada pantalla con piezas comunes que se reutilizan. Tu equipo técnico recibe un diseño completo, pensado para que lo pueda usar cualquiera y listo para construir.
Qué resolvemos
Cuando las pantallas se convierten en el obstáculo.
- 01
Usuarios que no encuentran lo que buscan
La función existe, pero está escondida tras un menú que nadie abre o un nombre que nadie entiende. Para el usuario, es como si no estuviera.
- 02
Pantallas que crecen sin orden
Cada función nueva se coloca donde cabe. El producto acumula botones, estilos distintos y parches, y cada cambio cuesta más que el anterior.
- 03
Diseños que no se construyen como se aprobaron
El diseño no dice qué pasa en un móvil pequeño, mientras algo carga o cuando hay un error, y quien programa rellena los huecos como puede. Lo publicado no se parece a lo aprobado.
Qué incluye
Del problema del usuario a la pantalla terminada.
Cada fase deja algo que puedes revisar y aprobar antes de pasar a la siguiente.
Qué recibes
- Archivos de diseño (Figma) en tu cuenta
- Sistema de diseño documentado
- Maqueta para probar los recorridos principales
- Instrucciones detalladas para construirlo
- Investigación con usuarios: entrevistas con quien usa el producto y con tu equipo, revisión de tus datos de uso y de cómo resuelven lo mismo otros productos.
- Organización del contenido: qué contenidos y funciones hay, cómo se agrupan, cómo se llaman y por qué camino se llega a cada uno.
- Recorridos y bocetos: los pasos principales que sigue el usuario, dibujados en esquemas sencillos (wireframes) para discutir la estructura sin distraerse con colores ni tipografías.
- Diseño de las pantallas: el aspecto definitivo para móvil y ordenador, también en los momentos que suelen olvidarse: cuando aún no hay datos, mientras algo carga, cuando hay un error y cuando todo sale bien.
- Sistema de diseño: un catálogo de piezas comunes (botones, formularios, colores, textos) que se reutilizan en todo el producto, para que crezca sin perder coherencia y sin rehacer lo mismo cada vez. Es lo que se conoce como design system.
- Accesibilidad: que lo pueda usar cualquiera, también quien ve poco o no usa ratón. Revisamos contraste, tamaño de los botones, orden de lectura y uso con teclado según las pautas internacionales WCAG.
- Entrega a quien programa: instrucciones detalladas, las piezas comunes documentadas y reuniones con el equipo técnico para resolver dudas mientras construye.
Cómo lo hacemos
Primero la estructura, después el detalle.
- Paso 01
Entender
Revisamos tu producto, tus datos y tus objetivos, y hablamos con quien lo usa. Acordamos contigo qué problemas resolver primero.
- Paso 02
Estructura
Ordenamos los contenidos y hacemos bocetos sencillos de los recorridos clave. Los revisamos juntos antes de dibujar nada definitivo.
- Paso 03
Pantallas
El aspecto definitivo de cada pantalla, hecho con piezas comunes desde el principio para no tener que rehacerlo después.
- Paso 04
Prueba
Una maqueta con las pantallas definitivas, delante de usuarios reales. Ajustamos lo que no se entiende antes de entregarlo.
- Paso 05
Entrega
El sistema de diseño, las instrucciones y nuestro apoyo al equipo que programa hasta que las pantallas están construidas y revisadas.
Herramientas
Con qué trabajamos.
Herramientas conocidas y archivos bien ordenados, para que cualquier diseñador o programador pueda seguir donde lo dejamos, con nosotros o sin nosotros.
- Diseño
- Figma
- FigJam
- Auto layout
- Sistema de diseño
- Design tokens
- Variables de Figma
- Componentes y variantes
- Investigación con usuarios
- Entrevistas
- Card sorting
- Tree testing
- Accesibilidad
- WCAG
- Lectores de pantalla
- Navegación con teclado
- Entrega al equipo técnico
- Figma Dev Mode
- Storybook
Para quién
¿Es para ti?
Encaja contigo si…
- Tienes un producto en marcha, o a punto de construirse, y quieres que se use con facilidad
- Necesitas un estilo común que tu equipo pueda mantener y ampliar
- Puedes darnos acceso a usuarios reales, aunque sean pocos
- Quieres que diseño y desarrollo trabajen juntos desde el principio
No somos para ti si…
- Buscas pantallas vistosas para una presentación, sin un producto detrás
- Prefieres decidirlo todo por intuición, sin escuchar a ningún usuario
- No puedes dedicar tiempo a revisar y aprobar cada fase
Formas de contratarlo
Elige cómo trabajar juntos.
Proyecto cerrado
Alcance, plazos y presupuesto definidos antes de empezar.
Para rediseñar un producto o una parte
Equipo dedicado
Un equipo completo que trabaja solo en tu producto, listo para empezar.
Si diseño y desarrollo avanzan a la par
Bolsa de horas
Horas de desarrollo y soporte para usar cuando las necesites.
Para pantallas nuevas y mejoras
Preguntas frecuentes
Sobre diseño UX/UI.
¿Cuánto cuesta el diseño UX/UI de una app o una plataforma?
Depende de cuántas pantallas y recorridos haya que diseñar, de cuánto haya que hablar con usuarios y de si ya existe un sistema de diseño. Con el alcance claro te enviamos un presupuesto por escrito, por fases, para que apruebes cada una antes de empezarla.
¿Qué diferencia hay entre UX y UI?
La UX (experiencia de usuario) es cómo funciona el producto: qué pasos sigue el usuario, qué información ve y en qué orden. La UI (interfaz) es cómo se ve cada pantalla. Las trabajamos juntas, porque unas pantallas bonitas sobre unos pasos confusos siguen siendo confusas.
¿Podéis rediseñar una app que ya usan nuestros clientes?
Sí. Empezamos con una auditoría de usabilidad para saber qué falla y dónde, y rediseñamos por partes, para que tus usuarios no tengan que aprenderlo todo de nuevo.
Nuestro producto ha crecido a trozos y cada pantalla es distinta. ¿Tiene arreglo?
Sí, y es de lo más útil que puedes hacer por un producto que ha crecido rápido. Hacemos inventario de las piezas que ya hay (botones, formularios, tablas…), unificamos las que se repiten y las convertimos en un catálogo común, el design system, que el equipo técnico reutiliza en cada pantalla nueva.
¿Qué pasa cuando el diseño está terminado?
Tú decides. Puedes llevártelo a tu equipo técnico con todo preparado para construirlo o encargarnos el desarrollo de la aplicación web o la app móvil. En cualquier caso, los archivos y el sistema de diseño son de tu empresa.
Relacionados
También te puede interesar
Auditoría de usabilidad
Dónde se atascan tus usuarios y cómo arreglarlo, por orden de impacto.
Prototipado y validación
Maquetas que se prueban con usuarios antes de invertir en desarrollo.
Aplicaciones web y SaaS
Plataformas, paneles y portales de cliente preparados para crecer.
Contacto
¿Hablamos de tu proyecto?
Cuéntanos qué necesitas. Te respondemos en menos de 24 horas laborables con los siguientes pasos, sin compromiso.