Caso UX / UI SDP - Secretaría Distrital de Planeación

Portal Institucional / gov

El análisis de usabilidad se realizó para el Portal de la Secretaría Distrital de Planeación a mediados del 2013.

La URL era http://www.sdp.gov.co/portal/page/portal/PortalSDP/

 

Fallas de UI en la Página de inicio y de Categorías principales

A. Menú de navegación auxiliar y explicación de uso del menú principal en animación .SWF

B. Falta de guía de estilo para uso de tipografía y color en títulos, textos, enlaces.

C. Sidebar con navegación contextual en color gris.

D. Utilización de Tabs para organizar archivos históricos sin títulos o textos de explicación

E. Menú de acceso a las aplicaciones de la entidad en color gris

F. Títulos de archivos largos y no estandarizados. Formatos de archivos no estandarizados.

G.Sección de contacto y datos institucionales como imagen, ningún dato es texto.

Falta de uniformidad en iconos de sistema.

Falta de guía de estilo para uso de tipografía y color en títulos, textos, enlaces.

Tecnología desactualizada

La tecnología empleada para desarrollar, editar y consultar el Portal Institucional ya había cumplido su ciclo de vida útil y se enfrentaba a los avances de los navegadores, diseño web y estándares de usabilidad y accesiblidad.

La solución debió surgir de un trabajo integrado de las diferenes Direcciones de la entidad.

En algún momento este proyecto estuvo relacionado con la implementación de mejores prácticas de diseño y desarrollo web en las entidades oficiales de Bogotá.

Análisis de uso del sistema

Con la ayuda de imágenes de mapas de calor, datos estadísticos de Google Analytics, información de Servicio de Atención al Ciudadano, Tickets de Soporte de Sistemas, sugerencias de contenidos de la Oficina de Prensa y Comunicaciones, se establecieron los parámetros de navegación, consulta y uso del contenido del Portal.

 

Customer journey

Durante el inicio del proyecto se describieron las interacciones del ciudadano con la plataforma y los servicios de la entidad.
 
Se detectaron las emociones, expectativas y oportunidades de mejora en cada punto de contacto.

User flow

Después de realizar una jeraquización de las acciones que realizaba el ciudadano en el Portal, se definió una lista de 5 problemas de interés estratégico para la Entidad y que se deberían resolver en el corto y mediano plazo.

El recorrido de los usuarios externos a la entidad en el Portal era extenso, confuso y llevaba a contenidos que no mostraban la información de una forma clara.

Arquitectura de información y navegación

Como resultado al análisis de uso se planteó una nueva arquitectura de contenidos.

Se organizó la información en categorías o temas principales y se relacionaron las secciones dependientes.

Diseño de la página de inicio

Se realizaron wireframes de la página de inicio y de las páginas de categorías para mostrar los contenidos destacados y los sistemas de navegación.

Pruebas de diseño

Se realizaron pruebas usuario de sobre las alternativas de diseño.

Se realizaron capacitaciones a los autores y editores web para la generación de contenidos con un nuevo formato optimizado para SEO on page y facilidad de lectura.

Implementación de nueva interfaz

El contenido se adaptó a las restricciones de la plataforma y se configuró una nueva distribución de información destacada.

Se crearon categorías de contenido según los servicios más utilizados por la ciudadanía.

Se implementó un sistema de navegación con menú desplegable.

Se aplicó la Guía de estilo web del Distrito Capital.

Micrositio de Ecourbanismo

El portal se complementó con más de 8 micrositios destinados a informar sobre Políticas Públicas, Planes y Proyectos que debían tener información específica del registro del progreso con la descripción de la propuesta, los acuerdos con la comunidad y los archivos multimedia.

Micrositio Región Administrativa Central Especial

El portal fué el inicio de otros sitios web de entidades o proyectos que se crearon en la Administración Distrital.

Contenido interactivo

Diseñé y coordiné la realización de varios contenidos interactivos con el apoyo del equipo de la Oficina de Prensa y Comunicaciones.

Contenido infantil

Diseñé y coordiné la realización de la sección infantil con el apoyo del equipo de la Oficina de Prensa y Comunicaciones.

Boletín virtual SDP Comunica Express / intranet

Diseñé y publiqué 14 ediciones del boletín virtual con el apoyo del equipo de la Oficina de Prensa y Comunicaciones.

Diseño de interfaz para Govimentum

Participé con un equipo de voluntarios de diferentes entidades del Distrito en la propuesta gráfica de la primera versión de Govimentum.

Govimentum es la distribución de Drupal desarrollada por la Alta Consejería TIC de Bogotá, para todas las entidades oficiales del Distrito Capital.