ACI Pay (Versión Consumidor) | Diseño UI/UX Fintech

Diseño UI/UX de Aplicación Web de Escritorio

Nuestro equipo de diseño comenzó con conceptos iniciales, explorando tanto el modo claro como el modo oscuro. Finalmente, ACI seleccionó la dirección de modo oscuro. Dada la estructura horizontal natural del contenido, implementamos una navegación lateral izquierda y un layout de dos paneles. Este enfoque maximiza el espacio disponible en pantallas desktop y laptop, creando una experiencia más eficiente y visualmente equilibrada que una interfaz tradicional de arriba hacia abajo.

Un lenguaje de diseño UI flexible, táctil, 2D y neumórfico se adapta de manera fluida entre desktop y móvil, respaldado por un conjunto iconográfico consistente y componentes modulares. Cada sección de la UI presenta una paleta de color única, combinada con tonos secundarios y terciarios complementarios para mejorar la jerarquía visual y crear un sistema dinámico, pero cohesivo.

Haz clic en cualquier imagen a continuación para verla en tamaño completo.

Pagos

Las pantallas de pago fueron nuestro punto de partida y sirvieron como la base de toda la aplicación. Aquí es donde los usuarios ingresan su información, configuran métodos de pago, seleccionan una compañía para pagar, revisan su transacción, aceptan los términos y reciben la confirmación.

El espacio vacío no debería estar vacío; es una oportunidad de onboarding. Si un usuario llega a un área o pantalla en blanco y no sabe qué hacer, el diseño ha fallado. Cada espacio debe mostrar qué pertenece allí y ofrecer una siguiente acción clara. Así es como guías a los usuarios en tiempo real y eliminas la fricción desde la fuente. La excepción es el estado vacío intencional. Cuando un usuario llega a un dashboard que aún no ha poblado, el diseño simplemente debe comunicar que todavía no hay nada allí y qué aparecerá una vez que lo haga.

En la primera imagen a continuación, el usuario acaba de llegar a la aplicación. El área de Pagos está vacía, pero el panel derecho refuerza el siguiente paso haciendo onboarding del usuario hacia "Realizar un Pago", iniciando de inmediato un recorrido claro y paso a paso que se refleja en los paneles que siguen.

Realizar un Pago: Paneles de Onboarding Paso a Paso

Cada paso en el flujo de pago se presenta como una experiencia enfocada en el panel derecho, guiando al usuario hacia adelante sin abrumarlo con todo el formulario de una sola vez. El modelo de revelación progresiva divide una transacción compleja en etapas fáciles de procesar, desde la búsqueda en vivo de empresas y el ingreso de información del cliente hasta la selección de wallet, manteniendo al usuario orientado y seguro en cada punto. Este enfoque paso a paso es un patrón probado en diseño UX fintech para reducir el abandono y aumentar las tasas de finalización de pagos.

Paso 3: Paneles Adicionales para Agregar Nuevo Método de Pago

Estas pantallas manejan los tres tipos principales de métodos de pago dentro de un único patrón de interacción consistente, asegurando que los usuarios nunca tengan que volver a aprender la interfaz sin importar qué método elijan. Los formularios de tarjeta de crédito, cuenta bancaria y wallet digital adaptan su estructura de campos a los datos específicos requeridos, manteniendo el mismo lenguaje visual y ritmo de layout. El patrón de confirmación destructiva en línea que se muestra aquí es una decisión UX deliberada, mostrando la acción de eliminar en contexto en lugar de activar un modal que interrumpe el enfoque del usuario.

Pasos 4 y 5: Paneles de Revisión, Términos y Confirmación

Los pasos finales del flujo de pago priorizan la claridad y la confianza. La pantalla de revisión ofrece a los usuarios un resumen completo de su transacción antes de comprometerse, el panel de términos presenta el contenido legal en un formato legible sin ocultarlo, y la pantalla de confirmación cierra el ciclo con un estado de éxito claro y opciones inmediatas para la siguiente acción. En diseño UX fintech, el momento de confirmación también es una oportunidad de retención, por eso el diseño muestra la inscripción en wallet, AutoPay y recordatorios directamente al completar el proceso.

Diseño UI/UX de Aplicación Móvil

Diseñar mobile-first es el enfoque equivocado cuando estás creando una versión desktop y una versión móvil de la misma aplicación. Como hemos explicado en nuestros artículos del blog, comprime cada decisión de diseño alrededor de la pantalla más pequeña, lo que produce una experiencia desktop que se siente como una idea secundaria. Nosotros empezamos en desktop, donde la complejidad completa de la interfaz puede resolverse correctamente. La versión móvil se diseña por separado, adaptada a cómo las personas realmente usan sus teléfonos, no reducida desde un punto de partida comprometido. El lenguaje visual, la terminología y el flujo se mantienen consistentes en ambas versiones, con el layout y los patrones de interacción ajustados para cada plataforma. Las versiones móviles de cada sección aparecen debajo de sus respectivas contrapartes desktop.

Pagos — Versión Móvil

Las pantallas móviles de pago trasladan el flujo completo de desktop a una experiencia enfocada y fácil de usar con el pulgar, sin sacrificar ninguno de los pasos ni la lógica que guía a los usuarios a través de una transacción. La navegación se desplaza a una barra de pestañas inferior y a un menú hamburguesa compacto, manteniendo las áreas clave accesibles sin saturar la pantalla. El mismo modelo de revelación progresiva impulsa el flujo de pago en móvil, llevando a los usuarios por la búsqueda en vivo, la información del cliente, la selección de wallet, el ingreso del método de pago, la revisión, los términos y la confirmación, un paso enfocado a la vez. Los estados vacíos mantienen la misma intención de onboarding que sus equivalentes desktop, asegurando que los usuarios nuevos nunca queden sin dirección, sin importar el dispositivo que utilicen.

Wallet Digital

Las pantallas de Wallet se construyen sobre la misma base que Pagos, utilizando estados vacíos como momentos intencionales de onboarding en lugar de espacio muerto. Un usuario nuevo es guiado de inmediato por un panel dedicado que lo orienta para agregar métodos de pago y activar su wallet. En lugar de dejar la interfaz en blanco, el diseño comunica claramente qué pertenece allí y qué hacer a continuación, eliminando la duda desde el inicio.

A continuación, contrastamos la experiencia de un usuario nuevo con un estado activo y poblado para mostrar cómo evoluciona el sistema a medida que aumenta el engagement. Se introducen paletas de color distintivas para señalar un cambio de contexto, dando a los usuarios una señal visual inmediata de que se han movido a un área diferente de la aplicación fintech, mientras se mantiene la cohesión general del sistema.

Agregar Método de Pago: Paneles de Tarjeta de Crédito

Las pantallas de tarjeta de crédito guían a los usuarios por cada etapa de la experiencia de manejo de tarjetas, desde el ingreso inicial hasta el estado guardado, la edición y la eliminación. El formulario para agregar captura todos los campos requeridos con validación clara en línea, mientras que el estado de solo lectura presenta los detalles de la tarjeta guardada en un formato limpio y legible. El patrón de edición y eliminación en línea mantiene las acciones destructivas en contexto y confirmables sin sacar al usuario de su flujo actual.

Agregar Método de Pago: Paneles de Cuenta Bancaria

El manejo de cuentas bancarias sigue el mismo modelo de interacción que las tarjetas de crédito, manteniendo consistencia en todos los tipos de métodos de pago. Los usuarios pueden agregar una nueva cuenta con ingreso de campos guiado, ver los detalles de la cuenta guardada en un estado protegido de solo lectura, y editar o eliminar cuentas directamente dentro de la wallet. Este enfoque unificado reduce la carga cognitiva y refuerza la confianza, dos factores críticos en el diseño UI/UX fintech.

Agregar Método de Pago: Paneles de Cuenta Bancaria

El manejo de cuentas bancarias sigue el mismo modelo de interacción que las tarjetas de crédito, manteniendo consistencia en todos los tipos de métodos de pago. Los usuarios pueden agregar una nueva cuenta con ingreso de campos guiado, ver los detalles de la cuenta guardada en un estado protegido de solo lectura, y editar o eliminar cuentas directamente dentro de la wallet. Este enfoque unificado reduce la carga cognitiva y refuerza la confianza, dos factores críticos en el diseño UI/UX fintech.

Wallet Digital — Versión Móvil

Las pantallas móviles de wallet mantienen la misma estructura e intención que sus contrapartes desktop, adaptadas a una experiencia de una sola columna y pensada para el pulgar. El estado vacío guía a los nuevos usuarios directamente a agregar un método de pago, mientras que el estado poblado muestra todos los métodos guardados en una lista compacta y fácil de escanear. Las revelaciones de funcionalidad por fila mantienen las acciones rápidas disponibles sin saturar la vista predeterminada, y el menú hamburguesa ofrece acceso rápido a todas las secciones de la aplicación. Agregar una tarjeta de crédito, una cuenta bancaria o una wallet digital sigue un flujo de formulario enfocado a pantalla completa, con estados de solo lectura y edición que dan a los usuarios control total sobre sus métodos de pago guardados en cualquier momento.

Conexiones

El área de Conexiones les da a los usuarios control sobre las empresas con las que han establecido relaciones de pago, mostrando todas las conexiones activas en una lista limpia con acciones en línea por fila. Al igual que en las secciones de Pagos y Wallet, un usuario nuevo encuentra una pantalla de onboarding dedicada que lo guía a agregar su primera conexión en lugar de caer en una interfaz en blanco. La revelación de funcionalidad por fila mantiene la experiencia limpia de forma predeterminada, mostrando controles de edición y eliminación solo cuando el usuario inicia la interacción. Este patrón escala bien en listas de conexiones grandes sin agregar ruido visual al estado predeterminado.

Paneles para Agregar Nueva Conexión

Agregar una nueva conexión sigue el mismo patrón de búsqueda en vivo introducido en el flujo de pago, dando a la experiencia una sensación consistente en toda la aplicación. Los usuarios buscan una empresa, la seleccionan en los resultados y son guiados para vincular su método de pago preferido y completar la conexión. El panel de edición permite a los usuarios actualizar el método de pago asignado en cualquier momento, manteniendo sus conexiones precisas a medida que evoluciona su wallet.

Conexiones — Versión Móvil

Conexiones en móvil mantiene el manejo de relaciones simple sin reducirlo en exceso. Los usuarios obtienen una vista clara de las empresas vinculadas, onboarding guiado al comenzar desde cero y acceso directo a acciones de edición y eliminación, todo sin saturar el estado predeterminado con opciones que aún no necesitan.

El flujo se mantiene consistente con el sistema móvil más amplio de ACI Pay. La búsqueda en vivo, la asignación enfocada de métodos de pago y una estructura de navegación simplificada permiten que los usuarios agreguen, actualicen y manejen conexiones de la misma manera en que hacen todo lo demás en la aplicación. Sin cambios de modo, sin buscar de más, sin fricción entre dónde están y lo que necesitan hacer.

AutoPay

AutoPay lleva el manejo de pagos recurrentes a un área única y enfocada, dando a los usuarios visibilidad y control sobre todas las relaciones de pago programadas en un solo lugar. Como en cada sección principal de la aplicación, un usuario nuevo llega a un estado vacío intencional que lo guía a configurar su primer AutoPay en lugar de enfrentarlo a una pantalla en blanco. Una vez activo, la vista de lista muestra todas las conexiones programadas con los detalles clave que los usuarios necesitan de un vistazo, manteniendo los pagos recurrentes transparentes y manejables.

AutoPay: Pantalla y Panel para Editar Conexión

La revelación de funcionalidad por fila y el panel de edición dan a los usuarios control directo sobre las conexiones AutoPay existentes sin navegar fuera de la pantalla principal. Mostrar acciones en línea en lugar de hacerlo a través de una página separada mantiene la interacción liviana y el contexto intacto. El panel de edición permite a los usuarios actualizar el método de pago o la programación de cualquier conexión activa, asegurando que AutoPay siga siendo preciso a medida que cambian los detalles de la cuenta con el tiempo.

AutoPay: Paneles para Agregar Conexión y Seleccionar Pago

Configurar un nuevo AutoPay sigue el mismo patrón de búsqueda en vivo utilizado en toda la aplicación, manteniendo la experiencia familiar sin importar dónde esté el usuario dentro del producto. Desde la búsqueda de empresa hasta la selección de fecha, el ingreso de monto y la asignación de método de pago, cada paso se maneja dentro del panel derecho sin interrumpir la orientación del usuario. El dropdown de calendario y los estados de formulario completado que se muestran aquí reflejan un esfuerzo deliberado para hacer que la configuración de pagos programados se sienta tan fluida como una transacción única.

AutoPay — Versión Móvil

El manejo de pagos recurrentes en móvil siempre ha sido una idea secundaria. El flujo móvil de AutoPay en ACI Pay cambia eso. Desde el onboarding en estado vacío y la búsqueda en vivo de empresas hasta la selección de calendario, la asignación de método de pago y los controles completos de edición, cada pantalla está construida alrededor de cómo las personas realmente usan sus teléfonos: un pulgar, atención limitada y cero tolerancia a la confusión.

El resultado es una experiencia de pagos recurrentes que se siente intencional. Los usuarios pueden programar, revisar y ajustar configuraciones de AutoPay sin fricción, sin ajustes escondidos y sin perder confianza en lo que han configurado. Una jerarquía visual clara, estados de formulario simplificados y un flujo de edición diseñado para uso real se combinan para hacer que la facturación recurrente sea algo que los usuarios realmente entienden y en lo que confían.

Contáctanos

La pantalla de Contacto mantiene el soporte accesible sin sacar a los usuarios de la aplicación. En lugar de dirigirlos a una página externa o a un centro de ayuda genérico, el diseño muestra un formulario de contacto directo dentro del mismo layout de dos paneles utilizado en todo el producto. Esto mantiene la experiencia contenida y consistente, para que los usuarios nunca sientan que han salido de la aplicación para obtener ayuda. El formulario es intencionalmente simple, capturando solo lo necesario para dirigir la solicitud y establecer una expectativa de respuesta, respetando el tiempo del usuario mientras le da al equipo de soporte el contexto que necesita para responder eficazmente.

Contáctanos — Versión Móvil

Las pantallas móviles de Contáctanos mantienen el soporte al cliente, el contenido de ayuda y la comunicación dentro de la aplicación accesibles sin obligar a los usuarios a abandonar la experiencia. Construido para UX fintech móvil, el flujo ofrece a los usuarios una ruta rápida para contactar soporte, revisar preguntas frecuentes y mantenerse orientados dentro de la interfaz de ACI Pay en lugar de saltar entre páginas desconectadas o sistemas de ayuda genéricos.

Desde el menú móvil hasta el formulario de contacto y la vista de preguntas frecuentes, cada pantalla está diseñada para reducir la fricción, preservar el contexto y hacer que el soporte se sienta como una parte natural del producto. Eso importa en el diseño de aplicaciones financieras, donde la confianza, la claridad y el acceso inmediato a la ayuda impactan directamente la confianza del usuario y la retención a largo plazo.

Perfil

La pantalla de Perfil ofrece a los usuarios un lugar centralizado para manejar su identidad, seguridad y preferencias dentro de la aplicación. En lugar de dispersar la configuración de cuenta en múltiples áreas, todo se muestra en una vista enfocada, manteniendo el manejo de cuenta claro y accesible sin interrumpir el flujo principal de pagos del usuario.

Paneles para Editar Información de Perfil

Los paneles de edición de perfil cubren las tres áreas principales del manejo de cuenta: información personal, credenciales de seguridad y preferencias de notificación. Cada categoría se maneja dentro de su propia experiencia dedicada en el panel derecho, manteniendo el mismo modelo de interacción utilizado en toda la aplicación. Los usuarios pueden actualizar sus datos, cambiar su contraseña o configurar alertas sin salir nunca del contexto de su perfil, manteniendo la experiencia precisa y consistente.

Paneles para Editar Compras y Suscripciones

Los paneles de Compras y Suscripciones dan a los usuarios visibilidad completa de su historial de transacciones y compromisos recurrentes en un solo lugar. La vista de compras muestra la actividad pasada en un formato limpio y fácil de escanear, mientras que la vista de suscripciones enumera todas las relaciones recurrentes activas con indicadores de estado claros. El flujo de cancelar suscripción se maneja en línea con un estado de confirmación directo, manteniendo la acción en contexto y reduciendo la fricción que normalmente hace que los usuarios abandonen por completo los flujos de cancelación.

Perfil — Versión Móvil

El manejo de cuentas en aplicaciones financieras tiende a convertirse en un laberinto de menús desconectados. Las pantallas móviles de perfil de ACI Pay toman el enfoque opuesto. Identidad, seguridad, notificaciones, historial de transacciones y manejo de suscripciones se presentan en un solo dashboard coherente donde nada importante queda enterrado y nada requiere una segunda búsqueda para encontrarse.

Cada pantalla está construida alrededor de un principio simple: profundidad sin complejidad. Los usuarios pueden editar información personal, revisar compras, manejar suscripciones y ajustar preferencias de seguridad y notificación sin perder su lugar ni su confianza. En fintech, esa claridad no es algo opcional. Es la forma en que se construye la confianza, una interacción a la vez.

Dashboard

El Dashboard ofrece a los usuarios una vista rápida de su actividad de pagos, transacciones recientes y estado de cuenta en el momento en que inician sesión. A diferencia de todas las demás secciones de la aplicación, aquí el espacio vacío es intencional y esperado. Los usuarios no pueden poblar manualmente los paneles del dashboard; los datos aparecen automáticamente a medida que se acumula la actividad. El panel inferior derecho es un espacio reservado para el equipo de marketing de ACI, funcionando como placeholder para promociones, anuncios o mensajes de producto que serán manejados y actualizados por ellos. Los tres estados que se muestran a continuación reflejan una cuenta nueva, una cuenta parcialmente activa y una experiencia completamente poblada.

Dashboard — Versión Móvil

El dashboard móvil lleva la visualización de datos fintech a un formato enfocado y fácil de usar con el pulgar, dando a los usuarios información inmediata sobre actividad de pagos, tendencias de gasto, cuentas conectadas y detalles por categoría sin abrumar la pantalla pequeña. En lugar de tratar los analytics móviles como una versión reducida de segunda importancia, la interfaz muestra primero las señales de cuenta más importantes y luego permite profundizar en métodos de pago, conexiones y comportamiento de gasto mediante una jerarquía visual clara y layouts basados en tarjetas fáciles de escanear.

Para las aplicaciones financieras, la UX de dashboard tiene que hacer bien dos cosas: comunicar confianza y reducir el tiempo de interpretación. Estas pantallas móviles de dashboard hacen ambas. Los estados vacíos explican qué deben esperar los usuarios a medida que se acumula actividad, los estados poblados hacen que los patrones de transacción sean legibles de inmediato, y los paneles de profundización convierten los datos de pago sin procesar en una experiencia móvil más usable y útil para tomar decisiones.

Login

La experiencia de login marca el tono de toda la aplicación. El estado predeterminado presenta un punto de entrada limpio y enfocado, con campos de credenciales claros y una acción de inicio de sesión prominente. El estado de contraseña inválida maneja los errores en línea sin interrumpir el layout, mostrando un mensaje directo que mantiene al usuario en el camino correcto en lugar de enviarlo a otro lugar. Las pantallas de código de verificación, olvidar contraseña y restablecer contraseña completan el flujo completo de autenticación, cada una manteniendo la misma estructura de dos paneles para asegurar que la experiencia se sienta continua desde el primer contacto hasta el ingreso exitoso.

Crear Cuenta

El flujo de creación de cuenta guía a los nuevos usuarios por cada paso del onboarding en una secuencia estructurada y progresiva. La pantalla inicial captura la información básica de identidad antes de avanzar al ingreso de dirección, la configuración de método de pago y la activación de wallet. Cada etapa se construye sobre la anterior, con el panel derecho adaptando su contenido para reflejar exactamente dónde se encuentra el usuario en el proceso. Ofrecer opciones de métodos de pago, incluyendo tarjeta de crédito, cuenta bancaria y wallet digital, en el momento de crear la cuenta reduce la fricción posterior, dejando a los usuarios configurados y listos para transaccionar desde el momento en que completan el registro.

Login — Versión Móvil

El flujo de login móvil lleva la autenticación segura fintech a una experiencia compacta y de alta claridad, construida para uso real. Desde el inicio de sesión estándar y el manejo de contraseña inválida hasta el ingreso de código de verificación, la recuperación de contraseña olvidada y el restablecimiento de contraseña, cada pantalla está diseñada para mantener a los usuarios avanzando sin perder orientación. Una jerarquía limpia, estados de error directos y un diseño de formulario enfocado hacen que el acceso seguro a la cuenta se sienta rápido, intuitivo y confiable en dispositivos móviles.

Crear Cuenta — Versión Móvil

El flujo móvil de creación de cuenta convierte el onboarding en una experiencia guiada de configuración fintech en lugar de un formulario largo y frágil. Los usuarios pasan del ingreso de identidad y dirección a la selección de método de pago, configuración de wallet digital y búsqueda de conexiones mediante una secuencia estructurada que mantiene cada paso enfocado y comprensible. Al permitir que los nuevos usuarios agreguen tarjetas de crédito, cuentas bancarias, wallets digitales y conexiones comerciales durante el registro, el flujo móvil de onboarding reduce la fricción futura y los deja listos para transaccionar más rápido.