Introducción

1

Fundamentos de Product Management: De Principiante a Experto

¿Qué es un producto impulsado por tecnología?

2

Definición de Producto

3

Innovación Tecnológica en Productos Cotidianos: Tesla a Telegram

4

Estrategias de Crecimiento para Product Managers: Startups a Empresas

Por qué los esfuerzos de producto casi siempre fallan

5

Desarrollo de Software: Del Concepto al Despliegue con Agilidad

6

Cómo Evitar Fallos con Metodologías Ágiles en Equipos de Trabajo

7

Creación y Validación de MVP (Minimum Viable Product) para Emprendedores

8

De Wireframes a Prototipos: Iteración Ágil para Productos Exitosos

9

Gestión de Producto: Descubrimiento y Entrega Continua

Product Management

10

Rol y Estrategias del Product Manager: Liderazgo y Éxito del Producto

11

Roles en Gestión de Productos: Product Manager, Product Owner y Project Manager

12

Desarrollo de Carrera en Gestión de Producto: de Associate PM a Líder

13

Claves para Convertirte en Product Manager: Técnicas y Estrategias

¿Quiénes hacen parte del equipo de producto?

14

¿Quiénes hacen parte del equipo de producto?

15

Diseño de Producto: Claves para Entender al Usuario y Crear Soluciones

16

Estrategias de Crecimiento para Productos: Colaboración y Planes

17

Colaboración Efectiva con Ingenieros: Perspectiva de un Product Manager

18

Optimización de Equipos de Producto: Roles Esenciales y su Impacto

19

Gestión de Stakeholders: Estrategias para Defender al Cliente

20

Formación y Gestión de Equipos de Producto: Misioneros vs. Mercenarios

Product Roadmap, Product Backlog y Release Plan

21

Gestión Ágil de Productos: Backlog, Roadmap y Plan de Lanzamiento

Siguientes pasos

22

Pasos para Ser un Product Manager Observador y Curioso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

De Wireframes a Prototipos: Iteración Ágil para Productos Exitosos

8/22
Recursos

Los wireframes son la representación más simple de un diseño que tenemos en mente y que eventualmente podría convertirse en un prototipo y luego en un diseño interactivo para ser desarrollado. Un wireframe es básicamente un boceto de cómo se verá nuestro diseño, centrándose en las funciones que tendrá.

Imagínate esta situación: intenta dibujar cómo ves la aplicación de Instagram o WhatsApp o incluso Twitter, sin abrir la aplicación. Eso es un wireframe, una representación simple de la composición de tu diseño. Por ejemplo, puedes decir: "mi app tendrá la foto de perfil en el lado derecho, en el centro estarán los posts y los post tendrán forma de rectángulo".

Este diseño rápido te ayuda a obtener retroalimentación que te ayudará a tener un prototipo más funcional.

Para qué sirven los wireframes

La importancia de los wireframes radica en que nos permiten obtener retroalimentación de nuestros primeros usuarios, principalmente familiares y amigos. Con base en sus comentarios, podemos mejorar la interfaz de nuestro producto. Esto nos permite llegar a un prototipo que ya puede ser probado por usuarios reales y comenzar el proceso de iteración.

Ahora bien, ¿para qué sirve exactamente un wireframe? Veamos algunas de sus funciones principales:

Tener una vista inicial de cómo se verá nuestro producto

Los wireframes nos permiten tener una idea visual de cómo se verá nuestro producto final. Al hacer un boceto simple, podemos ver cómo encajan los diferentes elementos y cómo se organiza la información en la interfaz. Esto nos ayuda a tener una visión clara de cómo será la experiencia del usuario al interactuar con nuestro producto.

Tener una forma rápida de cambiar cosas que no encajan con el objetivo de nuestra interfaz

Al crear un wireframe, podemos identificar rápidamente las partes del diseño que no cumplen con nuestros objetivos o que no encajan en la visión que tenemos para nuestra interfaz. Esto nos permite hacer cambios y ajustes de manera ágil, antes de invertir tiempo y recursos en el desarrollo completo del diseño.

Recibir retroalimentación que nos permita mejorar el producto, incluso antes de escribir una línea de código

Quizás una de las ventajas más importantes de los wireframes es que nos permiten obtener retroalimentación temprana de nuestros usuarios. Al tener un diseño básico pero funcional, podemos presentarlo a nuestros usuarios y recibir sus comentarios. Esto nos ayuda a identificar áreas de mejora y a realizar ajustes antes de iniciar el desarrollo completo del producto.

Aportes 28

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Los **Wireframes **son la mínima expresión de un diseño que tenemos en la cabeza y que eventualmente podría volverse un prototipo y luego un diseño interactivo para ser desarrollado.

Wireframes de baja calidad.- Con muy poco esfuerzo pueden generar una idea de cómo la interfaz o la funcionalidad se va a ver y que el equipo la pueda juzgar para iterar sobre la misma.

Un Wireframe tiene que ser lo más básico que puedas comunicar la funcionalidad o la interfaz que tienes en tu cabeza.

Por ejemplo: Dibujar en una servilleta la interfaz de Instagram o Whatsapp.

Iterar -> fallar -> aprender

"La mayoría de las ideas fallan"
lo más importante es aprender del error, compartirlo con el equipo y aprender de lo ocurrido

Básicamente Desing Thinking, que por cierto existe el curso en video en esta plataforma.

Wireframes 😎

Son la minima intención expresion del diseño de un prototipo. Los wireframes de baja fidelidad nos ayudan a ver como se va a comportar la navegación de nuestro producto y un nos da un acercamiento inicial de como podría verse (solo a nivel de boceto). Permite visualizar las funcionalidades más importantes del producto.

Es un boceto básico del cual recibimos feedback de nuestro equipo para poder colocar o poner funcionalidades que no se vieron en el primer boceto. Aquí vamos a iterar nuestro wireframe.

Prototipos 🚀

En el momento en que un wireframes ha pasado por un proceso de iteración podemos llegar a definir unos prototipos con el equipo de trabajo. La idea es encontrar el producto ideal con ayuda de nuestro equipo.

Metologías de diseño para iterar un prototipo:

Exiten diferentes metodologías de diseño que nos ayudan a construir nuestro prototipo en 5 días con el fin de decidir si nuestra idea debe pasar etapa de desarrollo o no. Aún así, con estas metodologías nuestro producto puede fallar.

Una forma muy sencilla de llevar a cabo esto, es arrancar estableciendo un cliente hipotético llamado user persona en papel o en figma:

https://www.figma.com/community/file/881830156311997001

Una vez que tenes el user persona te preguntas ¿Dónde puedo encontrar esa persona?, normalmente es fácil atravez de foros y grupos de Telegram.

Con ellos hablas de tus productos y tratas de que respondan una pequeña encuesta de google forms.

Con esos encuestados podes verificar sus puntos de dolor con mayor detalle y verificar tu propuesta de valor para ese user persona.

Con las personas de tu formulario creas un grupo de WhatsApp y Telegram al cual le vas a enviar todos los wireframes y vas a ir iterando hasta lograr un prototipo de alta calidad (comenzar con papel y terminar con figma junto con tu equipo)

Finalmente separar ese diseño grafico en Requerimientos agrupados por módulos que luego se separan por Goal Use Cases y se van registrando sobre jira para que el equipo de desarrollo pueda hacerlos.

Con esta metodología se usa Kanban para el flujo de desarrollo, las épicas vienen a ser los módulos y las historias de usuario los casos de uso por objetivo. Porque usar casos de uso por objetivos? normalmente en muchas startup al no haber mucho dinero se tiene muchos juniors y una mayor definición de que y como se debe hacer puede ahorrar muchas horas de desarrollo, el secreto de esta técnica es trabajar por módulos y siempre hacer planing grupal de cada modulo y una retrospectiva al final de cada modulo.

Actualmente trabajo en una startup como analista funcional y así funciona el flujo de forma muy dinámica.

Hacer una lluvia de ideas sobre el producto que quiero ofrecer y obtener esa feedback

la integración será nuestra mejor amiga para crecer aprender e innovar

Se crean wireframes de baja calidad para ver las ventajas y desventajas de tu producto, con muy poco esfuerzo pueden genera una idea de como la interfaz o la funcionalidad se va a ver y de esta forma el equipo pueda juzgar par iterar sobre la misma.

Información resumida de esta clase
#EstudiantesDePlatzi

  • Los Wireframes son la mínima expresión de un diseño que tenemos, es lo anterior a un prototipo

  • Wireframe no es algo bonito, es algo rápido y es lo más básico para expresar la idea

  • Lo importante es recibir feedback para iterar y luego poder crear un prototipo

  • Todos pueden aportar a los Wireframes

  • La gran mayoría de ideas pueden fallar, solo debemos aprender de estas fallas y no cometer el mismo error

  • Todos los problemas tienen una solución y la solución no es la primera idea que ejecutes

cabe destacar que los wireframes hacen parte de la etapa de análisis y diseño de casos de uso que viene después del análisis del problema. Para que un wireframe surja, primero debemos tener claro cuál es el problema y cómo sería la solución en cuanto a casos de uso. (véase uml use case diagram y véase IEEE830)

Gracias

Las iteraciones son cada paso mas cerca hacia conocer mejor a nuestro cliente para darle una solución mediante un prototipo

Wireframes (Mínima expresión de una idea) de baja calidad que den una idea de cómo la interfaz se verá y apartir de ahí corregir o mejorar. No es algo bonito, es algo rápido que da la visión y la funcionalidad del producto. Iterar con el feedback obtenido se puede convertir en un prototipo. Con el prototipo podrás ir a validar tus supuestos con tus usuarios. Hay que sacar el máximo de todos los miembros del equipo en el menor tiempo posible, para darse cuenta dónde están cometiendo errores, fallar rápido e iterar hasta encontrar el producto que vale la pena desarrollar. Validar y prototipar en 5 días, el 99% de las ideas están mal, lo importante es aprender rápido con las fallas y no volver a cometer el mismo error, tratar de que las ideas sean cada vez más acertadas para que en algun punto se solucione el problema del usuario. La solución no será la primera idea que ejecutes, será una serie de iteraciones que te enseñen acerca de tu cliente.
Es interesante como los Wireframes actúan como hornos, donde las ideas se plasman recién salidas de la cabeza. Puede ser el inicio de un gran proyecto, ahí conviene no criticar nada, dejar todo fluya libremente.

Wireframes: Mínima expresión de un diseño que tenemos en la cabeza y que eventualmente podrían volverse un prototipo

  • Crearlos pueden generar una idea de cómo la interfaz o la funcionalidad se va a ver.
  • Con ese diseño básico, la función es poder hacer una lluvia de ideas sobre todo lo que podría traer la interfaz que se está creando o el producto que se quiere ofrecer, para poder recibir feedback lo más rápido posible, para ir puliéndolo y que se convierta en ese prototipo que mostrarás a tus usuarios y poder validar que tus supuestos son una buena idea o no.
  • Wireframes
    • Minima expresión de un diseño que tenemos en la cabeza y que eventualmente se puede volver un prototipo y luego un diseño interactivo para ser desarrollado
    • Para empezar se deben crear wireframes de baja calidad solo para tener una idea y que el equipo la pueda juzgar para poder iterar sobre la misma
    • Un wireframe inicial no es algo bonito, no es para que el usuario lo use, es algo rápido que te permite visualizar las cosas más importantes de esa interfaz y dar una idea de cual es la visión de producto que tu tienes
    • Un wireframe debe ser lo más básico en lo que puedas comunicar la funcionalidad o interfaz que tienes en tu cabeza
    • La función es hacer una lluvia de ideas sobre todo lo que podría traer la interfaz que estas creando o producto, y recibir feedback lo mas rápido posible
    • Después del feedback debes iterar el wireframes, después sigues obteniendo feedback para pulir el wireframe para que eventualmente se convierta en un prototipo para mostrarlo a tus usuarios
    • La gran mayoría de las ideas el 99% van a fallar, pero es importante aprender, no cometer el mismo error, y que las ideas sean mas acertadas
  • Herramientas para wireframes y prototipar
    • [Figma]
    • [Marvel app]
    • [Whimsical]

Puedes ver un paper completo sobre la definición de los Wirefrimes aquí. Fuente: Lucidchart.

fallar rapido para iterar, eso es

Los clientes son distintos entre industrias, entre problemas y tipos de productos.

Totalmente, los wireframes y los prototipos son muy necesarios para empezar a desarrollar un producto sea cual sea el mismo.

Llegar a desarrollar un producto no es facil el 99% de tu idea esta errada .
Tienes que buscar un punto de protototipo evolucionado para darlo a conocer de maner rapida.

Una idea la tienes que desarrrollar evolucionando fallando corrigiendo y volver a mostrar el producto .Teniendo una mejor version cada dia hasta tener un buen producto. Iterar desarrollar y aprender.

La solución no es la primera idea que ejecutas , es la investigacion desarrollando fallando y aprendiendo .
Aprender del proceso fallando hasta encontrar la solución del cliente.

Wireframes : expresion minina viable para concluir una lluvia de ideas de manera rapida para hacer un prototipo de tu idea y mostrarlo a su cliente .Pasando por este proceso obtienes un prototipo en su mejor versión.

Iterar desarrollar y aprender se debe decidir si esta idea va fallar o no .
Se desarrolla un producto por medio de mostrar validando tu idea para encontrar errores y poderla llevar a su maximo logro para mostrarla a tu cliente .

Siempre la idea es solucionar la necesidad que se presenta .
Siempre de una manera basica completa
Mejorada llegando a tener un prototipo de facil proceso para desarrollar el producto

Wireframes :es hacer un prototipo de muy baja calidad para tener una idea de lo que vas creando haciendo lluvia de ideas llegando a tener una función llevandola a un prototipo para desarrollar esta idea lo mas rápido posible .