Jesús Beas
  • Sobre mi
  • Portfolio
  • Blog
  • Contacto
Descargar CV
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.

https://www.gov.uk/

https://www.government.nl/

https://www.govt.nz/

https://www.es.amnesty.org/

https://www.unicef.es/

https://es.greenpeace.org/es/

https://www.fad.es/

https://www.savethechildren.es/

‣

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 👇🏻

Máquinas de Autoventa | AlsaMáquinas de Autoventa | Alsa
👨🏻‍💻
Máquinas de Autoventa | Alsa

Trabajo fin de master UX-UI

diseñoautoserviciomaster
Parkinson tool | AbbottParkinson tool | Abbott
👨🏻‍💻
Parkinson tool | Abbott

Aplicación para pacientes con Parkinson

accesibilidadenfermedaddiseño
Covid Pass | AccionaCovid Pass | Acciona
👨🏻‍💻
Covid Pass | Acciona

Gestionar la vuelta a las oficinas tras el confinamiento

agilecoviddiseñoteletrabajooficina
Sede electrónica | Ministerio de trabajoSede electrónica | Ministerio de trabajo
👨🏻‍💻
Sede electrónica | Ministerio de trabajo

Rediseño de la sede electrónica del ministerio

ministeriosede electronicatramites
Minsait Knowledge Manager | MinsaitMinsait Knowledge Manager | Minsait
👨🏻‍💻
Minsait Knowledge Manager | Minsait

Plataforma destinada al intercambio de conocimiento

diseñomanagementdocumentos
Experiencia de cliente | Reale SegurosExperiencia de cliente | Reale Seguros
👨🏻‍💻
Experiencia de cliente | Reale Seguros

Mejorar la experiencia digital de los asegurados

diseñoresearchserviceseguros
Experiencia de cliente | DirectExperiencia de cliente | Direct
👨🏻‍💻
Experiencia de cliente | Direct

Mejorar la experiencia digital de los asegurados

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

Nueva web del Ministerio de Derechos Sociales

gobiernotramitesministeriodiseño

❤️ 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 ✉️

Secciones

🧔🏻Sobre mi👨🏻‍💻Portfolio✏️Blog✉️Contacto

Redes

💼  LinkedIn

🗞  Medium

📷  Instagram

🐥  Twitter

©️
Jesus Beas | 2022