Programa formativo en digitalización
Diseño Multiplataforma Luis Ferrándiz 28 de Noviembre de 2015
LUIS FERRANDIZ Socio de KPMG y CEO de ADN, Consultora de Marketing Digital que cuenta con más de 50 personas trabajando para clientes como: Sanitas, NH Hotel Group, Endesa, Iberia Express, Interflora, Grupo Suárez, Grupo Vips, Gas Natural, Unicef…
ESTRATEGIA DIGITAL y
DISEÑO WEB MULTIDISPOSITIVO & UX
DIGITAL ANALYTICS
TRANSFORMACIÓN DIGITAL
! ! ! !
Socio, miembro del Consejo Acedémico y profesor del ISDI Evaluador y mentor en la aceleradora IMPACT Colaborador del IESE en Ciclo de Marketing Digital, Notas Técnicas y otros. Asesor Digital de Unicef e Interflora
[email protected] -
[email protected] / @LFMAG
ANTES DE NADA… UNA BREVE REFLEXIÓN
“
ALL ABOUT THE “ IT’S CONSUMER JOURNEY
CUSTOMER JOURNEY
CUSTOMER JOURNEY
TV, Radio, Prensa, Revistas, OOH, Cine, Product Placement, Merchandising, PR, Display, Mobile Ads, Youtube, Native advertising, e-PR, RTB…
Marketing Directo, Yellow Pages, Tfnos. de Información Search Marketing (SEO + SEM), Social Media (FB, Twitter, Linkedin, Pinterest, Instagram, Slideshare…), Blogs, Influencers, Metasearches, Afiliación, Retargeting,
Acciones de BTL, Packaging… Search Marketing, Showrooming, Social Media, Couponing, Afiliación, Emailing Promo,
CRM, Marketing Directo Social Media (Twitter, FB, Linkedin, Pinterest, Fancy, Instagram…), Blogs,Emailings, search Marketing (Reputación),
CUSTOMER JOURNEY MULTISCREEN
Un 98% de los usuarios reconoce moverse entre pantallas y utiliza una media de 3 combinaciones de pantallas al día.
CUSTOMER JOURNEY ALWAYS ON
El usuario está permanentemente conectado y visualiza su móvil una media de 150 veces al día. El smartphone es ya en la pantalla principal.
CUSTOMER JOURNEY CROSS DEVICE
…pero el 90% de los usuarios comienza la actividad o proceso de compra en un dispositivo y acaba en otro.
CUSTOMER JOURNEY MULTITASK Cada dispositivo es el favorito por los usuarios para cubrir unas necesidades concretas…
Interacciones sociales y búsqueda rápida
Fuente: Google – Thinkwithgoogle
Navegar y consumir multimedia
Llevar a cabo tareas complejas
CUSTOMER JOURNEY MULTITASK
Móvil
Source: IAB Estudio móvil. Septiembre 2015
Tablet
Sociales
93%
Lúdicas
65%
Consultivas
39%
Funcionales
41%
A diario
A diario
A diario
A diario
Sociales
44%
Lúdicas
46%
Consultivas
21%
Funcionales
17%
A diario
A diario
A diario
A diario
CUSTOMER JOURNEY Y ES SÓLO EL PRINCIPIO…
WEAREABLES
SMART THINGS
Gafas, Relojes, pulseras, tejidos inteligentes... Nuevos usos y necesidades
Sensores, objetos cotidianos... Más información y control sobre hábitos
DIGITAL SIGNAGE Pantallas en punto de venta, sensores, reconocimiento facial o gestual... nueva experiencias de interacción y publicidad hiperlocal FUENTE: Mindshare 2014: La tecnología humana
CUSTOMER JOURNEY CONVERGENCIA ONLINE - OFFLINE
Mundo digital
Mundo físico Call center
ON-OFF
Vendedor
Punto de venta
Experiencia multipantalla
Experiencia Multicanal (totalmente integrado)
CUSTOMER JOURNEY MOMENTS OF TRUTH Hay más que nunca y esto exige a las marcas tomar el control sobre la omnicanalidad.
82%
45%
Purchased in-store
Purchased Online (desktop/tablet)
17% Purchase directly on Their mobile phone
El consumidor convierte principalmente en tienda… y online compra y se informa en procesos multidipositivo Fuente: Google – Thinkwithgoogle
CUSTOMER JOURNEY CONVERGENCIA ONLINE - OFFLINE
e-commerce/ mcommerce
Mobile to Store
Showrooming
Mobile to desktop/ tablet
CUSTOMER JOURNEY CONVERGENCIA ONLINE - OFFLINE
CUSTOMER JOURNEY EL DESAFÍO Las marcas deben estar presentes de manera consistente y útil en cada uno de los dispositivos o pantallas donde su usuario lo está reclamando
Gran penetración en los mercados principales, navegabilidad similar a PC pero enriquecida
Sigue representando el entorno por excelencia. Innegociable.
Dispositivo con mayor crecimiento y uso. El centro de todas las pantallas.
Nuevas interfaces, nuevas capacidades de interacción = oportunidad en rápida adaptación Fuente: StatCounter, worlwide platform comparision 2011-2014
¿CÓMO CONSEGUIR ACTIVOS DIGITALES ÓPTIMOS?
PRESENCIA DIGITAL Debemos buscar dar respuesta a las necesidades del consumidor a través de una experiencia consistente y diferencial en nuestro entorno digital.
EXPERIENCIA DEL CONSUMIDOR
EXPERIENCIA WEB DEL USUARIO
OBJETIVOS DE NEGOCIO
NECESIDAD DEL CONSUMIDOR
CAPTACIÓN
INFORMACIÓN
FIDELIZACIÓN
TRANSACCIÓN
DESARROLLO DE CLIENTE
SERVICIO
RECUPERACIÓN
RELACIÓN
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL Para ello debemos cumplir los tres claves para ofrecer la mejor UX.
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL Que se articulan en base a 5 Criterios clave… CONTENIDOS
USABILIDAD
-CONTENIDOS ARQUITECTURA - INFORMACIÓN PRODUCTOS - SOLICITUD PRODUCTOS - ACCESO OTROS SERVICIOS - SIMPLIFICACIÓN - RELEVANCIA
- COMPRENSIÓN GLOBAL - MECANISMOS AYUDA - ASPECTOS ESTÉTICOS - CLASF. INFORMACIÓN - SEGMENTACIÓN DE MENSAJES
ACCESIBILIDAD - ESTANDAR DE NIVEL AA - ACCESO NAVEGADORES - ACCESO CONEXIÓN BAJA - ACCESO OTROS SERVICIOS - MULTIDISPOSITIVO
FUNCIONALIDAD
CRITERIOS CRITERIOS CLAVE CLAVE
FIABILIDAD Y EFICACIA
- TIPOLOGÍA BÚSQUEDA - CONTACTO - NAVEGABILIDAD - ESTABILIDAD - SOPORTE NAVEGADORES
- AUSENCIA DE ERRORES - UTILIZ.ESTÁNDARES W3C - SEGURIDAD - RENDIMIENTO - TIEMPO DE DESCARGA…
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL Debemos buscar dar respuesta a las necesidades del consumidor a través de una experiencia consistente y diferencial en nuestro entorno digital.
EXPERIENCIA DEL CONSUMIDOR
EXPERIENCIA WEB DEL USUARIO
OBJETIVOS DE NEGOCIO
NECESIDAD DEL CONSUMIDOR
CAPTACIÓN
INFORMACIÓN
FIDELIZACIÓN
TRANSACCIÓN
DESARROLLO DE CLIENTE
SERVICIO
RECUPERACIÓN
RELACIÓN
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL Para poder entregar la mejor experiencia debemos identificar las diferentes necesidades del usuario en cada una de las etapas… CICLO DE VIDA DEL CLIENTE
RELACIÓN
SERVICIO
INFORMACIÓN
TRANSACCIÓN
CAPTACIÓN
Incrementar altas
DESARROLLO
Incrementar ingresos / rentabilidad
FIDELIZACIÓN
Satisfacción / Brand linkage
PREVENCIÓN / RETENCIÓN
DE
Disminuir bajas
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL …y alinear los mensajes para poder cumplir con nuestros objetivos de negocio. CICLO DE VIDA DEL CLIENTE
RELACIÓN
SERVICIO
INFORMACIÓN
TRANSACCIÓN
CAPTACIÓN
Incrementar altas
DESARROLLO
Incrementar ingresos / rentabilidad
FIDELIZACIÓN
Satisfacción / Brand linkage
PREVENCIÓN / RETENCIÓN
DE
Disminuir bajas
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
PRESENCIA DIGITAL De manera que podamos definir un modelo de presencia óptima multicanal. CICLO DE VIDA DEL CLIENTE
RELACIÓN
SERVICIO
INFORMACIÓN
TRANSACCIÓN
CAPTACIÓN
USABILIDAD + CONTENIDO
DESARROLLO
FIDELIZACIÓN
PREVENCIÓN / RETENCIÓN
DE
USABILIDAD + ACCESIBILIDAD + FUNCIONALIDAD
Metodología: KPMG ADN - Ayuda al Desarrollo de Negocio S.L ©
10 TIPS DE USABILIDAD
10 TIPS DE USABILIDAD EN DESKTOP
1
VISUAL FIRST
CTAS CLAROS
PROPUESTA VALOR CLARA
2
3
Fuente: Leonardo.com - Anatomy of a Visual-First website experience + aristocrazy.com / fourseasons.com /grovemade.com
10 TIPS DE USABILIDAD EN DESKTOP
1
VISUAL FIRST
3
CTAS CLAROS
PROPUESTA VALOR CLARA
2
10 TIPS DE USABILIDAD EN DESKTOP
VISUAL FIRST
1
CTAS CLAROS
2
3
Fuente: Leonardo.com - Anatomy of a Visual-First website experience + aristocrazy.com / fourseasons.com /grovemade.com
PROPUESTA VALOR CLARA
10 TIPS DE USABILIDAD EN DESKTOP
STORYTELLING
4
Fuente: Leonardo.com - Anatomy of a Visual-First website experience + mauricelacroix.com/chipotle.com/grovemade.com
10 TIPS DE USABILIDAD EN DESKTOP
PERMITE ESCANEAR LA PÁGINA RÁPIDAMENTE
“Users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47%)”
Fuente: http://mashable.com/2011/09/12/website-usability-tips/ + four seasons.com
5
10 TIPS TIPS DEDE USABILIDAD USABILIDAD ENEN DESKTOP DESKTOP
6 Ubicar siempre al usuario
10 TIPS TIPS DEDE USABILIDAD USABILIDAD ENEN DESKTOP DESKTOP
7
Ayudar durante el proceso de compra
10 TIPS TIPS DEDE USABILIDAD USABILIDAD ENEN DESKTOP DESKTOP
8 Transmitir seguridad
12 TIPS TIPS DEDE USABILIDAD USABILIDAD ENEN DESKTOP DESKTOP
9 Facilitar la búsqueda: filtrar contenido
10 TIPS DE USABILIDAD EN DESKTOP
10 Confirmación de la compra clara y sencilla
PRESENCIA MÓVIL
¿Y EL MÓVIL?
1 TIPOLOGÍAS PRESENCIA MÓVIL
TIPOLOGÍA DE PRESENCIA MÓVIL
¿ http://mobile.
(clientes potenciales o actuales)
APPS
(clientes actuales)
¿
1
WEB MÓVIL
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL
2
RESPONSIVE DESIGN
3
RESPONSIVE + WEB MÓVIL
4
DYNAMIC SERVING
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
2
RESPONSIVE DESIGN •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
3
RESPONSIVE + WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
4
DYNAMIC SERVING •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
2
RESPONSIVE DESIGN •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
3
RESPONSIVE + WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
4
DYNAMIC SERVING •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
2
RESPONSIVE DESIGN •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
3
RESPONSIVE + WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
4
DYNAMIC SERVING •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
2
RESPONSIVE DESIGN •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
3
RESPONSIVE + WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
4
DYNAMIC SERVING •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL
1
WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
2
RESPONSIVE DESIGN •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
3
RESPONSIVE + WEB MÓVIL •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
4
DYNAMIC SERVING •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
5
APP NATIVA
TIPOLOGÍA DE PRESENCIA MÓVIL …en el ENTORNOLos MOBILE 5 Criterios son mucho clave…más exigentes que en PC. CONTENIDOS
Duración media de cada sesión de usuario
USABILIDAD
1 min
-CONTENIDOS ARQUITECTURA - INFORMACIÓN PRODUCTOS - SOLICITUD PRODUCTOS - ACCESO OTROS SERVICIOS - SIMPLIFICACIÓN - RELEVANCIA
..pero pasa una hora diaria navegando con su móvil
- COMPRENSIÓN GLOBAL - MECANISMOS AYUDA - ASPECTOS ESTÉTICOS - CLASF. INFORMACIÓN - SEGMENTACIÓN DE MENSAJES
40%
3 h 23 min
ACCESIBILIDAD
No recomendaría una compañía si su web no estuviera adaptada al móvil
- ESTANDAR DE NIVEL AA - ACCESO NAVEGADORES - ACCESO CONEXIÓN BAJA - ACCESO OTROS SERVICIOS - MULTIDISPOSITIVO
FUNCIONALIDAD
CRITERIOS CRITERIOS CLAVE CLAVE
57%
Fuentes: (1) Google pageSpeed Insights 2013 (2) DFKI.2011 (3) Google The Mobile Playbook 2013
- TIPOLOGÍA BÚSQUEDA - CONTACTO - NAVEGABILIDAD - ESTABILIDAD - SOPORTE NAVEGADORES
El 80% usuarios de smartphones sólo usa el 20% de las funcionalida
80/20
FIABILIDAD Y EFICACIA
1 seg
Tiempo máximo de carga que está dispuesto a esperar el usuario.
Prueba a la competencia ante una mala experiencia móvil
- AUSENCIA DE ERRORES - UTILIZ.ESTÁNDARES W3C - SEGURIDAD - RENDIMIENTO - TIEMPO DE DESCARGA…
3 seg
Renderización above the fold recomendada por google
TIPS DE USABILIDAD MÓVIL
Best Practices
CTAs siempre visibles
Fuente: Interflora / AirBnB
0
Best Practices
Botones grandes y visibles
1
Fuente: Linkedin
Piensa en táctil y apóyate en los nuevos estándares
Best Practices
Pocos Mensajes y adaptados a dispositivos en función de las necesidades del cliente (CTAs claros)
Fuente: Indochino / Airbnb
2
Best Practices
Contacto multiplataforma siempre accesible. Tap to chat / Tap to call
Fuente: Fiat
3
Best Practices
Utilizar formularios cortos y sencillos.
4
Fuente: Ticketea / FB
Integración de redes sociales y métodos de pago (Recuerda…sesiones de un minuto!)
Best Practices
Maximizar la experiencia Involucrando al dispositivo
Fuente: Instagram
5
Best Practices
6
Fuente: Nike
Adaptar procesos a mobile Ofrecer atajos y ponerlo fácil
Best Practices
Diseñar para movilidad = guardar estados
Fuente: Wallmart / Hello Bank
7
Best Practices
8
Geolocalización Utilizar el dispositivo para ofrecer un valor añadido
Fuente: El tenedor / 11870
Best Practices
Buscador predictivo y adaptado a mobile
Fuente: B&Q
9
Best Practices
Personalizar experiencia Segmentar contenidos en función del contexto y necesidades
Fuente: Amazon / Kiwi Bank
10
Best Practices
Adaptar las opciones
11
Fuente: Lastminute
a las necesidades y navegación mobile
Best Practices
12
Fuente: Salud Madrid
Aprovechar inputs del sistema operativo (agenda, calendario, notas…)
Best Practices
Incorporar tecnologías nuevas como NFC para ofrecer experiencias únicas
Fuente: App Houseinhand / Trigger
13
Best Practices
Incorporar tecnologías nuevas como NFC para ofrecer experiencias únicas
Fuente: App Houseinhand / Trigger
13
Best Practices
Notificaciones push Información relevante/útil mediante alertas a través de beacons, app, geofences…
Fuente: App Victoria’s Secret
14
EL PROCESO
EL PROCESO Dos procesos independientes pero interconectados en los puntos de: definición, análisis funcional e integración de maquetación.
EL PROCESO
Todo proyecto online se divide en 6 etapas fundamentales
REQUERIMIENTOS Negocio
ANÁLISIS Arquitectura de información
Estrategia, diseño y aprobación
RECOMENDACIÓN WIreframe Prototipado
DISEÑO High Fidelity
IMPLEMENTACIÓN Producción HTML y desarrollo
Implementación
INTEGRACIÓN Y CONTRIBUCIÓN
EL PROCESO 1.REQUERIMIENTOS
Toma de requerimientos de negocio Designación de project manager Identificación de players necesarios Organización y planificación Generación Comité de Seguimiento Calendario de reuniones de seguimiento
EL PROCESO 2.ANÁLISIS
Benchmark. Diseño de arquitectura de información. Flujograma. Recomendación de funcionalidades Foco orientación a objetivos Preparación SEO y directrices de accesibilidad
EL PROCESO 3.RECOMENDACIÓN
Diseño wireframes Prototipado Low Fidelity de todas las interacciones y funcionalidades complejas
Comportamiento y herramientas de testeo de usuarios
EL PROCESO 4.DISEÑO
Diseño High fidelity de todas las pantallas necesarias Adaptación a identidad corporativa Guía de estilo Cambios y aprobación.
EL PROCESO 5.IMPLEMENTACIÓN
Entrega de las plantillas en el formato acordado: HTML, CSS, JS, PHP…
Programación de back end Implementación estrategia SEO
EL PROCESO 6.INTEGRACIÓN Y CONTRIBUCIÓN
Integración plantillas HTML con CMS Testeo multidispositivo Testeo multinavegador Tests de velocidad Optimización Contribución de contenidos Carga de idiomas
GRACIAS
[email protected] /
[email protected] @LFMAG
