MediaLab Prado
Mi primer proyecto individual en el Bootcamp de diseño UX/UI fue el de MediaLab Prado. Este debía ser el rediseño de una web o una app gubernamental o sin ánimo de lucro. Yo elegí esta iniciativa del Ayuntamiento de Madrid.
1. Problema
La web tiene mucha información y la jerarquía de esta no es muy clara. Por lo que la navegación no resulta ni fácil, ni ágil. Con estos ingredientes el proyecto no queda muy claro.
2. Research
El gran problema de MediaLab Prado es que la gente no lo conoce; aún así los proyectos que realiza sí resultan atractivos hasta llegar a plantearse la participación en ellos. Las encuestas fueron muy útiles a la hora de determinar si los usuarios conocía el proyecto y la opinión que tenían de iniciativas de este tipo.
Para conocer más a fondo el nivel de implicación de los usuarios con las actividades vecinales recurrí a las entrevistas personales. Analizándolas llegué a la conclusión de que el mayor freno que encuentran los usuarios es el tiempo y la obtención de información de los distintos eventos. Por eso decidí que tienen que llegar a la información de forma rápida y muy ágil; y sobre todo conocer en un vistazo las distintos tipos de actividades con los que cuenta MediaLab Prado.
3. Users
Con los pasos previos pude perfilar los niveles de implicación que existen en este tipo de iniciativas y, con ellos, los tres tipos de users de la web:

- Baja implicación: sólo está interesado en la agenda de actividades. Su participación es solo a nivel usuario y no pretende implicarse más.
- Media implicación: le interesa qué ocurre en su distrito vecinal pero no cuenta con tiempo suficiente para implicarse mucho. Le gustaría ser parte activa de estas iniciativas pero tiene varios frenos: el trabajo y el tiempo.
- Alta implicación: tiene varias ideas de proyectos que podrían mejorar su barrio o ayudar a sus vecinos. Le gustaría presentar alguno de ellos y que se llevara a cabo estando él/ella al frente de ello
4. Moodboard
El diseño busca dar prioridad a la estructura del contenido; que se entienda rápidamente dándole una identidad muy marcada consiguiendo agilizar la lectura de la información.

- Color: predominio de los fondos blancos, bloques en morado muy oscuro, casi negro y elementos destacados en naranja óxido. Los colores buscan distraer lo menos posible al usuario del contenido y apoyar el resto de decisiones de diseño.
- Tipografía: dos pesos tipográficos muy contrastados con encabezados un tanto brutalistas en oposición a una tipografía fina y estilizada elegida para los párrafos.
- Texturas: predominio de las texturas naturales y arquitectónicas como elementos gráficos no definitorios del contenido. Buscando ser un tanto ambiguas y contrastadas con el fondo plano.
- Formas: muy lineales y planas. Rectángulos muy básicos y primarios.
5. Decisiones de Diseño
Básicamente han sido dos:
- Agilizar el envío de proyectos y hacerlo más atractivo, además de integrarlo en el lenguaje web de formularios al que todos estamos ya acostumbrados.
- Añadir un sistema de votación de los proyectos ya presentados y de esta forma integrar al usuario de implicación media. Esta votación no implica que los usuarios tengan la última palabra sobre los proyectos pero les facilita el conocer qué puede suceder en su distrito.
6. Wireframes y Sketch
El bocetado fue algo fundamental a la hora de diseñar los elementos y potenciar el concepto que di al proyecto.
Así empecé con unos wireframes de media-baja fidelidad que definían el espacio, la colocación y jerarquía de los elementos. Además este diseño se pensó como una web responsive, por ello desarrollé en wireframes cómo se comportaría en formato móvil.

Una de las últimas fases del proyecto fue terminar de definir el diseño y aplicar los elementos que faltaban del mood board.
Este fue el resultado final:
