Se lee en 5 minutos

El reto

El objetivo principal de este proyecto es ofrecer una nueva forma de navegar o acceder a cualquier aplicación web dentro de un entorno seguro y controlado. A este entorno seguro se puede acceder desde cualquier dispositivo con capacidad de conexión e independientemente del sistema operativo utilizado. Esta tecnología rompe con los sistemas de seguridad basados en la búsqueda y detección de amenazas, aislando cada sesión.

En cuanto a la Interfaz de Usuario, uno de los principales objetivos era hacer que la curva de aprendizaje fuera suave manteniendo un diseño claro y efectivo.  Puedes  probar una demo.

* Para la demo, usa los botones ‘prev’ y ‘next’. Los botones como ‘Login’ o ‘Aplicar configuración’ van directamente a la siguiente pantalla (no se requiere login). Para cambiar el tema al modo claro/oscuro, usa el icono ‘sol/luna’ en la parte superior de cualquier pantalla en cualquier momento. Para ver la demo de nuevo desde el principio, usa este enlace.  

Mi Rol

Dirijí el Diseño UX y contribuí en varias áreas como la ideación, objetivos de negocio (KPIs), benchmarking, investigación, diseño de user journey y user experience map, desarrollo de wireframes, wireflows, arquitectura de información, escritura UX, prototipos, diseño final, diseño de respuesta (HTML, CSS/Sass, Bootstrap, etc.), guías de estilo, UI Kit, tests de guerrilla y pruebas de usuario.

Resultados

El manejo y la configuración de este software, a pesar de su complejidad intrínseca, mejoró significativamente su facilidad de uso y su coherencia en toda la herramienta. Desarrollé una nueva guía de estilo, partiendo del manual de identidad básico que la compañía ya tenía. Mi nueva guía de estilo, junto con el UI Kit que desarrollé, sirvió como base para crear esta y otras herramientas. Todos los nuevos diseños basados en datos marcaron la línea a seguir en términos de identidad visual y de marca.

El proceso

Todo este proyecto fue creado bajo la metodología Agile. A continuación se presentan una serie de materiales para comprender mejor el proceso de desarrollo que llevé a cabo con un equipo de unas 15 personas, desde el frontend, pasando por el backend, hasta el control de calidad o el marketing.

01. Instalador de software y panel de administración

Después de varios tests y encuestas a los usuarios, obtuvimos importantes insights que nos llevaron a tomar algunas decisiones importantes. Las encuestas y tests revelaron que, en más del 80% de los casos, los administradores permanecerían frente a este software al menos durante 3 horas al día, por lo que decidimos añadir el tema de la luz y la oscuridad al proyecto para adaptarlo a las preferencias personales de cada usuario. El contraste de colores debía ser adecuado en ambos temas. Todas las pantallas son lo más simple y comprensible posible, incluso aquellas que contienen una gran cantidad de información. También se añadieron tooltips para mejorar la comprensión de algunos de los ajustes que el usuario probaba que eran más complejos.

02. Wireframes lo-fi (Instalador de software y Dashboard de administración)

Los wireframes sirven como un ejemplo perfecto del refinamiento de la interfaz del usuario después de varias iteraciones.

03. Wireframes mid-fi (Instalador de software y Dashboard de administración)

Algunas de las primeras directrices de diseño que generé para facilitar al cliente y stakeholders la comprensión de las pantallas y su proceso evolutivo.

04. User Dashboard (hi-fi)

Este es el dashboard del lado del usuario final. Es la interfaz de control que se proporciona al cliente final para gestionar la red interna o local. El look & feel ya está bastante cerca del diseño final. Se muestra buena parte de las pantallas que componen la sección encargada de configurar el software de seguridad.

05. Iconografía

Algunos iconos que desarrollé para diferentes partes de este software de seguridad.

06. Otros Elementos UI

Muestra de algunas de las ventanas modales y elementos de interfaz de usuario que produje para este proyecto.

07. Tests con usuarios

A continuación puede leer una lista de comentarios de los usuarios, sin ningún orden en particular. Trabajé estrechamente con el equipo de control de calidad para asegurar la calidad de todo el producto.

  • Restaurar la ventana de conexión – dar más información y no sólo mostrar sus intentos.
  • Los certificados no funcionan en Android.
  • Desplazamiento suave (mejora la inercia).
  • Pérdida obvia de calidad al 90% en las imágenes. Especialmente en (Android).
  • Fallo en la relación de pixeles (iOS).
  • El teclado numérico o alfanumérico no sale cuando debería en algunos casos.
  • El teclado cubre los campos en los que escribirás, al menos en el primer intento.
  • Lentitud de teclado en iOS.
  • Las teclas no siempre funcionan.
  • Mensaje de incompatibilidad fuera de contexto.
  • Error al descargar el PDF.
  • El iPhone no abre el archivo de Excel.
  • No se conecta al Apple Store a través de un enlace.
  • De vez en cuando, sale de la navegación hacia Google.
  • La reproducción de video no funciona.
  • El sonido es entrecortado y de baja calidad.
  • El vídeo falla repetidamente después de aproximadamente 3 segundos de reproducción.
  • Tipografía poco clara en algunos títulos e iconos.
  • Usando el botón ‘atrás’, hace que el sistema a veces se caiga.
  • A veces no abre una nueva pestaña.
  • El zoom con doble toque y arrastrar y soltar no funciona (aunque no todas las aplicaciones lo permiten).
  • El menú contextual parpadea a veces.
  • Cuando se recarga la pestaña con el PDF cargado, falla.
  • Mensajes de ayuda. Poco claros o descriptivos en algunos casos.
  • Revisa la redacción de los mensajes de ayuda (unifícalos).
  • Después de terminar el asistente, agregar un mensaje (sólo la primera vez) de “Configuración correcta”.
  • Marque más el estado “CONFIGURADO” en la pantalla después de la instalación.

08. Alternative wireframes alternativos

Finalmente, se muestra otra versión alternativa de wireframes que hice durante este proyecto.

Suscríbete a tonalidad.es