Transformando el diseño UI en una Aplicación Móvil Educativa

Mapeo de pantallas
El proceso inicial implicó la creación de un mapa de navegación desde cero, en colaboración con el desarrollador principal de la aplicación. Aunque la aplicación contaba con una lista de funcionalidades al inicio del proyecto hace 5 años, esta estaba desactualizada y no representaba un árbol de información completo. Tras varias sesiones de trabajo conjunto con el desarrollador, logramos mapear pantallas que no estaban contempladas ni siquiera en el prototipo interactivo, que hasta ese momento era nuestro material más completo.

Definición de "átomos" y "moléculas"
Mientras trabajábamos en las sesiones de mapeo, me sumergí en la creatividad. Solicité el brandbook de la universidad y exploré las últimas tendencias de Material Design. Mi misión: definir paletas de color, tipografía, iconografía, espacios, formas y sombras para la emocionante nueva interfaz de la app.

Mi proceso creativo arrancó al diseñar las pantallas principales de la aplicación, ya que eran las que albergaban los componentes e interacciones más desafiantes. Esta táctica me permitió establecer los primeros componentes, fundamentales para dar vida a variantes funcionales .

La mejoría colateral en la experiencia
A través del mapeo de pantallas, descubrí los casos de uso que carecían de "estados vacíos". Muchos flujos no comunicaban los fallos, mostrando pantallas en blanco y desconcertando a los usuarios, quienes se quejaban de mal funcionamientos.

Para mejorar la experiencia, diseñé pantallas explicativas para casos como la falta de materias entre bimestres, estudiantes de nuevo ingreso o la ausencia de conexión a internet.

💡 Críticas de diseño
Durante cada fase del proceso de rediseño, mantenía encuentros semanales con mi colega, el visionario detrás de la versión inicial. Juntos, revisábamos minuciosamente los detalles de la propuesta renovada, identificando y corrigiendo cualquier inconsistencia en el diseño visual.