Case Study: Portal Web Ayuntamiento de Madrid

Gracia E.
4 min readApr 6, 2020

--

Llegamos al final del pre-curso a pocos días de empezar el Bootcamp oficialmente. El último reto que se nos propone es mejorar la web del Ayuntamiento de Madrid.

Portal web del Ayuntamiento de Madrid

Se propone navegar por ella para encontrar los puntos de fricción y proponer una solución rápida diseñando un prototipo con low/medium fidelity.

Personalmente esta web me abruma, no solo la de este ayuntamiento sino muchos webs similares de otras ciudades. Los ayuntamientos tienen mucha información que ofrecer al usuario y no pueden sustituirla o resumirla. Este es un punto importante a partir del cual he empezado a trabajar: es necesaria la información pero hay que buscar un orden lógico y visual, que permita al usuario encontrar fácilmente lo que busca y navegar con cierto orden.

La pregunta principal en la que me he centrado para poder resolver esta falta de organización ha sido: ¿Para qué entra el usuario a la web del ayuntamiento? Analizando y preguntando a varias personas, las respuestas son las siguientes:

  • Consulta de actos públicos: calendario con eventos, fiestas patronales…
  • Consulta de edificios y espacio públicos: horario de parques, localización de bibibliotes, deportes en polideportivos…
  • Consulta y realización de trámites: padrón, matrimonio…
  • Empleo: bolsa municipal y oposiciones
  • Consulta y pago de multas
  • Permisos, normativa, subenciones para empresas
  • Consulta de leyes/normativa municipal
  • Equipo de gobierno: alcalde/alcaldesa, vicealcaldía, datos abiertos…
  • Datos sobre la ciudad: guía turística, guía gastronómica, patrimonio…
  • Portal de opinión y preguntas
  • Impuestos: IVI, IRPF…

Una vez conocemos los temas más frecuentes a la hora de entrar en este tipo de páginas hay que organizar dicha información. Para ello, comparando con otras webs similares se establecen 4 catogorías que englobarán la información:

  • Ayuntamiento
  • Ciudadanía
  • Empresas
  • La ciudad

Con esta información y estas categorías establecidas se empieza el proceso de IDEAR y nacen ideas como:

  1. Crear una página de inicio simple y visual previa a la que nos presenta el ayuntamiento.
  2. Crear una página de inicio previa donde aparezca un Chatbot para buscar directamente la información a la que quiero acceder.
  3. Ordenar todos los puntos de la web en 3/4 categorías.

A partir de aquí, se han creado 3 wireframes (medium fidelity) que representan las posibles pantallas de inicio del ayuntamiento, y como se cita en la idea 1, serían pantallas previas a lo que hoy en día se nos presenta como https://www.madrid.es/portal/site/munimadrid

Inicio sencillo

Opción 1. Esta propuesta es la más simple de todas. Se presentan las categorías de “Ayuntamiento, Ciudadanía, Empresas y La ciudad” sin explicación. Aparece además un botón con la opción de acceder a la web https://www.madrid.es/portal/site/munimadrid sin filtrar ningún tipo de infomación y el Chatbot.

Inicio sencillo: pequeña explicación

Opción 2. A la pantalla anterior se le suma información adicional. Se pretende informar al usuario a qué tipo de contenido será redirigido si pulsa los botones de “Ayuntamiento, Ciudadanía, Empresas y La ciudad”. Vuelve a aparecer el botón con la opción de acceder a la web https://www.madrid.es/portal/site/munimadrid directamente y el Chatbot.

Inicio más específico

Opción 3. La división en las 4 catogorías permanece, al igual que el botón de acceso directo y el chatbot. Ahora bien, esta opción pretende ser más específica ya que tiene en cuenta los temas por los cuales los usuarios acceden a este tipo de webs, como he mencionado antes. Se filtra más la información, y si el motivo por el que se entra en la web está en estas etiquetas, el usuario será redirigido directamente a ese punto; si no aparece pulsaría a “Más…” apareciendo un menú desplegable con las opciones no tan comunes.

Estos prototipos han hecho que empatice. Saber por qué las personas entran a estas webs o qué les gustaría encontrar sin necesidad de dar muchos pasos es lo más importante para llevar a cabo este proceso de diseño. Al tratarse de un prototipado rápido “low/medium fidelity” se dan 3 posibles soluciones que deberían ser testeadas para saber qué funciona y que no.

Me encanta todo el proceso de pensar, investigar, preguntar… pero sobretodo diseñar para mejorar la experiencia del usuario.

--

--

Gracia E.
Gracia E.

Written by Gracia E.

Diseñadora UX/UI | Arquitecta

No responses yet