Derechos Sociales | Gob. España
👨🏻‍💻

Derechos Sociales | Gob. España

ℹ️

El presente artículo pretende explicar el proyecto, realizado para Gobierno de España, de diseño de la web del Ministerio de Derechos Sociales

Objetivo del proyecto 🎯

Crear la web del, recién inaugurado, Ministerio de Derechos Sociales. Uno de los principales retos fue ofrecer la gran cantidad de información disponible de una manera fácil de encontrar y digerir por los usuarios en función de lo que estén buscando.

Contexto 🗺

Algunos datos, particulares del proyecto, a tener en cuenta:

✅  Gran cantidad de información sin trabajar

✅  Para el cliente todo es igual de importante

✅  Indefinición e inestabilidad política

Research 🔎

Durante la fase de research se realizaron una serie de técnicas. Gracias a los insights obtenidos durante esta investigación pudimos definir una solución final.

Benchmark 👀

Se analizaron varias webs de referencia, de las que se extrajeron las mejores prácticas en materia de arquitectura, usabilidad, contenido, etc. También se estudiaron algunas de las webs más destacadas en materia de servicios sociales.

Evaluación Heurística 🔧

Gran parte del contenido de la nueva web se encontraba alojado en otras webs. Con el fin de mejorar y optimizar el diseño se realizó una evaluación heurística, del contenido existente, en la que se identificaron las siguientes carencias:

❎  Demasiada carga cognitiva

❎ Ausencia total de jerarquías

❎ Texto y contenido sin trabajar

❎ Arquitectura de información confusa

❎ Taxonomía compleja

❎ Innumerables fallos de usabilidad

❎ Excesivo número de enlaces

❎ Poca presencia del buscador

Entrevistas 🎙

Arquitectura 📐

Uno de los mayores retos fue organizar y clasificar la información para ofrecerla de manera entendible y accesible a la ciudadanía. Gracias a los workshops y al estudio del contenido existente se pudieron elaborar varios árboles de información que sirvieron de base para la posterior optimización de la arquitectura en la fase de diseño.

A continuación se muestra algunos árboles de información:

Arquitectura de Servicios Sociales
Arquitectura de Servicios Sociales
Arquitectura de Covid 19
Arquitectura de Covid 19
Arquitectura de Servicios al Ciudadano
Arquitectura de Servicios al Ciudadano

Contenido 📂

Otro de los principales problemas de este tipo de webs es el contenido: el gran olvidado.

❎  Todo es importante, nada se filtra ni prioriza

❎ Falta de consistencia o guía de estilo

❎ Uso muy limitado de plantillas

❎ Dificultad para escalar por la falta de estándares y plantillas

❎ Taxonomía poco entendible

❎ Uso escaso de clasificadores y pestañas

❎ Navegación confusa en niveles interiores

Ejemplo de una pantalla interior
Ejemplo de una pantalla interior

Insights 💡

Consideraciones top 🏅

🥇

Rápido. Encontrar fácilmente la información deseada

🥈

Intuitivo. Navegar con control de la situación

🥉

Accesible. Inclusivo para todas las personas

Otras consideraciones 👇🏻

✅  Jerarquías claras

✅  Información destacada

✅  Diseño escalable

✅  Limpio y ordenado

✅  Estructura consistente

✅  Contenido trabajado

✅  Visualmente cuidado

Diseño 🖍

Teniendo en cuenta el objetivo del proyecto y todos los datos obtenidos durante la fase de análisis procedimos definir una solución que cumpliera los siguientes requisitos:

🥇

Rápido. Encontrar fácilmente la información deseada

🥈

Intuitivo. Navegar con control de la situación

🥉

Accesible. Inclusivo para todas las personas

📚

Puedes ver todos los requisitos en el apartado de insights 💡

Prototipo en alta 👨🏻‍💻

Con estos requisitos se diseño la propuesta de UX para validar los nuevos flujos así como la nueva estructura de las pantallas.

image
image
image
image
image
image

Arquitectura y navegación 🧭

Uno de los mayores retos fue organizar y clasificar la información para encontrarla fácilmente. Además de trabajar los grupos y niveles de información se hizo especial hincapié en definir una taxonomía entendible.

Menú desplegable de navegación
Menú desplegable de navegación
Páginas, de segundo nivel, distribuidoras de contenido
Páginas, de segundo nivel, distribuidoras de contenido

Páginas interiores 📄

Para el diseño de las páginas interiores se analizaron las diferentes tipologías de contenido y se propuso una estructura modular que permitiera la flexibilidad y escalabilidad del contenido. Anexo a los prototipos se elaboró una guía de uso ya que la gestión y adición de dicho contenido sería responsabilidad del Ministerio.

Ejemplo de página interior
Ejemplo de página interior

👉🏻

Puedes consultar el prototipo interactivo aquí

Diseño visual 🎨

Una vez validada la parte de UX se definió la solución visual final. Esta capa visual enfatizó la parte inclusiva y divulgativa con ilustraciones y elementos gráficos a la par que mantuvo la esencia de un diseño sencillo, ordenado y enfocado en el contenido.

image
image
image

Créditos del diseño visual: Elena Marticorena

Implementación

👉🏻

Puedes encontrar el resultado final haciendo click aquí

Valoración final ⭐️

👏🏻

Lo mejor: el gran trabajo que se realizó trabajando la arquitectura y la navegación para ofrecer una solución bien estructurada y ordenada

📚

Aprendizaje: en este tipo de proyectos es imprescindible trabajar el contenido con el cliente e incluir esta labor en el presupuesto y en la planificación

Te podría interesar 👇🏻

❤️ It’s a match?

📌

Si tienes una idea, proyecto o quieres realizarme una consulta no dudes en contactarme a través de LinkedIn o mi correo personal ✉️

©️

Jesus Beas | 2022