UX/UI y diseñador de productos
Sistemas de Información
Definición del problema
La Universidad Industrial de Santander es una de las universidades más reconocidas en programas académicos en el sector industrial, de la salud, político, social y científico del oriente colombiano.
El proyecto de sistemas de información implica el rediseño e integración de diversos sistemas informáticos, incluido el de nómina de la Universidad Industrial de Santander. Este enfoque está centrado en la experiencia del usuario, con el objetivo de mejorar la visibilidad del sistema para permitir una ejecución óptima de las tareas y reducir la curva de aprendizaje.
Mi papel
Mi rol como diseñador UX/UI, consistió en Analizar el flujo de las actividades que se realizan a través de la plataforma actual, investigar a los usuarios, sus necesidades, sus patrones, y preferencias de uso con respecto a la plataforma actual.
Conocer e identificar los elementos mínimos necesarios para realizar las tareas de nómina, crear wireframes y diseño UI, junto con pruebas de usabilidad con los usuarios.
Todo llevado de la mano de un excelente equipo de trabajo.
Participantes
-
ingenieros de sistemas
-
diseñadores industriales
-
Contadores
-
Usuarios del sistema de nómina
Empresas e instituciones
Interfaz de usuario
Interfaz - Buscar
Durante este proyecto, uno de los desafíos para mejorar fue la navegación del sistema debido a las siguientes dificultades:
-
Visibilidad limitada
-
Menú en forma de cascada con varios niveles de profundidad, alcanzando hasta 7 niveles o más
-
La incapacidad del sistema para cambiar roles sin salir de la interfaz
-
Falta de comprensión del recorrido del usuario dentro del sistema
Para abordar estos problemas, implementamos las siguientes soluciones:
-
Desarrollamos un sistema que permite cambiar de roles en cualquier momento durante la navegación
-
Introdujimos una sección que muestra el historial del usuario
-
Implementamos la navegación de migas de pan
-
Incorporamos un menú de navegación lateral para un acceso más fácil a los proyectos
-
Integramos un sistema de búsqueda transversal.
Access to history, favorites and extensions
change and role manager
Side navigation with tooltip
Dash board
Para definir el contenido del panel de control, se consideraron dos aspectos principales:
-
Personalización del panel según el tipo de usuario y sus actividades frecuentes.
-
Área de trabajo del usuario.
Realizamos una inspección para entender cómo los usuarios utilizan el calendario para registrar fechas clave y distribuir documentos relacionados con el proceso de nómina. Identificamos tres categorías de documentos: nuevos, en proceso y pendientes.
Con esta información, definimos los siguientes componentes:
-
Solicitudes pendientes: Visualización de documentos físicos que muestra las actividades diarias del usuario.
-
Progreso de nómina por mes: Representación visual del mes de nómina en forma de línea de tiempo para que el usuario pueda ver su avance.
-
Calendario: Muestra las actividades diarias del usuario y se sincroniza con el correo electrónico de la empresa.
-
Accesos rápidos: Acceso directo a las actividades más recientes del usuario.
Estas mejoras se diseñaron pensando en el usuario para ofrecer una experiencia eficiente.
Design elements
In this project, we used the Material Design Builder to create a coherent and attractive color palette. We also implemented a careful selection of the typography library to enhance readability and design aesthetics. These elements were combined to create a visually pleasing and functional experience for end users.
Análisis del sistema actual
Como primer acercamiento, se realizó un análisis de inspección del sistema actual.
En esta etapa se observaron los procedimientos y flujo de tareas que realiza el usuario para el ingreso de una novedad de nómina, de acuerdo a esta información se identificaron las necesidades y requerimientos del usuario.
Análisis de usuario
Se realizó un análisis de los usuarios del sistema de nómina bajo la herramienta “persona”, donde se identificaron 4 roles diferentes, sin embargo, el proyecto se enfocó en “Carolina, usuario tipo 1”, personal autorizado para el ingreso de solicitudes de novedades de nómina. Esta persona puede pertenecer a otros departamentos de la universidad distintos al departamento de contabilidad.
Arquitectura de la información
Durante el rediseño de la plataforma, utilizamos la técnica Cardsorting para organizar las etiquetas según las preferencias de los usuarios. Esto nos permitió crear una navegación intuitiva y adaptada a sus necesidades específicas. Como resultado, desarrollamos una estructura centrada en proyectos que abarcan diversos sistemas y procesos. Además, implementamos un submenú con dos niveles de profundidad para mejorar el acceso y la ubicación de las actividades según el rol del usuario.
Prototipado e iteración
En este proyecto, se desarrollaron prototipos que abarcaban desde bocetos en papel hasta wireframes de baja, media o alta fidelidad, según las necesidades de cada sprint. Cada uno de estos prototipos se compartía con el equipo correspondiente y se evaluaba con los usuarios, ajustándolos según los resultados de las pruebas. El objetivo era crear un producto de alta calidad que satisficiera las necesidades de los usuarios.
Pruebas de wireframes de baja fidelidad
Las imágenes ejemplifican un proceso iterativo con los usuarios. Se elaboraron historias para registrar novedades de nómina, proporcionadas a los participantes junto con los documentos requeridos y notas adhesivas para comentarios. Durante la prueba, se exhibió en la pared el flujo de pantallas interconectadas. Tras cada iteración, se tomaron notas y se realizaron correcciones según lo necesario.
Prueba de usabilidad
Se realizó una evaluación con prototipos digitales e interactivos con líderes de usuarios, evaluando la eficiencia, eficacia y satisfacción de la interfaz propuesta para el sistema de nómina. Se utilizaron estudios de casos de actualizaciones específicas de nómina. La prueba se llevó a cabo en una sala con observación remota del usuario desde otra habitación. Se grabaron tanto la pantalla del ordenador durante la prueba como la reacción gestual del usuario mediante una cámara externa.
Este enfoque permitió identificar momentos de frustración durante la actividad. Por motivos de privacidad, no se muestran imágenes de los participantes.
Rendimiento de la prueba
Descripción de las actividades
La actividad consiste en el ingreso de una actualización de nómina correspondiente a cada prototipo digital según cada rol.
Role:
-
carolina b,oficial de nómina que ingresará actualizaciones de nómina de: (horas extras, incapacidades, licencias de maternidad, licencias de paternidad, licencias no pagadas y aduanas).
-
Juan Carlos, un usuario de autoservicio, solicita lo nuevo (licencia médica, calamidad doméstica, año sabático y licencia por duelo).
Desarrollo de la actividad
A cada participante se le entregará lo siguiente: formularios de caso, tarea y evaluación.
1. Contextualización del proyecto general y actividades a realizar por los evaluadores 5 min.
2. Colocación de las gafas Begaze en el participante y su respectiva calibración: 5 min.
3. El usuario debe leer atentamente el formato de la tarea a realizar y ejecutarla utilizando el prototipo, 10 tareas: 45 min.
4. Una vez realizadas todas las tareas, el usuario deberá rellenar el formulario de evaluación. 5 minutos
Métricas de usabilidad
Eficiencia:
-
Tiempo para completar una tarea (TCT)
-
Tiempo productivo (PT)
Eficacia:
-
Porcentaje de tareas completadas en el primer intento (TCPI).
-
Tiempo utilizado para completar una tarea por primera vez.
-
Número de errores: los siguientes elementos se consideran errores
-
Usuario incorrecto
-
Contraseña incorrecta
-
Entrada incorrecta
-
número ingresado excede el máximo
-
entrada de números en el cuadro de texto
-
entrada de texto en el cuadro numérico
Satisfacción:(formato de evaluación)
-
Nivel de dificultad
-
Me gustó o no me gustó
-
preferencia
Conclusiones
De los objetivos
-
Este trabajo se realizó en constante retroalimentación con usuarios y desarrolladores, lo que permitió obtener excelentes resultados en cuanto a la información a proporcionar.
-
Se evidenció una optimización en la visibilidad de la interfaz, lo que también trajo consigo un aumento en la satisfacción de los usuarios, destacando los elementos de retroalimentación.
-
Se evidenció una disminución en la curva de aprendizaje ya que la interfaz utilizaba un lenguaje intuitivo.
-
Hubo un caso específicos en el ingreso de novedades de nomina en donde se observó que la velocidad media con la que ejecutaban la acción disminuyó en un 20%, esto se debe a que se propuso un flujo de la tarea diferente al ya establecido por el sistema actual, lo que generó que se detuvieran a analizar el orden de las entradas de información, sin embargo, la satisfacción aumento con respecto a esta actividad.