Iberbibliotecas
La meta de este proyecto fue rediseñar la experiencia web de los usuarios del sitio Iberbibliotecas, un portal web que se enfoca en fomentar el acceso gratuito a la lectura mediante su red de bibliotecas públicas en Iberoamérica, el portal también funciona como una plataforma para participar de becas y convocatorias a ayudas económicas.
Nuestro propósito entonces fue mejorar:
El acceso a información de becas
El proceso de inscripción a convocatorias
La legibilidad de los contenidos para personas con baja visibilidad
Mejorar la experiencia alrededor de completar formularios
Crear un UI Kit para mejorar la visual de la interfaz
Generar una propuesta visual nueva a partir de una nueva imagen
Etapa Descubrimiento
Durante este proceso, mantuvimos muchas reuniones con el cliente, donde discutíamos acerca de lo difícil que se convertía la tarea de completar formularios y lo largo y tedioso que era el proceso para aplicar a las becas.
Esta diapositiva muestra los primeros hallazgos que se le presentaron al cliente
En esta diapositiva se puede observar una de las primeras estructuras de navegación propuestas para el sitio
Diapositiva usada durante el ejercicio de definir la nueva imagen
Bocetos.
Luego de identificar algunos puntos de dolor para los usuarios, lo siguiente que hice fue generar bocetos que me ayudaran a estructurar la manera como el sitio web debería resolver las necesidades de los usuarios y por consiguiente los elementos que deberíamos incluir en los wireframes.
Exploración de como se comportarian los formularios en Mobile.
Wireframes
Gracias a que la mayoría del contenido del sitio venía de un sitio anterior, pude diseñar unos wireframes de alta fidelidad, ahorrandonos algunos pasos y agilizando el proceso de diseño.
Ya en esta etapa se puede ver un claro enfoque en mostrar el contenido de manera clara, utilizando el espacio blanco como un aliado en la legibilidad, brindando aire al sitio.
Prototipo de alta
Luego de el proceso de WF, diseñe el prototipo de alta, el cual mientras lo iba construyendo, me iba creando patrones y elementos que pude agregar a la biblioteca que luego se convertiría en el sistema de diseño del sitio.
En este prototipo incluí algunas micro-interacciones que programe para ayudar al equipo de desarrollo a entender como planeaba dar feedback a los usuarios que usaran el sitio, ya fuera dando clic a un botón, o haciendo hover sobre el menú.
UI Kit
Este kit fue mi punto de partida cuando comencé a diseñar la interfaz, de este documento sale la paleta de colores, las jerarquías tipográficas y el uso del logo en diferentes aplicaciones.
A partir de este kit y a medida que diseñaba la interfaz, iba armando el sistema de diseño, abajo les muestro un par de ejemplos.
Sistema de Diseño - Colores
Sistema de Diseño - Tipografía
Sistema de Diseño - Componentes
Usabilidad
A continuación voy a mostrar algunas de las decisiones de diseño que más impactaron el sitio.
En el Home lo más importante era darle control al usuario y mejorar el patrón de lectura de los elementos, en esta pantalla la idea es facilitar el descubrimiento de noticias y el acceso a eventos.
Para la sección de convocatorias, era importante tener 2 opciones para entregar el material de la convocatoria, según nos contaron algunos usuarios de la página, muchos aún preferían llenar formularios a mano y luego cargarlos al sitio.
Junto al cliente, decidimos que lo mejor era darles un tiempo de aprendizaje para completarlos online, y por ello diseñamos la opción que llamamos “para usuarios análogos”
Tanto usuarios como cliente nos contaron que uno de sus mayores momentos de frustración llegaba a la hora de completar los largos y densos formularios para postularse a las convocatorias y becas.
La idea con mi propuesta de formularios es la de evitar la frustración que viene de:
Muchos campos, muy pegados uno del otro
Campos que no le indican al usuario que debe hacer
No poder parar y continuar luego el formulario
No poder pasar saltar entre preguntas
No saber cuantos pasos faltan
No poder leer la información
Para la sección de banco de proyectos, lo que busqué fue estructurar una forma que le brindara la mayor información al usuario sobre el estado, el contenido y la fecha de publicación de los proyectos.