Una historia de cómo rediseñé una aplicación de solución de salarios y beneficios basada en la nube.
Hace varios meses, mi empleador cambió nuestra solución de pago de salario a Bento, finalmente configuré una cuenta de Bento África y comencé a usarla en mi iPhone. Si no está familiarizado con Bento, aquí tiene una breve descripción de lo que es:
Bento Africa, anteriormente VerifiNG, es una empresa de soluciones empresariales cuyo producto estrella, Pay by Bento, es una solución de salarios y beneficios basada en la nube que ayuda a las empresas a hacer más con menos.
Bento Africa es un producto poderoso, especialmente con la creciente necesidad de anticipos de salario, inversiones, ahorros y resumen o intercambio de nóminas sobre la marcha, finalmente di el salto a Bento Africa.
Sin embargo, después de integrar la aplicación en mi flujo de trabajo diario, algunas funciones me parecieron muy complicadas de usar. Así que finalmente me saqué el deseo de rediseñar la aplicación.
El rediseño no fue solicitado, por lo que se basa estrictamente en mi experiencia con la plataforma iOS como usuario y diseñador. Como no tenía acceso a los datos de los usuarios ni a investigaciones sobre el diseño actual de Bento Africa, hice lo mejor que pude para pensar en cada detalle.
Dividí el rediseño en dos fases:
Análisis de diseño actual: una evaluación de las aplicaciones actuales Rediseño no solicitado: sugerencias para una mejor experiencia de usuario a través de una interfaz de usuario más intuitiva
Rediseñé la aplicación bento Africa en febrero de 2022. Es posible que Bento Africa haya actualizado la aplicación cuando estés leyendo esto.
El mayor problema que identifiqué fue la arquitectura de información de la aplicación. Una frustración destacada fue la confusión causada por la mala navegación y las funciones dispersas por toda la aplicación. Visualicé la arquitectura de información actual para ver qué estaba pasando:
Arquitectura de información actual de Bento África.
Puntos de dolor
Funciones ocultas y desorganizadas — Las mejores funciones de Bento Africa se encuentran repartidas por toda la aplicación. Por ejemplo, Ocultar monto del salario y Koye son funciones que se encuentran actualmente en el menú y la configuración., lo cual es poco intuitivo.Funciones superpuestas — Hay varias formas de activar funciones similares. Un ejemplo de esto es el compromiso de configuración en acciones rápidas y el compromiso de configuración en configuraciones que se encuentran en diferentes partes de la aplicación, Koye para ahorro e inversión en el menú y Ahorro e inversión en Bento Plus.Lenguaje confuso: el texto Se utiliza para describir algunas características y funcionalidades de la aplicación que no son claras ni familiares. Un ejemplo es “Koye” para guardar.
En esta parte, reorganicé la arquitectura de la información (IA) y rediseñé parte de la interfaz de usuario (UI). Abordemos algunos de los problemas:
Arquitectura de información revisada Mi principal objetivo al reorganizar la arquitectura de la información fue:
Aumente la visibilidad de las funciones clave de la aplicación para facilitar el acceso. Elimine algunas de las funciones duplicadas que pueden no ser tan útiles.
Aquí está mi versión de la IA revisada:
Arquitectura de información rediseñada de Bento Africa
Decidí esbozar algunas soluciones para estructurar diferentes ideas antes de comprometerme con diseños de alta fidelidad.
Experiencia n.° 1: pantalla de inicio
Para empezar cambié el tema de la aplicación de oscuro a claro, extraje colores del logo de Bento y del sitio web. Reemplacé la ilustración de la aplicación con ilustraciones SVG del conjunto de historias que edité en Figma.
El tema actual no cumple con los requisitos de accesibilidad y se siente como un producto completamente diferente si descarga la aplicación después de visitar el sitio web de Bento o hacer clic en los anuncios de las redes sociales de Bento Africa. Bento Africa usó el tema en la imagen siguiente a continuación para su Anuncios en sitios web y redes sociales.
Aquí hay una lista de los cambios que hice en la pantalla de inicio:
Me deshice del menú de hamburguesas en el panel y organicé su contenido en el panel. Agregué un ícono para ocultar y mostrar el monto del salario junto al monto del salario; en la aplicación, los usuarios deben ir a la configuración para realizar una tarea tan simple como ocultar y mostrar el monto del salario. Se agregó un botón para ver el recibo de nómina y cerrar el monto del salario. Supuse que la razón principal para descargar la aplicación para la mayoría de los empleados es ver o compartir su recibo de nómina. Agregué una parte inferior para ayudar a los usuarios a navegar por la aplicación rápidamente como la actual La navegación no es lo suficientemente intuitiva. También eliminé la imagen de perfil de la pantalla de inicio porque ocupa una porción más grande de la pantalla aunque no hay razón para que esté allí.
Aquí tenéis una imagen del antes y el después:
Antes y después de la pantalla de inicio de Bento África
Experiencia #2: Configuración
Uno de los cambios importantes que hice fue cambiar la configuración del perfil y colocar el ícono del perfil en la parte inferior de navegación. Esta decisión se basa en la familiaridad como uno de los principios de diseño. La mayoría de las aplicaciones sociales y de tecnología financiera tienen su configuración en el perfil, lo que ayudará a los usuarios a mapear la experiencia previa obtenida al interactuar con otras aplicaciones.
Aquí tenéis una imagen del antes y el después de la pantalla de configuración:
Experiencia #3: Configurar el flujo de compromiso
Cambié el campo de entrada del formulario, la etiqueta y el marcador de posición para configurar compromisos; el diseño actual del formulario no es útil, preciso ni objetivo.
El formulario parece lleno en el estado vacío y las etiquetas son demasiado pequeñas en el estado lleno.
Flujo de compromiso antes y después
Lo que empezó como una queja de “¿Por qué esta aplicación es tan difícil de usar?” se convirtió en un esfuerzo de un mes para comprender cómo las acciones más simples pueden confundirse con un diseño deficiente. Aunque subestimé cuánto trabajo implicaría rediseñar una aplicación y comprender los matices de varios casos de uso y flujos de trabajo, este proyecto fue una gran oportunidad para esforzarme y perfeccionar mis propias habilidades de diseño.
Me tomaré tiempo para diseñar pantallas para otras funciones de la aplicación y actualizar el prototipo.