Diagrama de flujo: Prototipo mid-fi interactivo de una App real.
Ironhack Prework: Challence 2
He elegido el flujo de interacción de pedir cita en dermatología de la App Sanitas. Con los maratones enfrente de las pantallas, y manejando por primera vez programas como Figma, me salió un eczema por el distress de hacer el Pre-work de Ironhack en tiempo record para mí 😜.
El caso, es que como se me quitó, pues he basado el challenge en cómo anular una cita en la App de Sanitas.
Organizando la información
He hecho pantallazos de las pantallas por las que el/la usuari@ navegará, y para ver los elementos de UI que tienen. También para ver la jerarquía de la información mostrada (dónde se colocan los elementos y de qué manera), me he fijado en algunos de los elementos de UX.
Inventario de elementos UI de la APP
- Button (input control)
- Message box (informational Element)
- Modal window Pop-up (informational element)
Por otro lado, he inspeccionado los componentes de la página web de Sanitas, para ver qué tipo de letra usan. [ver/Opciones para desarrollador@s/ inspeccionar elementos]
- font-family: Bupa,Helvetica,Arial,sans-serif;
- font-size: 14px;
El prototipo de las pantallas que elegí es el siguiente:
Dibujando el Dibuja el flujo de interacción en lo-fi
Descripción de tareas del análisis de flujo
He coloreado en amarillo, el camino que selecciona el/la usuari@ para cancelar la cita a través de la App:
Y lo he traducido a un wireframe en mid-fi con el programa de diseño Figma:
Aquí podéis ver el prototipo en mid-fi:
Afortunadamente ya voy conociendo más la metodología en Ironhack Madrid, y agradezco mucho el feedback ofrecido por Lucía de la Cruz y Sole Abad ❤️
Considero que Ironhack Madrid, ha sido una muy buena elección, !y sólo voy por el prework!
