$30 off During Our Annual Pro Sale. View Details »

Banca Móvil - Tendencias UX/UI 2016/2017

juanmnl
January 09, 2017

Banca Móvil - Tendencias UX/UI 2016/2017

Research about the state of mobile banking (w/tendencies) for 2016/2017

juanmnl

January 09, 2017
Tweet

More Decks by juanmnl

Other Decks in Design

Transcript

  1. TENDENCIAS UX/UI
    2016/2017
    Banca Móvil

    View Slide

  2. ESTADO DEL MERCADO

    View Slide

  3. Insights (Global)
    ● Los dispositivos móviles son compañeros indispensables para
    comparar precios (53%), buscar información de productos
    (52%), buscar cupones u ofertas (44%), tomar mejores
    decisiones de compra (42%), hacer los viajes de compra más
    rápidos o más eficientes (41%) y comprar productos (38%)
    ● Las actividades bancarias en línea, tales como acceder a
    información de cuenta (47%) y pagar cuentas (42%), son más
    comunes que transferir dinero entre cuentas bancarias (36%).

    View Slide

  4. ● La banca electrónica es más popular en países en desarrollo
    con un número importante de habitantes sin servicios bancarios
    India (46%), Indonesia (37%), México (34%) y Turquía (34%)
    ● La seguridad es lo principal en la lista de barreras para servicios
    bancarios online (53%), seguido de la preferencia por lugares
    físicos (31%) y quienes dicen no necesitar el servicio (28%).
    ● Los Millennials lideran el camino cuando se trata de compras,
    servicios bancarios y pagos móviles, tienen más del doble de
    probabilidades que los Baby Boomers y la Generación
    Silenciosa para decir que están dispuestos a usar un banco
    móvil.

    View Slide

  5. Insights (América Latina)
    ● América Latina se ha convertido en un eje principal a la hora de
    innovar y de entender los avances tecnológicos relacionados
    con la banca móvil.
    ● En 2014 aumentó un 54,6% el número de ‘smartphones’ que
    existían en dicha región, alcanzando los 270 millones de
    unidades de este tipo de dispositivo móvil.
    ● Se prevé que en 2020 se llegue a los 605 millones de teléfonos
    inteligentes.

    View Slide

  6. View Slide

  7. ● 52% a 65% de Crecimiento Anual
    ● 34% Transacciones a través del móvil
    ● 40% Teléfonos con sensor biométrico
    ● 61% ha usado seguridad biométrica
    ● 50% se preocupa por la seguridad de acceso
    ● 49% se preocupa por la seguridad de pagos
    ● Dispositivos Móviles:
    ○ Android 65%
    ○ iOS 18%
    ○ Windows Phone 5%
    2015
    Banca Móvil (América Latina)

    View Slide

  8. Perspectiva

    View Slide

  9. Banca Digital 1.0 (1998 - 2002)
    ● ‘e-banking’
    ● Experiencia ‘dial-up’
    ● Contacto e-mail
    ● Catálogos en línea

    View Slide

  10. Banca Digital 2.0 (2003 - 2008)
    ● Integración Multicanal
    ● Cuenta con acceso web
    ● Pagos y Herramientas en línea
    ● Manejo local de datos

    View Slide

  11. Banca Digital 3.0 (2009 - 2014)
    ● Solución omnicanal
    ● Acceso desde cualquier dispositivo
    ● Acceso desde cualquier lugar
    ● Experiencia única referente (donde más se falla)

    View Slide

  12. Banca Digital 4.0 (2015 - ...)
    ● Asistente Financiero Personal (I.A.)
    ● ‘Marketplace’ para Servicios Financieros
    ● Entendimiento y Predicción del comportamiento financiero
    personal
    ● Hacer de las finanzas algo Amigable y Personal

    View Slide

  13. "EL BANCO YA NO ES UN LUGAR
    AL QUE VAMOS, AHORA
    ES ALGO QUE HACEMOS."
    – BRETT KING

    View Slide

  14. Oportunidades

    View Slide

  15. Banco en línea
    (b2c - 100% en línea)
    sPFM
    (b2c - smart Personal Financial Management)
    Business Api’s
    (b2b2c - business financial tech)

    View Slide

  16. Banco en línea
    (b2c - 100% en línea)
    ● 100% en línea
    ● Cero tazas
    ● Simplicidad
    ● Integrado con todo (físico, digital, ecosistema)

    View Slide

  17. https://www.simple.com
    ➔ Esto es Simple
    ➔ Define tus metas y ahorra automáticamente
    ➔ Utiliza tus Metas para todo
    ➔ Always know what’s Safe-to-Spend®
    “Save your way there.
    Save easily. Bank
    beautifully.”

    View Slide

  18. https://www.nubank.com.br/
    ➔ El fin de la complejidad
    ➔ Tus gastos en tiempo real y personalizados
    ➔ Atención cuando y como tu quieras
    ➔ Asume el control y planifica tus finanzas
    ➔ Seguridad en un toque - Más transparencia - Sin papel
    “Diferente de tudo que você já
    viu.”

    View Slide

  19. https://www.original.com.br/
    ➔ Innovador, digital y original
    ➔ Cercano, porque hacemos todo a tu manera
    ➔ Somos un banco simple, que habla tu idioma
    ➔ Un banco confiable y revolucionario
    ➔ Transparencia en las relaciones y en las transacciones
    “Somos um banco 100% digital
    que chegou para descomplicar sua
    relação com o dinheiro.”

    View Slide

  20. sPFM
    (b2c - smart Personal Financial Management)
    ● Control
    ● Manejo Fácil
    ● Automatización
    ● Personalización

    View Slide

  21. https://www.mint.com/
    ➔ Personalizado para ti
    ➔ Empieza fácilmente y con seguridad
    ➔ “Intuitive features, powerful results”
    “We’ll help you get there by
    managing money and
    budgets better every day”

    View Slide

  22. https://www.prosper.com/daily
    ➔ Money Central
    ➔ Smart Inbox
    ➔ Spend Analytics
    ➔ Credit Score
    “Hello financial wellness.”

    View Slide

  23. http://wally.me/
    ➔ Balance your income and expenses.
    ➔ Understand where your money goes.
    ➔ Set and achieve your financial goals.
    ➔ Seamlessly and intuitively.
    “Control your money
    seamlessly.”

    View Slide

  24. ● Sistemas de pagos (web, contactless, apple pay)
    ● Integraciones dispositivos físicos
    ● Acceso para Startups
    ● Gestión de Empresas
    Business Api’s
    (b2b2c - business fintech)

    View Slide

  25. https://squareup.com/
    ➔ Descarga Gratis
    ➔ Haz que tu negocio crezca
    ➔ Suficientemente poderoso para todos
    ➔ Actualizaciones automáticas
    “The POS software that’s
    simple, powerful, and
    free.”

    View Slide

  26. https://venmo.com/
    ➔ Send money confidently
    ➔ Connect with people
    ➔ Make purchases
    ➔ Quickly transfer money to your bank
    “Send money and make
    purchases.”

    View Slide

  27. “Una App para monitorear, manejar y
    automatizar mis finanzas. La robustez
    y seguridad de una app bancaria con
    la personalización de una app de
    presupuestos”

    View Slide

  28. EXPERIENCIA DE USUARIO

    View Slide

  29. UX Móvil
    Buenas Prácticas

    View Slide

  30. 1. El Camino de Menor Resistencia
    Mientras más complicado sea para los usuarios ingresar, registrarse,
    descubrir características o navegar la app, más alto será el
    porcentaje de abandono. Es por eso que necesitamos el “camino de
    menor resistencia”.
    Por ejemplo, una pantalla simple para el registro –esto es popular en
    apps de redes sociales o entretenimiento, pero también tenemos
    Touch ID para apps más enfocadas en brindar percepción de
    seguridad.

    View Slide

  31. View Slide

  32. 2. Reducir Campos (Ej. Sign-up/Log In)
    Los formularios largos son una mala idea, especialmente en
    dispositivos móviles por sus pantallas pequeñas. El escenario ideal
    es permitir a los usuarios registrarse o iniciar la app con un solo
    campo, como cualquier de red social. Sin embargo, algunas apps
    requieren de mayor información, por ejemplo, una app basada en
    algún servicio que ya tienen una base de usuarios.
    En estos casos queremos juntar solo la información que nos es
    esencial. Si es mucha información, hay que considerar romperla en
    diferentes secciones que guarden cierta relación.

    View Slide

  33. View Slide

  34. 3. “Una Pantalla, Un Concepto”
    La gente absorbe información de manera más fácil cuando esta
    información es precisa y enfocada. Las pantallas deberían ‘recortar’
    la información, de ser posible, usando una sola para describir un
    solo concepto y así evitar la saturación de información para el
    usuario.
    Esta práctica es particularmente importante en los “onboarding
    screens” basados en las funciones o beneficios, donde el motivo
    principal es demostrar o comunicar el valor agregado que provee la
    app.

    View Slide

  35. View Slide

  36. 4. Dar Feedback Rápidamente
    El ‘feedback’ tiene múltiples propósitos, el más común es para
    demostrar errores y éxitos en procesos de validación. También
    puede ser usado a través de animaciones para actuar como refuerzo
    positivo al completar una interacción.
    Los estados de error deben ser siempre claros y contextuales, así el
    usuario sabrá que hizo mal; esto ayuda a reducir falencias y hace
    más fácil la percepción de navegación y comprensión de la app.

    View Slide

  37. View Slide

  38. 5. Interacción y Progreso Guiado
    La interacción y progreso guiado son para incentivar al usuario a
    explorar, más que decirles exactamente qué hacer. Este concepto
    es muy popular en juegos de video; en vez de tutoriales largos, los
    jugadores ‘juegan’ con las acciones para familiarizarse con los
    controles y el ambiente.
    Es muy importante para apps con estado ‘vacío’, ya que ayuda a los
    usuarios a tomar acción para llenarlo con contenido.

    View Slide

  39. View Slide

  40. 6. Usar Animaciones con Sentido
    Existen 3 razones para usar animaciones:
    1. Llamar la atención a elementos que ayuden
    2. Feedback (ej. refuerzo positivo por una acción)
    3. Concepto de espacio (presentar nuevo contenido sin hacer
    sentir al usuario que está ‘dejando’ la pantalla)
    La animación debería siempre ser usada con alguna de estas
    razones en mente. Tiene que llamar la atención, pero jamás irritar al
    usuario.

    View Slide

  41. View Slide

  42. 7. Pruebas con Usuarios
    Escuchar, observar y actuar en base al ‘feedback’ recibido en las
    pruebas con grupos de usuarios, nos ayuda a identificar los puntos
    de fricción dentro de nuestras apps y corregirlo rápidamente.
    Una vez que se obtienen datos suficientes para corregir algunos
    patrones, lo mejor es empezar a probar cosas nuevas, eso nos
    permite comprender más a nuestros usuarios.

    View Slide

  43. View Slide

  44. Patrones
    ‘Customer Experience’

    View Slide

  45. ¿Qué quieren los clientes?
    ● Personalización
    ● Transparencia
    ● “Autoservicio”
    ● Móvilidad
    ● Simplicidad
    ● Ayuda
    ● Estética
    ● Holística (percepción de unidad)

    View Slide

  46. Percepción que queremos del
    servicio/producto:
    ● Amigable
    ● Natural
    ● Cotidiano
    ● Inteligente
    ● Tiempo Real

    View Slide

  47. Features más buscados (Banca Móvil)
    ● Tap & Pay - más de e-com pero percepción de banca $$
    ● Login Directo - fingerprint/face/voice
    ● Quick Stats (AI) - dashboards
    ● Finanzas Inteligentes (AI) - ¿goals? ¿gamification?
    ● Guia (AI) - ayuda financiera constante

    View Slide

  48. Categorías Apps
    Financieras

    View Slide

  49. View Slide

  50. Patrones UI
    (1 = más común)

    View Slide

  51. Landing Pages
    1. Login
    2. Contactos banco
    3. Registro de nuevos usuarios
    4. Buscador de Cajeros y sucursales
    5. Productos y promociones
    6. Convertidor cambio de moneda
    7. Feed de noticias

    View Slide

  52. Dashboards
    1. Balance/Saldo (resúmen del estado de cuenta)
    2. Ingresos mensuales
    3. Egresos mensuales
    4. Disponibilidad diaria y mensual (sobregiro, avance tarjetas de
    crédito, crédito de consumo)
    5. Presupuestos por categorías
    6. Historial de últimas transacciones (movimientos)
    7. Menú de acceso rápido a transacciones

    View Slide

  53. Manejo de Cuentas y Presupuestos
    1. Soporte multi-cuentas y tarjetas
    2. Menú de pagos rápidos para cada cuenta
    3. Categorización de cuentas
    4. Apertura fácil de nuevas cuentas
    5. Acceso a metas de ahorro
    6. Manejo de presupuestos avanzado
    7. Estadísticas de gastos DoD and MoM (day-over-day /
    month-over-month)

    View Slide

  54. Pagos y Consultas a Personas
    1. Acceso instantáneo a pagos comunes
    2. Pagos comunes definidos automáticamente
    3. Cuentas predefinidas por defecto
    4. Consultas a asistentes financieros reales
    5. Recordatorios de pagos regulares

    View Slide

  55. Transacciones (dinero, tarjetas y redes sociales)
    1. Transferencias tarjeta-tarjeta
    2. Transferencias domésticas/internacionales
    3. Transferencias Mail, Facebook y Twitter

    View Slide

  56. INTERFACES DE USUARIO

    View Slide

  57. SignUp/Login
    (ejemplos)

    View Slide

  58. View Slide

  59. View Slide

  60. Onboarding
    (ejemplos)

    View Slide

  61. View Slide

  62. View Slide

  63. Dashboards
    (ejemplos)

    View Slide

  64. View Slide

  65. View Slide

  66. Tarjetas
    (ejemplos)

    View Slide

  67. View Slide

  68. Listas
    (ejemplos)

    View Slide

  69. View Slide

  70. Pagos
    (ejemplos)

    View Slide

  71. View Slide

  72. View Slide

  73. Micro-interacciones
    (ejemplos)

    View Slide

  74. View Slide

  75. FUTURO
    BANCA & TECNOLOGÍA

    View Slide

  76. 1. Blockchain
    2. Gamification
    3. AR/VR
    4. Nudge theory
    5. Robo advising (IA)
    6. Voice processing
    7. Biometrics
    8. Social integration
    9. Personalization
    10. Big data
    11. Open API and clouds

    View Slide

  77. GRACIAS :D

    View Slide

  78. LINKS:
    1. https://www.bankmobile.com/
    2. https://digit.co/
    3. https://www.qapital.com/
    4. http://getmonkapp.com/
    5. https://getfinal.com/
    6. https://www.earnest.com/
    7. https://www.capitalone.com/bank/
    8. https://www.discover.com/online-banking/
    9. https://m.gobank.com
    10. https://www.tiaadirect.com/public/banking
    11. https://www.moven.com/
    12. https://www.mint.com/
    13. https://www.ally.com/
    14. https://www.pnc.com/en/personal-banking/virtual-wallet-overview.html

    View Slide

  79. FUENTES:
    1. https://static1.squarespace.com/static/557dd429e4b035c8591b78e0/t/5807dfdfbe6594bf4a4a3769/1476911083917/AMI+Latam+P
    ayments+Digital+Transformation+Oct+2016.pdf
    2. http://www.thepaypers.com/interviews/the-mobile-payments-market-in-latin-america-what-could-it-learn-from-europe/765679-38
    3. http://www.slideshare.net/easysolmaria/mobile-infographic-2015english?ref=http://blog.easysol.net/mobile-banking-in-latin-america
    /
    4. http://www.nielsen.com/ec/es/insights/reports/2016/Estudio-Global-Comercio-Conectado.html
    5. http://www.nielsen.com/ec/es/insights/reports/2016/Estudio-global-dinero-movil.html
    6. http://marketrealist.com/2016/06/latin-america-need-improve-competitiveness/
    7. http://www.nielsen.com/ec/es/insights/news/2016/Infografia-El-consumidor-latino-conectado.html
    8. http://www.uxdesignagency.com/blog/Why-FinTech-Outcompetes-Banks-by-Betting-on-User-Experience
    9. https://www.gsmaintelligence.com/research/?file=6762be5b756dbff2b0cbaa1d59838d7b&download
    10. https://www.gsmaintelligence.com/research/?file=222e2534c05d58cb37077aa31609b9e4&download
    11. https://www.gsmaintelligence.com/research/?file=222e2534c05d58cb37077aa31609b9e4&download
    12. http://www.slideshare.net/easysolmaria/mobile-infographic-2015english?ref=http://blog.easysol.net/mobile-banking-in-latin-america
    /
    13.

    View Slide