Book-It, otra forma de entender las bibliotecas públicas (parte 2).

Si has llegado hasta aquí, o bien has querido cortar por lo sano y eres un auténtico UI o bien has leído la primera parte del reto y quieres continuar.

Bueno, para el que no se haya leído la primera parte, un poco de contexto:

Book-It es una aplicación para gestionar el sistema de reserva de puestos de lectura. La reserva se realiza por horas. Esto evita los sitios vacíos e inutilizables por estar reservados durante todo el día.

Además, Book-It, va mas allá y propone una reforma del concepto de préstamo de libros. Propone un préstamo a orden, es decir, reservas el libro que necesitas por la app y al día siguiente lo tienes en tu biblioteca mas cercana. Esto permite reutilizar todas esas salas llenas de libros y darle una nueva vida al espacio bibliotecario.

Prototipado

Con la idea definida, era hora de darle forma. Para ello, primero realizamos Wireframes. Esto nos permite partir de una base sencilla y organizar la estructura de la aplicación.

Una vez definida la estructura, antes de comenzar con un prototipado hi-fi, definimos una guía de estilos. Esto nos ayudará más tarde a economizar el tiempo y trabajar de manera ágil. La guía de estilo la creamos directamente en Figma.

A la hora de elegir la paleta, partí del color corporativo de la Comunidad de Madrid y elegí un gris mas neutral que crease armonía en la combinación. Para la elección de los colores secundarios me centré en colores básicos con una mezcla de blanco para rebajarlos un poco.

Al tratar de una aplicación sencilla, decidí hacer una bottom navigation bar con iconos fácilmente reconocibles por el usuario. Esto nos ayuda a hacer la interfaz intuitiva.

Gracias a Figma, la ejecución del diseño se vuelve ágil y sistemática debido a la componetización de los elementos.

Una vez creada la guía de estilo, queda montar las pantallas. Como explicaba antes, con los wireframes preparados y una guía de estilo lista diseñar es pan comido. De esta manera, Book-It tenía este aspecto.

Con Figma realice un par de interacciones para asemejar la app al uso real. Entre ellas, presento el flow de reservar un puesto de lectura y una presentación de la interacción por las pantallas.

Conclusiones

Bueno, llegados a este punto, tengo que decir que Design Thinking es una metodología casi milagrosa. Te lleva por el camino de los procesos hasta finalmente dar con una solución perfecta. Una vez más, la experiencia ha sido increíble y gratificante.