Caso de estudio
Portal institucional para solicitud de servicios – DODF UN
Diseño de producto · Portal web · UI · Implementación
Contexto
La Dirección de Ordenamiento y Desarrollo Físico de la Universidad Nacional de Colombia se encarga de adelantar acciones para recuperar y conservar la infraestructura física de la sede Bogotá de esta institución.
Las demás oficinas y facultades de la Universidad se dirigen a ella para solicitar mobiliario, intervenciones y mantenimiento físico, pero lo hacían telefónicamente.
Antecedentes
La entidad ya contaba con un sitio web tipo brochure, con información incompleta y múltiples errores, basado en una propuesta estática definida en un manual de imagen, carente de sustento estratégico o funcional.
En la realidad este sitio no se usó nunca y no presentaba la información básica que requieren quienes se acercan a la entidad.
El problema
La entidad no contaba con un medio efectivo que simplificara los procesos básicos de información y trámites de solicitud de los servicios ofrecidos.
Objetivos
1
Contar con un portal web para divulgar información acerca de la DODF y los servicios que ofrece.
2
Poner a disposición de todas las facultades de un lugar para consultar las guías para realizar trámites y solicitar servicios.
3
Exponer las obras realizadas por el DODF de forma dinámica y organizada.
* El proyecto debía estar desarrollado sobre un CMS autorizado con el que la oficina pudiera actualizar sus contenidos autónomamente, por lo cual se acordó usar Joomla.
Mi rol
El usuario
Puntos de dolor
1
Los usuarios no tenían acceso a las guías e información de mobiliario disponible.
2
El proceso de solicitud de recursos a la DODF era muy lento, complejo y arcaico.
3
El sitio web que tenían estaba incompleto y sólo contenía información básica y desactualizada.
Investigación
User persona
El perfil del usuario era muy puntual y las tareas a realizar muy específicas, principalmente profesores y directores de carrera que necesitaban solicitar una reparación o mobiliario.
&
Proceso de diseño
Arquitectura -Sitemap
El cliente tenía definido un esquema de navegación básico que sirvió de base para armar la arquitectura del sitio y los flujos que debía seguir el usuario.
Wireframes
Inicié el proceso de diseño definiendo wireframes para las pantallas principales, teniendo en cuenta que debía usar obligatoriamente el header y el footer institucionales como marco del sitio web.
Prototipo en alta
Una vez establecidos los elementos que debían tener las interfaces principales definí los parámetros de diseño y los implementé en la primera versión del prototipo, definiendo un incipiente sistema de diseño: tipografía, colores y jerarquías. Siguiendo las políticas de imagen corporativa utilicé la fuente institucional.
Retroalimentación e iteración
A continuación presenté la propuesta de diseño a un grupo de 10 personas de la entidad con diversos roles e involucrados en distintas etapas de los procesos realizados por la entidad.
A partir de la retroalimentación recibida realicé ajustes a la estructura de la página de inicio y presenté 3 propuestas alternativas de color, solicitadas por el equipo.
Prototipos digitales mejorados
En conjunto con el cliente decidimos conservar la propuesta inicial de color y realizar unos ajustes adicionales a la diagramación, simplificando la página de inicio.
Producto final publicado:
https://www.ordenamiento.bogota.unal.edu.co
Conclusiones
Impacto
Aprendizajes
- Tener la información y los flujos de usuarios definidos desde el principio del proyecto, validados por distintas instancias y responsables permitió la ejecución eficiente del proyecto.
- La retroalimentación de distintos perfiles de usuarios reales involucrados en el proceso, y no usuarios ficticios o sólo con perfiles similares permite la validación efectiva del diseño.
- En ocasiones ideas iniciales se convierten en las definitivas, después de un proceso de iteración que al final fortalece dicha idea.
