Carmen Carro UX/UI Designer

Resumen

¿A qué nos enfrentamos?

El problema

Este sitio abarca diversos temas sobre la creación de productos digitales. Su finalidad es brindar las herramientas necesarias para crear sistemas, sitios y aplicaciones de gran calidad para el Instituto Nacional Electoral (INE).

Sin embargo, este proyecto es tan grande y diverso que los usuarios no encontraban la información necesaria para sus proyectos.

La solución

Rediseñé la arquitectura de información del sitio: mejoré el etiquetado, reorganicé la información a nivel mapa de sitio y disposición de elementos en la pantalla, además del rediseño de la página de inicio. Creamos un buscador, un centro de ayuda y un repositorio de recursos. También hicimos un rediseño de la versión mobile, añadimos nuevos contenidos y la hicimos más accesible.

Proceso

1. Empatizar

El problema, el usuario y el contexto

Contexto

Este proyecto es una iniciativa para estandarizar los procesos de investigación, diseño y desarrollo de productos digitales dentro del Instituto Nacional Electoral. Es un sitio web de uso interno, por lo tanto, los usuarios del sitio son profesionales del diseño y desarrollo digital trabajadores del Instituto.

El proyecto se desarrolló durante 2019. Sin embargo, no se había probado con usuarios, por lo que no se tenía un panorama de la usabilidad del sitio.

Como primer paso en la investigación se realizaron pruebas de usabilidad para las versiones mobile y desktop de la plataforma.

Diferentes usuarios del proyecto — Ecosystem map

Versión del proyecto 2019 — Versión anterior del proyecto (2019) | Páginas interiores

Pruebas de usabilidad | Versión Mobile

Demografía

Se reclutaron a seis diseñadores y desarrolladores de productos digitales, trabajadores del Instituto.

Procedimiento

Se pidió a los usuarios realizar las siguientes tareas:

Encontrar información sobre investigación de usuarios.
Encontrar el código para implementar un componente web.
Descargar la tipografía del Instituto.

Se evaluó la dificultad para realizar la tarea, el tiempo que tardaron para realizarla y el porcentaje de éxito o fracaso al completarla.

Hallazgos

Los usuarios no interactuaban con los menús de navegación.
No entendían el etiquetado en los menús.
La interfaz les parecía inconclusa ("parece wireframe")
No entendían la metáfora visual en el botón de navegación local.
El color gris en los enlaces, les daba a entender que estaban deshabilitados.

Datos de los participantes — Demografía de la prueba de usabilidad | Mobile

Resultado prueba de usuario — Resultados prueba de usabilidad | Mobile

Pruebas de usabilidad | Versión Desktop

Demografía

Para este ejercicio se reclutaron a seis compañeros de nuevo ingreso que se encargarían del diseño y desarrollo de productos relacionados con las elecciones del 2021.

Procedimiento

Se pidió a los usuarios realizar las siguientes tareas:

Buscar información para empezar un proyecto de su área.
Identificar los recursos que podría incorporar en su proyecto.
Encontrar un recurso del sitio específico de su área de expertise.

Se evaluó el tiempo de realización de la tarea y el porcentaje de éxito.

Adicionalmente, se pidió a los participantes que calificaran su nivel de satisfacción al utilizar el sitio.

Hallazgos

Los usuarios pensaron que podían hacer clic en las imágenes de la página de inicio.
Encontraron confusas las etiquetas del menú de navegación local.
Tardaron en familiarizarse con el sitio.
Les faltaba contexto para el uso, a primera vista no sabían de qué trataba el sitio.
A pesar de los resultados, en general evaluaron bien al sitio.

2. Definir

Investigación y análisis de la información

User personas

A partir de las pruebas de usabilidad desarrollamos perfiles de usuarios que usarían el sitio y además podrían necesitar ayuda:

Esquema Paulo — User persona. Paulo, diseñador de interfaz de usuario.

Esquema Silvia — User persona. Silvia, diseñadora de experiencia de usuario.

Esquema Omar — User persona. Omar, desarrollador de aplicaciones móviles.

¿Qué problemas enfrentan?

Necesidades:

Conocer el marco de trabajo y metodologías utilizadas en el INE.
Documentar sus proyectos y socializarlos.
Encontrar y utilizar los recursos que ya existen para proyectos similares al suyo.
Resolver dudas sobre el uso de la identidad gráfica del INE.

Frustraciones:

No todos los equipos cuentan con diseñadores de experiencia de usuario o de interfaz.
No entienden cómo utilizar el sitio.
Algunos son personal de nuevo ingreso.
Aunque son profesionales del tema, desconocen cómo aplicar sus conocimientos a los productos del INE.
No son expertos en Office.

Motivaciones:

Adaptarse rápidamente a su nuevo trabajo.
Facilitar los procesos de su trabajo diario.
Encontrar recursos para sus proyectos.
Crear productos de gran calidad y centrados en el usuario.

3. Estrategia de diseño

Proponiendo soluciones

A partir del análisis de los resultados de las pruebas se definió que el propósito del sitio: brindar información, no se cumplía.Entonces, la pregunta sería ¿Cómo podríamos facilitarle a los usuarios encontrar y aplicar los recursos disponibles en el sitio?