# Diseño de Producto > Investigación de usuarios, wireframes, prototipos y sistemas de diseño que sobreviven el contacto con ingeniería, entregados dentro del mismo Pod que construye. Fuente: https://www.koombea.com/es/capabilities/product-design/ --- Un diseño que no se puede construir como está dibujado no es un diseño, es un dibujo. Los nuestros se producen en el mismo Pod que los entrega. ## El problema La falla habitual es organizacional. El diseño pasa en una compañía, la ingeniería en otra, y la entrega entre las dos es un archivo. Cada ambigüedad en ese archivo se convierte en una decisión que alguien de ingeniería toma solo, rápido, sin el contexto que produjo el dibujo. Como aquí el diseño y la entrega viven en el mismo Pod, cada flujo se valida como prototipo navegable antes de la implementación, y el sistema de diseño se construye como componentes reales y no como una librería de símbolos que nadie puede usar. También investigamos antes de dibujar. No un estudio de seis semanas, pero sí suficiente contacto con usuarios reales para saber cuál de los tres flujos plausibles corresponde a cómo la gente ya piensa la tarea. - Prototipos navegables para validar la dirección antes de una línea de código - Sistemas de diseño entregados como componentes usables, no solo como archivos - Investigación dimensionada a la decisión, no a una plantilla - Accesibilidad considerada en el flujo, no puesta encima al final ## Qué cubre esto - **Diseño de producto y UX**: Flujos, wireframes y diseño de interfaz para productos reales. - **Prototipado**: Validación navegable de la dirección antes de que empiece la implementación. - **Investigación de usuarios**: Entrevistas y pruebas dimensionadas a la decisión que hay en frente. - **Sistemas de diseño**: Componentes, tokens y documentación que ingeniería de verdad puede usar. - **Accesible por diseño**: Contraste, orden de foco y semántica decididos durante el diseño. - **Entrega en Figma**: Una entrega que corresponde a lo que se construye, porque lo construye el mismo Pod. ## UX y UI No Son la Misma Compra ### UX — Si el flujo corresponde a la tarea. La experiencia de usuario es una pregunta sobre estructura. Cuáles pantallas existen, en qué orden, qué pasa cuando falta algo, y si el camino corresponde a cómo alguien ya piensa el trabajo. Si esto sale mal, ninguna cantidad de trabajo de interfaz lo recupera. - Flujos validados como prototipo navegable antes de la implementación - Estados vacío, cargando, parcial, error, sin conexión y permiso denegado decididos en diseño - Accesibilidad construida dentro del flujo, incluyendo orden de foco y semántica - Convenciones de plataforma respetadas, porque iOS, Android y la web no se comportan igual ### UI — Si la superficie es usable y es tuya. La capa de interfaz carga la marca y hace el trabajo momento a momento de ser legible, presionable y sin ambigüedades. La construimos como un sistema de diseño de componentes reales y no como una página de símbolos, para que la segunda pantalla cueste menos que la primera. - Un sistema de diseño entregado como componentes que ingeniería puede usar - Contraste y tamaños de objetivo verificados contra WCAG, no calculados a ojo - Tu marca llevada a través del producto, no una plantilla con un logo encima - Decisiones guiadas por lo que funciona y no por lo que está de moda La mayoría de las solicitudes de "diseño" llegan queriendo decir la segunda. La primera es donde normalmente se pierde el dinero, porque una interfaz hermosa sobre el flujo equivocado es una ruta más rápida al lugar equivocado. ## Cómo Corre el Diseño Dentro de un Pod Enmarcar la decisión: La pregunta que tu diseño tiene que responder queda escrita antes de dibujar nada. (Días, no una fase de descubrimiento) Dibujar y prototipar: Tus flujos se vuelven un prototipo navegable. Redirigir un prototipo cuesta una fracción de redirigir una implementación, que es toda la razón por la que existe. (Barato de cambiar, a propósito) Probar sobre el prototipo: Las pruebas de usabilidad pasan antes de la implementación y no después de tu lanzamiento, mientras la respuesta todavía es gratis de aplicar. (Cinco o seis conversaciones, normalmente suficiente) Entregar al mismo Pod: El diseño corre más o menos un ciclo por delante de la implementación, en el mismo Pod que la entrega. Ningún archivo pasa por encima de un muro, así que la ambigüedad recibe una conversación en vez de una suposición. (Un ciclo por delante, de forma continua) Hacer crecer el sistema: Los patrones que se repiten se vuelven componentes de tu sistema de diseño, así cada superficie posterior te cuesta menos de diseñar y menos de construir. (Compuesto, no lineal) ## Investigación dimensionada a la decisión La investigación tiene mala fama en los equipos de producto, y se la ganó honestamente. Los estudios de seis semanas que llegan después de que la decisión ya se tomó son teatro, y todos los involucrados lo saben. Así que dimensionamos la investigación a la decisión que tenemos en frente. Si la pregunta es cuál de tres flujos plausibles corresponde a cómo la gente ya piensa una tarea, eso son cinco o seis conversaciones y dos días, no una fase de descubrimiento. Si la pregunta es si vale la pena entrar a toda una categoría de producto, eso es un trabajo más grande y debería ser un proyecto aparte en vez de colarse dentro de una construcción. La prueba que aplicamos es simple. Si el hallazgo no podría cambiar lo que construimos después, no hacemos el estudio. Esa restricción mantiene la investigación lo suficientemente barata para que de verdad ocurra, que es la única forma en que afecta algo. - La pregunta queda escrita antes de escoger el método - Pruebas de usabilidad sobre el prototipo navegable, antes de la implementación y no después del lanzamiento - La analítica existente y los tickets de soporte se leen primero, porque a menudo ya tienes la respuesta - Hallazgos entregados como decisiones y preguntas abiertas, no como una presentación que nadie abre ## Cuando el producto todavía no existe A veces la respuesta honesta es que todavía no tienes nada que diseñar, porque la forma de la cosa no está decidida. Ese trabajo es descubrimiento, y produce artefactos y no pantallas. Lo que sacas de ahí es el material desde el que se puede construir tu estimación. Un backlog descompuesto en épicas e historias de usuario, una arquitectura de alto nivel que declara con qué tiene que hablar tu sistema, y un plano de servicio que muestra dónde tu producto toca tu operación. Esos tres convierten una visión en un alcance que se puede cotizar en story points. El descubrimiento es un proyecto aparte, no algo que se cuela dentro de tu construcción. También es el primer paso correcto más seguido de lo que la gente espera, y te lo vamos a decir en vez de entregarte pantallas de un producto que nadie ha delimitado. - Un backlog en épicas e historias de usuario, que es lo que se cotiza - Arquitectura de alto nivel, para que las integraciones se conozcan antes de sorprenderte - Un plano de servicio, mostrando dónde el producto se encuentra con tu operación - Un alcance que se puede estimar en story points y no en optimismo ## Qué mueve la estimación Aquí el diseño y la ingeniería salen de la misma capacidad, así que el trabajo de diseño compite con las funcionalidades en vez de vivir en un presupuesto aparte que se te olvida. Eso hace que valga la pena saber qué es lo que de verdad cuesta. La respuesta son los estados, no las pantallas. Una pantalla es un dibujo. Una pantalla con variantes vacía, cargando, parcial, error, sin conexión y permiso denegado son seis, y esas variantes son exactamente lo que se salta en una entrega y después inventa alguien de ingeniería a la carrera. - Estados distintos por superficie, que es la unidad real del trabajo de diseño - Si Tambora puede ser el punto de partida o el producto necesita su propio lenguaje visual - El nivel de conformidad de accesibilidad, si hay que verificarlo y no solo pretenderlo - Cuántas plataformas tiene que sobrevivir el diseño, y si pueden compartir patrones - La profundidad de la investigación, que dimensionamos a la decisión y no a una plantilla ## Empieza con una auditoría de diseño gratis Si ya tienes algo construido, la forma más barata de saber si vale la pena comprar esta capacidad es vernos evaluar tu producto primero. Una auditoría heurística escrita, en dos o tres días hábiles, sin costo. ## Preguntas que vale la pena hacer ### ¿Qué es la auditoría de diseño gratis y dónde está la trampa? Es una revisión heurística de un producto que ya construiste, devuelta como un reporte escrito y una lista priorizada de problemas de usabilidad en dos o tres días hábiles. La trampa es que esperamos que te guste el trabajo lo suficiente para hablar del resto. Los documentos son tuyos de cualquier forma, y la mayoría de las auditorías no se convierten en proyectos. ### ¿Podemos traer a nuestro propio diseñador? Sí, y funciona bien cuando el límite es claro. Tu diseñador responde por la dirección visual y por los flujos; nosotros por la construibilidad y por la cobertura de estados. Lo que no funciona es una entrega sin conversación, porque cada ambigüedad en el archivo se convierte en una decisión que alguien de ingeniería toma solo. ### ¿Recibimos los archivos de Figma? Sí. Los diseños, el código y la documentación pasan a ser de tu propiedad al completar el pago. El sistema de diseño se entrega como componentes usables y no solamente como una librería de símbolos. ### ¿El diseño es una fase aparte antes del desarrollo? No. El diseño corre por delante de la implementación de forma continua dentro del mismo Pod, normalmente como un ciclo adelante. Una fase larga de diseño antes de cualquier código produce trabajo hermoso que nunca se ha encontrado con una restricción real. ### ¿Y si no nos gusta la dirección? Para eso está el prototipo navegable, y es deliberadamente temprano y barato de cambiar. Redirigir un prototipo cuesta una fracción de redirigir una implementación, que es toda la razón por la que validamos antes de construir. ### ¿También hacen diseño de marca y de mercadeo? El diseño de producto es la capacidad que vendemos. Nos encargamos de la superficie del producto y del sistema de diseño que necesita. El trabajo completo de identidad de marca queda por fuera de esto y te lo vamos a decir en vez de tomarlo y hacerlo mal. ## Trabajo de producto premiado desde 2019 Todos los Indigo Design Awards que ha ganado este trabajo de diseño desde 2019, con la categoría en la que se otorgó y el producto que lo recibió. ### 2025 (8 premios) - Plata en Mobile App: Kunstrux - Plata en UX, Interface & Navigation: Purgo - Bronce en Mobile App: Gratitude - Bronce en UX, Interface & Navigation: Kunstrux, Draymatics, Gratitude - Bronce en Website Design: Purgo, Draymatics ### 2024 (10 premios) - Plata en Apps: FCC, DEVNAUT, Tuily - Plata en Mobile App: Sword and Scale, Tuily - Plata en UX, Interface & Navigation: DEVNAUT, Tuily - Bronce en UX, Interface & Navigation: Sword and Scale, FCC, Tuily ### 2023 (14 premios) - Oro en Mobile Responsive Design: RefMasters, Fashioned Health - Plata en Mobile App: RefMasters, Fashioned Health - Plata en Mobile Responsive Design: Trainerz, Wait Time - Plata en UX, Interface & Navigation: Wait Time, NINI and LOLI - Bronce en Mobile App: Trainerz, Wait Time - Bronce en UX, Interface & Navigation: RefMasters, Trainerz, Fashioned Health - Bronce en Website Design: NINI and LOLI ### 2022 (12 premios) - Oro en Mobile Responsive Design: Do It Center - Plata en Mobile App: Avidus, Do It Center - Plata en Mobile Responsive Design: Minnect - Plata en UX, Interface & Navigation: Avidus, Minnect, Do It Center - Bronce en Mobile App: Minnect - Bronce en Mobile Responsive Design: Avidus - Bronce en UX, Interface & Navigation: Joynup - Bronce en Website Design: Joynup, Do It Center ### 2021 (5 premios) - Oro en Interactive Design: Koombea - Oro en Mobile Responsive Design: Koombea - Oro en Website Design: Koombea - Plata en UX, Interface & Navigation: Koombea - Bronce en Animation & Illustration for Websites: Koombea ### 2020 (8 premios) - Oro en Mobile App: Luna - Oro en Mobile Interaction & Experience: Nab - Oro en Website Building Software: LINCSPRING - Plata en Interactive Design: Nab - Plata en UX, Interface & Navigation: Nab, LINCSPRING, Luna - Plata en Website Design: Nab ### 2019 (1 premio) - Oro en UX, Interface & Navigation: FlightLogger ## A dónde ir después - Auditoría de Diseño Gratis: Una revisión heurística escrita de lo que ya construiste - Ingeniería de Producto: La capacidad a la que el diseño le va un ciclo por delante - Nab: Caso de estudio, y ganador de un Indigo - Cómo Funcionan los Precios: Cómo se cotiza el trabajo de diseño junto con la construcción