El documento habla sobre el uso de prototipos en el desarrollo de productos digitales. Explica que los prototipos permiten explorar ideas de manera rápida y barata antes de empezar el desarrollo real, ayudando a identificar problemas y recibir comentarios valiosos de usuarios. También menciona algunos beneficios como mejorar la maniobrabilidad del producto, obtener retroalimentación temprana y evitar problemas más adelante. Finalmente, da ejemplos de prototipos de baja y alta fidelidad y cómo fuer

1. WORKFLOW
BASADO EN
PROTOTIPOS
- Saludos y agradecimiento al staff de UXNights por la invitación
- Venimos de ANCLA Studio
- Presentar primero a Zomars
- Dpto. y trabajo de cada uno

2. HOLA

3. ZOMARSWEB DEVELOPER & DESIGNER

4. EZEQUIEL
RANGELWEB DEVELOPER
- Dar enfoque rápido y global de la plática
- Conceptos que ayudaron a dar forma al proyecto
- Puntos clave para desarrollar prototipo

5. PROTOTIPO

6. - Borrador de un producto
- Permite explorar ideas
- Mostrar la intención detrás de
alguna característica
- Evita malgastar dinero o tiempo de
desarrollo
PROTOTIPO
- Dar ejemplos de prototipos que no son web (automóviles, productos físicos)
- Hacer énfasis en tiempo de desarrollo

7. BENEFICIOS
- La imagen no representa de manera puntual lo que se quiere dar a entender
- Explicar más los beneficios directos

8. - Maniobrabilidad
- Feedback
- Problemas
- Tiempo
- Es divertido !
BENEFICIOS
- Definición de maniobrabilidad:
- (No da problemas) Permite enfocarte en ellos para buscar soluciones
- Es divertido, mas no sencillo

9. DEFINIR PROBLEMA

10. “No es tu trabajo hacer lo que te
piden hacer. Tu objetivo es entender
el por qué lo piden, para aprender
sobre el problema que realmente
quieren resolver.”
DEFINIR PROBLEMA

11. EPICENTRO

12. EPICENTRO
“Empieza desde el centro y
construye hacia afuera.”
- Frase tomada de 37Signals
- Dar un poco de background de 37signals
- Recomendar signalvnoise

13. ENCOUNTER
CULIACÁN
- Dar paso al zomars

14. ENCOUNTER
CULIACÁN
- Dar paso al zomars

15. - James Turrell, el artista de la luz
- Experiencia de compra en linea
- Mobile-first
- KISS (Keep It Simple, Stupid)
ENCOUNTER
CULIACÁN
- En que consta el proyecto?
- ¿Como fue el acercamiento inicial?

16. BOCETAJE
- Cual fue el epicentro? (La venta de boletos en linea)

17. - Aterrizar ideas en el menor tiempo
posible
- Definir conceptos centrados en el
objetivo
- Establecer un flujo coherente
BOCETAJE
- ¿Cual fue el beneficio de presentar bocetos antes del diseño?

18. MAQUETADO
- Si logras explicar bien tu idea con maquetas, vas por buen camino.

19. - Consolidar layouts
- Permite testear el flujo
- Si se entiende así de feo, se
entenderá en el producto final
MAQUETADO
A veces tratamos de impresionar con buenos visuales y perdemos el enfoque principal.

20. PROTOTIPO LO-FI

21. - Sirve para probar y rebotar el
producto a primera instancia
- Recibir feedback de alto valor
(funcionalidad, facilidad de uso)
- Evita caer en feedback ambiguo
(colores, tamaños, tipos, etc.)
- Son fáciles de crear y reiterar
PROTOTIPO LO-FI
Para que sirve el prototipo lo-fi
Explica funcionalidades que un simple dibujo a veces no puede explicar.
Ayuda a entender interacciones y animaciones sin caer en lo visual.

22. PROTOTIPO HI-FI
Es lo mas cercano al producto final.
Si logras hacerle creer al cliente que es lo mas real posible.
Lo importante es descartar una mala idea lo mas pronto posible para no perder tiempo.
No hay mayor satisfacción que recibir luz verde para tu prototipo.

23. PROTOTIPO HI-FI
Es lo mas cercano al producto final.
Si logras hacerle creer al cliente que es lo mas real posible.
Lo importante es descartar una mala idea lo mas pronto posible para no perder tiempo.
No hay mayor satisfacción que recibir luz verde para tu prototipo.

24. Y AHORA SI…

25. …A CODEAR

26. Fuentes:
https://www.usability.gov/how-to-and-tools/methods/prototyping.html
https://gettingreal.37signals.com/ch09_Epicenter_Design.php
https://www.uxpin.com/studio/blog/ux-case-study-kill-bad-ideas-with-rapid-
prototyping/
Fotos:
https://www.pexels.com/photo/man-macbook-pro-shoes-imac-36053/
https://www.pexels.com/photo/road-nature-hand-path-1421/
https://www.pexels.com/photo/ideas-whiteboard-person-working-7369/
¡GRACIAS!
@el_semantico
@zomars