Proyectos
Filmoteca de Catalunya
Reto
Definir la nueva presencia digital para la institución que se encarga conservación y difusión de la cultura cinematográfica en Catalunya
Tareas
UX Leading
Investigación UX
Estrategia UX
Arquitectura de la información
Wireframing
Diseño UI
Posición
Freelance
Duración
1 año
Planteamiento
La Filmoteca de Catalunya es la institución pública encargada de preservar y difundir la cultura cinematográfica
La Filmoteca es un recurso muy valioso para los amantes del cine, y un centro de información para los estudiosos de este arte.
En 2017, la Filmoteca solicitó un rediseño de su sitio web. El sitio existente estaba desactualizado y requería mejoras en usabilidad, arquitectura de la información y accesibilidad. Además, era crucial establecer una estrategia UX para satisfacer las necesidades de los diversos perfiles de usuarios de la institución.
Para ejecutar este proyecto, formé un equipo de profesionales de UX de diversos perfiles, que colaborarían en varias etapas de un proceso de diseño en cascada.
Planteamiento
La Filmoteca de Catalunya es la institución pública encargada de preservar y difundir la cultura cinematográfica
La Filmoteca es un recurso muy valioso para los amantes del cine, y un centro de información para los estudiosos de este arte.
En 2017, la Filmoteca solicitó un rediseño de su sitio web. El sitio existente estaba desactualizado y requería mejoras en usabilidad, arquitectura de la información y accesibilidad. Además, era crucial establecer una estrategia UX para satisfacer las necesidades de los diversos perfiles de usuarios de la institución.
Para ejecutar este proyecto, formé un equipo de profesionales de UX de diversos perfiles, que colaborarían en varias etapas de un proceso de diseño en cascada.
Planteamiento
La Filmoteca de Catalunya es la institución pública encargada de preservar y difundir la cultura cinematográfica
La Filmoteca es un recurso muy valioso para los amantes del cine, y un centro de información para los estudiosos de este arte.
En 2017, la Filmoteca solicitó un rediseño de su sitio web. El sitio existente estaba desactualizado y requería mejoras en usabilidad, arquitectura de la información y accesibilidad. Además, era crucial establecer una estrategia UX para satisfacer las necesidades de los diversos perfiles de usuarios de la institución.
Para ejecutar este proyecto, formé un equipo de profesionales de UX de diversos perfiles, que colaborarían en varias etapas de un proceso de diseño en cascada.
Investigación UX
Para iniciar el proyecto, era esencial entender profundamente la estructura y las actividades de la Filmoteca, así como a sus usuarios
Comenzamos con talleres internos para familiarizarnos con la institución y su estructura. Estos nos permitieron entender las diferentes áreas de la Filmoteca, sus principales actividades y sus intereses.
A continuación realizamos un benchmarking en el que analizamos sitios web de instituciones similares a la Filmoteca alrededor del mundo, y conocer buenas prácticas y debilidades que serían útiles más adelante.
La User Research se basó en la observación en contexto, entrevistas y una encuesta online. Esto nos ayudó a identificar los perfiles de los usuarios de la Filmoteca y sus necesidades. La Filmoteca nos facilitó mucho el proceso al ponernos en contacto con algunos de sus usuarios de diversos perfiles, pero trabajamos también con participantes que no tuvieran una relación tan estrecha con la institución, para evitar un sesgo en los resultados.
Estrategia UX
A partir de los resultados de research, pudimos definir la estrategia UX, que incluye la misión, visión y principios de la nueva presencia digital
Empezamos por mapear las necesidades de los usuarios y relacionar esas necesidades con los contenidos, para identificar qué nuevos servicios o unidades de información deberían añadirse en el futuro.
También definimos los principios UX, los principios de comunicación, y los valores del nuevo site.
Wireframing
Después de la fase de research, abordamos el rediseño de la arquitectura de la información y los nuevos wireframes
El objetivo de la nueva arquitectura de información era hacer que el acceso a la información fuera más intuitivo y ágil. Además, se buscaba contar con una estructura de contenidos que respondiera a los insights sobre los diferentes perfiles de usuario, descubiertos durante la investigación.
En cuanto al diseño de interacción, preparamos wireframes primero de las páginas clave, y a lo largo de varias iteraciones con el equipo de la Filmoteca y de los resultados de user testing, fuimos profundizando en el diseño a lo largo de todas las páginas del nuevo site responsive.
Diseño UI
La última etapa consistió en preparar el diseño UI, el UI Kit, y los archivos de entrega a los desarrolladores
El diseño UI de la nueva web de la Filmoteca tenía que basarse en las pautas de Gencat, la plataforma digital de la Generalitat de Catalunya. No obstante, la Filmoteca tiene una identidad propia y distintiva, por lo que nos permitieron aplicar algunas excepciones a las especificaciones generales. Una de ellas fue el uso de una imagen fullscreen en la home, que enlazara con el carácter inmersivo del cine, y que permitiera conectar con las emociones de los usuarios.
Después del diseño UI, llegó el momento de prepararlo todo para que los desarrolladores pudieran ponerse en marcha, y de colaborar con ellos en el proceso de implementación del diseño: empezaba una etapa de charlas, archivos, excels, revisiones,… :)
Aprendizajes
Equipo
Al formar un equipo para un proyecto, es imprescindible aliarse con perfiles complementarios, que permitan debatir y enriquecer los resultados.
Y que sean buenos compañeros de aventura :)
Stakeholders
En una institución pueden haber intereses diversos e incluso divergentes, procedentes de los diferentes stakeholders internos. Entender todas las visiones y necesidades y trabajar para encontrar una solución que permita satisfacerlas puede ser un desafío… pero un desafío que se disfruta.
Proceso
El proceso de creación de una nueva presencia digital no termina con el diseño: a veces, el seguimiento del proceso de desarrollo puede implicar tanto tiempo como el dedicado al diseño. En un proyecto de diseño en cascada como éste, definir conjuntamente qué procesos y herramientas facilitarán el diálogo entre diseño y desarrollo, resulta clave.
Proyectos
Filmoteca de Catalunya
Reto
Definir la nueva presencia digital para la institución que se encarga conservación y difusión de la cultura cinematográfica en Catalunya
Tareas
UX Leading
Investigación UX
Estrategia UX
Arquitectura de la información
Wireframing
Diseño UI
Posición
Freelance
Duración
1 año
Planteamiento
En 2020, empecé a colaborar en un plan de tres años para activar el proceso de diseño UX de un ecosistema SaaS para la gestión de smartcities
El contexto corresponde a una ingeniería que desarrolla un ecosistema SaaS de herramientas (plataforma y apps) para la gestión inteligente de datos y servicios urbanos.
En un proceso de diseño clásico, la investigación UX es el punto de partida de un proyecto de diseño. Sin embargo, cuando iniciamos la colaboración, algunas herramientas ya se habían desarrollado y necesitaban mejoras en términos de experiencia de usuario.
Investigación UX
Para iniciar el proyecto, era esencial entender profundamente la estructura y las actividades de la Filmoteca, así como a sus usuarios
Comenzamos con talleres internos para familiarizarnos con la institución y su estructura. Estos nos permitieron entender las diferentes áreas de la Filmoteca, sus principales actividades y sus intereses.
A continuación realizamos un benchmarking en el que analizamos sitios web de instituciones similares a la Filmoteca alrededor del mundo, y conocer buenas prácticas y debilidades que serían útiles más adelante.
La User Research se basó en la observación en contexto, entrevistas y una encuesta online. Esto nos ayudó a identificar los perfiles de los usuarios de la Filmoteca y sus necesidades. La Filmoteca nos facilitó mucho el proceso al ponernos en contacto con algunos de sus usuarios de diversos perfiles, pero trabajamos también con participantes que no tuvieran una relación tan estrecha con la institución, para evitar un sesgo en los resultados.
Estrategia UX
A partir de los resultados de research, pudimos definir la estrategia UX, que incluye la misión, visión y principios de la nueva presencia digital
Empezamos por mapear las necesidades de los usuarios y relacionar esas necesidades con los contenidos, para identificar qué nuevos servicios o unidades de información deberían añadirse en el futuro.
También definimos los principios UX, los principios de comunicación, y los valores del nuevo site.
Wireframing
Después de la fase de research, abordamos el rediseño de la arquitectura de la información y los nuevos wireframes
El objetivo de la nueva arquitectura de información era hacer que el acceso a la información fuera más intuitivo y ágil. Además, se buscaba contar con una estructura de contenidos que respondiera a los insights sobre los diferentes perfiles de usuario, descubiertos durante la investigación.
En cuanto al diseño de interacción, preparamos wireframes primero de las páginas clave, y a lo largo de varias iteraciones con el equipo de la Filmoteca y de los resultados de user testing, fuimos profundizando en el diseño a lo largo de todas las páginas del nuevo site responsive.
Diseño UI
La última etapa consistió en preparar el diseño UI, el UI Kit, y los archivos de entrega a los desarrolladores
El diseño UI de la nueva web de la Filmoteca tenía que basarse en las pautas de Gencat, la plataforma digital de la Generalitat de Catalunya. No obstante, la Filmoteca tiene una identidad propia y distintiva, por lo que nos permitieron aplicar algunas excepciones a las especificaciones generales. Una de ellas fue el uso de una imagen fullscreen en la home, que enlazara con el carácter inmersivo del cine, y que permitiera conectar con las emociones de los usuarios.
Después del diseño UI, llegó el momento de prepararlo todo para que los desarrolladores pudieran ponerse en marcha, y de colaborar con ellos en el proceso de implementación del diseño: empezaba una etapa de charlas, archivos, excels, revisiones,… :)
Aprendizajes
Equipo
Al formar un equipo para un proyecto, es imprescindible aliarse con perfiles complementarios, que permitan debatir y enriquecer los resultados.
Y que sean buenos compañeros de aventura :)
Stakeholders
En una institución pueden haber intereses diversos e incluso divergentes, procedentes de los diferentes stakeholders internos. Entender todas las visiones y necesidades y trabajar para encontrar una solución que permita satisfacerlas puede ser un desafío… pero un desafío que se disfruta.
Proceso
El proceso de creación de una nueva presencia digital no termina con el diseño: a veces, el seguimiento del proceso de desarrollo puede implicar tanto tiempo como el dedicado al diseño. En un proyecto de diseño en cascada como éste, definir conjuntamente qué procesos y herramientas facilitarán el diálogo entre diseño y desarrollo, resulta clave.
Me gusta conocer nuevos proyectos. Si crees que puedo ayudarte,
Creado con Figma, Framer, Photoshop, Notion, la deliciosa fuente Hanken Grotesk, Phosphor Icons
y 24 tazas (o más) de café
Visita mi perfil en Linkedin
Me gusta conocer nuevos proyectos. Si crees que puedo ayudarte,
Creado con Figma, Framer, Photoshop, Notion, la deliciosa fuente Hanken Grotesk, Phosphor Icons
y 24 tazas (o más) de café
Visita mi perfil en Linkedin
Me gusta conocer nuevos proyectos.
Si crees que puedo ayudarte,
Creado con Figma, Framer, Photoshop, Notion, la deliciosa fuente Hanken Grotesk, Phosphor Icons
y 24 tazas (o más) de café
Visita mi perfil en Linkedin
Me gusta conocer nuevos proyectos. Si crees que puedo ayudarte,
Creado con Figma, Framer, Photoshop, Notion,
la deliciosa fuente Hanken Grotesk, Phosphor Icons
y 24 tazas (o más) de café
Visita mi perfil en Linkedin