Rediseño UX/UI de dos aplicaciones móviles para el sector educativo

Optimizando la usabilidad y actualizando la estética de dos aplicaciones móviles ya existentes.

En el dinámico entorno del sector educativo, la demanda de una comunicación eficaz ha evolucionado hacia el ámbito puramente digital. La interacción entre el profesorado, la institución educativa y las familias es esencial en la rutina diaria. Por esta razón, lasiteraciones en los productos digitales son constantes; siempre estamos explorando nuevas formas de perfeccionar estas herramientas y adaptarlas a las cambiantes necesidades de los usuarios y sus diferentescontextos de uso.

PROBLEMA

En la actualidad, nuestro cliente dispone de dos aplicaciones móviles, empleadas tantoen dispositivos Android como en iOS. La primera de las aplicaciones  está destinada al uso por parte de las familias de los estudiantes, mientras que la segunda está destinada al uso por parte de los profesores. A pesar de que ambas aplicaciones desempeñan sus funciones de manera adecuada y cuentan con una sólida arquitectura de información, el cliente identificó una oportunidad de mejora significativa en el ámbito visual, que impactaba en la percepción de usabilidad del producto digital

El diseño de ambas aplicaciones no destacaba por su atractivo visual, y es precisamente en este aspecto donde nuestro cliente busca realizar mejoras sustanciales. Reconociendo la importancia de una interfaz visualmente atractiva, nos embarcamos en un proceso de actualización que tuviera en cuenta la capa de presentación, mejorando al mismo tiempo la usabilidad del producto digital en algunos procesos críticos, tanto para el profesorado como para las familias.

RETO

Por tanto, el reto que nos planteó el cliente era tan ambicioso como motivante: ¿Cómo podríamos mejorar la usabilidad y la estética de estas aplicaciones manteniendo su funcionalidad?

OBJETIVO

Elevar la experiencia del usuario a nuevos niveles de estética y usabilidad para transformar la apariencia de estos productos digitales, mejorando también puntos de fricción de determinados procesos, puntos de dolor que provocaban que el producto no resultara sencillo de utilizar en algunos contextos. 

Hacer que la aplicación no solo cumpla eficientemente con sus funciones tal y como ya hacía, sino  también optimizar determinados aspectos sin perder de vista que generase un impacto visual cautivador en nuestros usuarios. Y todo ello, sin generar un impacto negativo en dichos usuarios finales, puesto que ya estaban acostumbrados a utilizar los procesos disponibles en el producto con gran frecuencia.

Las sesiones estuvieron diseñadas para fomentar el intercambio de experiencias y reflexiones sobre el desarrollo y resultados del proyecto.

METODOLOGÍA

Etapa 0: Investigación

Siguiendo la metodología que trabajamos en Thinkers, iniciamos el proyecto con una reunión de Kick Off con el cliente,  a través de la metodología de Design Thinking, para hacer un análisis previo de la situación y de las necesidades que han dado lugar a esta sesión. Esquema de la metodología de doble diamante que seguimos en Thinkers Esquema de la metodología de doble diamante que seguimos en Thinkers

Con esta sesión conseguimos concretar algunos aspectos básicos de cara a orientar el trabajo de diseño, de cara a clarificar y documentar una visión clara de las expectativas del cliente y el resultado a alcanzar con el nuevo diseño:

  1. Los objetivos de negocio y producto
  2. Comprender con mayor precisión el alcance deseado en la solución final, a partir de los datos recogidos por el cliente en el uso de las soluciones previas 
  3. Las limitaciones del proyecto (técnicas, de tiempo, operativas.

Durante esta sesión, trabajamos en convertir un idea de proyecto más general (mejorar la usabilidad y la interfaz de usuario de un producto existente) en un desafío de diseño: transformar la experiencia de uso del producto mejorando el aterrizaje de nuevos usuarios y la gestión de algunos procesos críticos.

Una vez establecida esta alineación con el negocio, dentro de la investigación nos sumergimos en el estudio detallado de las aplicaciones actuales. En primer lugar, realizamos un análisis de la arquitectura de información y el funcionamiento de cada funcionalidad en las aplicaciones tanto la utilizada para las familias como la de los profesores. Identificamos las diferencias clave entre ambas para garantizar una comprensión completa de todos los elementos existentes que tenían impacto sobre el diseño de la experiencia de usuario..

En segundo lugar, abordamos  un análisis de la competencia (Benchmarking) de algunos competidores identificados por nuestro cliente, evaluando sus diferentes estrategias y recogiendo inspiración y ejemplos sobre buenas prácticas de productos digitales en el sector. Este ejercicio nos brindó una valiosa perspectiva sobre las prácticas que potencialmente podíamos incorporar a la nueva solución  y nos sirvió de fuente de inspiración para el diseño renovado, por supuesto, sabiendo que se trata únicamente de un punto de referencia del mercado pero las necesidades, expectativas y motivaciones de nuestros usuarios son únicas y como tales deben ser tratadas.

Captura de pantalla de algunas soluciones de la competencia analizadas durante la etapa de investigación. Captura de pantalla de algunas soluciones de la competencia analizadas durante la etapa de investigación.

Estas soluciones e ideas de mercado analizadas fueron debatidas y priorizadas con el cliente, para garantizar qué propuestas podían tener cabida en el nuevo rediseño en función del impacto para el usuario y la complejidad de implementación, y qué prioridades le asignábamos en el roadmap existente de producto.

Etapa 1: Primeros diseños UX

Después de la exhaustiva investigación, procedimos a empezar con el proceso de diseño iterativo propiamente dicho, rediseñando los primeros prototipos y presentando al cliente diversas propuestas de diseño para los elementos a mejorar en distintos procesos de la aplicación. Durante esta fase inicial de diseño, colaboramos estrechamente con el cliente, haciendo sesiones de feedback e incorporando sus comentarios y realizando los ajustes necesarios en un proceso ágil.

En esta etapa crucial, se establecieron características fundamentales que sentaron las bases del nuevo diseño visual:

  • Nueva paleta de colores para el rediseño: Se vinculó estrechamente con los logotipos de las aplicaciones y otros tonos ya empleados en la empresa.
  • Incorporación de nuevos elementos visuales: Se introdujeron formas orgánicas en curva, ya presentes en otras plataformas de la empresa.
  • Tipografía: Se optó por mantener las tipografías propias de los sistemas Android e IOS para facilitar la implementación.

Todas estas decisiones se tomaron con el objetivo de seguir uno de los principios clave del diseño: la coherencia visual. Este principio dicta que todas las aplicaciones digitales de una empresa deben mantener una apariencia y funcionalidad consistentes. La coherencia no solo facilita la navegación y mejora la usabilidad per sé, sino que también refuerza la identidad de la marca, acelera el proceso de desarrollo y genera mayor confianza entre los usuarios finales del producto. 

Es por ello que para nosotros fue fundamental lograr ese equilibrio de coherencia visual entre otros productos y las necesidades específicas identificadas para estas dos aplicaciones. 

Etapa 2: Iteración del diseño y soporte inicial del equipo de desarrollo. 

Cuando la idea del rediseño UX/UI estaba ya enfocada, empezamos a involucrar al equipo de desarrollo del cliente. No solo queríamos conocer su opinión sobre la implementación, también entender las limitaciones técnicas y de recursos desde su punto de vista, así como  reconocer características críticas a considerar antes del traspaso del diseño a los equipos técnicos.

Después de estas sesiones con el equipo , iteramos algunos aspectos que resultaron necesarios y llevamos a cabo varias pruebas, incluyendo también una versión específica para tablet, permitiendo asegurarnos cómo se iba a ver el diseño en diferentes formatos antes de su desarrollo final.  

Ejemplo de diferentes pantallas con un formato de tablet Ejemplo de diferentes pantallas con un formato de tablet.

Con el diseño responsive completado y las iteraciones implementadas, presentamos el diseño final al equipo. 

Esta colaboración y enfoque iterativo no solo mejora la calidad del diseño, sino que también aseguró la alineación con las capacidades y consideraciones del equipo técnico, garantizando así un traspaso más adecuado y una implementación más exitosa

Etapa 3: Diseño final UI

La distinción principal entre las aplicaciones destinadas a profesores y familias radica en ciertas funcionalidades representadas mediante tarjetas y variaciones en la paleta de colores. A continuación, detallamos los cambios más notables implementados en ambas aplicaciones, con una comparativa entre el diseño anterior y el rediseño ejecutado.

Comparativa del antes y después de rediseñar la pantalla principal de la aplicación de familias. Comparativa del antes y después de rediseñar la pantalla principal de la aplicación de familias.

En primer lugar, resaltamos la reorganización de elementos en el menú superior. Por ejemplo, se colocó el botón de salir en la esquina superior derecha, siguiendo un estándar familiar adecuado al modelo mental de los usuarios acostumbrados a otras aplicaciones.

En relación al encabezado (header), se destaca la reestructuración de elementos. Se mejoró la usabilidad al sustituir el desplegable poco intuitivo para seleccionar a otro alumno por uno más común en otras plataformas (de nuevo, adecuación a los modelos mentales de los usuarios para reducir carga cognitiva), con esquinas redondeadas que transmiten amigabilidad, resaltando la naturaleza escolar de la aplicación.

Tanto en el encabezado como en el pie de página, se incorporaron elementos gráficos curvos, aportando dinamismo a la aplicación y manteniendo la coherencia visual con implementaciones previas de la empresa.

En las tarjetas (cards) de las distintas funcionalidades, se optó por dividir el icono y el título/subtítulos, buscando mejorar la usabilidad y facilitar la lectura del texto. En cuanto al estilo de los iconos, se adoptó un enfoque minimalista coherente con otros iconos de la empresa, y las formas orgánicas detrás de ellos enfatizaron el dinamismo y permitieron que el diseño fuera consistente, independientemente de que funcionalidades contratará cada colegio. 

Se implementó un diseño similar en cada funcionalidad, manteniendo la coherencia visual con la pantalla de inicio y garantizando la uniformidad visual de todos los elementos, lo que impacta de forma directa en la usabilidad del producto.

Comparativa del antes y después de rediseñar una de las pantallas detalle de la aplicación de familias. Comparativa del antes y después de rediseñar una de las pantallas detalle de la aplicación de familias.

Etapa 4: Implementación

Con la fase de diseño completada, llegamos a la etapa final: la implementación. En esta fase, proporcionamos al equipo de desarrollo del cliente toda la documentación necesaria, incluyendo los diversos componentes creados durante el rediseño.

A lo largo de todo el proceso, mantuvimos una comunicación directa con ellos, abordando cualquier duda que surgiera y, finalmente, supervisando la implementación para garantizar la fidelidad al prototipo.

Aprovechando la ejecución del nuevo diseño por parte de los desarrolladores, se llevó a cabo también una revisión minuciosa de aseguramiento de la calidad del diseño para corregir pequeños errores en la aplicación, como distancias y colores. Estos ajustes precisos, por pequeños que puedan parecer, son los que realmente marcan la diferencia en la experiencia del usuario.

CONCLUSIONES

En resumen, el proyecto de rediseño UX/UI de las aplicaciones móviles del cliente ha culminado con éxito, mejorando tanto la estética como la usabilidad

A través de un proceso dirigido por una investigación desde la perspectiva de negocio y de mercado, un diseño iterativo centrado en buscar aproximaciones sucesivas a la solución y la retroalimentación constante con negocio y equipo de desarrollo, logramos mantener y mejorar la funcionalidad esencial. La coherencia visual ha fortalecido la identidad de marca, creando una experiencia más armoniosa y atractiva para los usuarios en sus diferentes contextos. 

Desde Thinkers estamos emocionados por el impacto positivo que esta transformación traerá en nuestro cliente. Si tu también quieres realizar un rediseño en alguna de tus plataformas digitales, ¡contacta con nosotros! 

Otros Blogs