Seminario Marketing Mobile - Diseño de una APP con GoodBarber. Pasos imprescindibles del proceso Información y datos estadísticos Caso Práctico de diseño de APP

1. PRODETUR
Mobile Marketing
Almensilla, Mayo2016
formacion@prodetur.es Telf.: 954 486 800

2. PRODETUR
Diseño de una APP
1. Pasos imprescindibles del proceso
2. Información y datos estadísticos
3. Caso Práctico de diseño de APP

3. PRODETUR
Pasos para crear una APP
1.- Diseñar la idea y definir los objetivos de la App
– Resolver un problema o cubrir una necesidad.
– Ventaja diferenciadora.
– ¿Que APP tenemos instaladas? ¿Que nos solucionan?
2.- Estudio de mercado
– Keyword Planner, SemRush
– Mercados IOS, Google Play
– Reseñas, opiniones, descargas.

4. PRODETUR
Pasos para crear una APP
3.- Registro como desarrollador
– Registrarse como desarrollador: Android, iOS o Windows
Phone.
– Persona encarga de publicar las aplicaciones.
– Normativa de publicación: IOS + severa.
4.-Desarrollo de la App
– Buscar Proveedor: especializado, comprobar portfolio,
comunicación fluida.
– Desarrollo propio: GoodBarber

5. PRODETUR
Pasos para crear una APP
5.- Crear un boceto
– Primero en papel, luego si quieres en digital.
– Fundamental para concebir la idea y transmitirla.
– Referencia.
6.-Wireframe & Storyboard
– Wireframing es el proceso de crear una maqueta o
prototipo de la aplicación: www.balsamiq.com
– Storyboard: guión gráfico de la aplicación.Usabilidad: cómo
el usuario navegará a través de la aplicación.

6. PRODETUR
Pasos para crear una APP
7.- Funcionalidades principales
– Investigar como solucionar las funcionalidades más
importantes: Geolocalización, importaciones,
audiovisuales, etc...
8.- Testeo de la APP
– Con GoodBarber a traves de la propia interfaz y con su
App.
– Probar el flujo de pantalla a pantalla.
– Dar a probar a Beta Testers.

7. PRODETUR
Pasos para crear una APP
8.- Mejoras y corrección de errores
– Investigar como solucionar las funcionalidades más
importantes: Geolocalización, importaciones,
audiovisuales, etc...
9.- Testeo de la APP
– Antes de publicar debe estar todo arreglado

8. PRODETUR
Pasos para crear una APP
10.- Posicionamiento ASO
– Optimización de la APP para posicionarla en su mercado.
– Plan de Marketing y captación de descargas.
11.- Publicación en su mercado
– Si es un individuo, toma de tres a siete días. Si es una
empresa, tendrás que esperar de siete a 10 días.
– Preapps: http://www.preapps.com

9. PRODETUR
Sistemas Operativos Mobile
• Android 84,7 % (en países como España las diferencias son
más significativas, donde Android tiene el 90,8 % de la cuota
de mercado.2 )
• iOS 11,7 %
• Windows Phone 2,5 %
• BlackBerry OS 0,5 %
• Otros 0,6 %
• Firefox OS Disponible
• Ubuntu Touch Disponible

10. PRODETUR
Android
• Basado en Linux.
• Diseñado originalmente para cámaras fotográficas
profesionales
• Comprado por Google 2005
• Liberado en el 2008
• Open Handset Alliance: 78 compañías de hardware, software
y telecomunicaciones, dedicadas al desarrollo de estándares,
hasta el punto de ser usado por empresas como HTC, LG,
Samsung, Motorola entre otros.

11. PRODETUR
IOS
• iPhone, el iPad, el iPod Touch o el Apple TV.
• Simplicidad y optimización son sus pilares.
• Es un derivado de Mac OS X, anteriormente
denominado iPhone OS.
• EEUU es donde tienen mayor cuota de dispositivos
(38 %) junto con otros paises anglosajones: Reino
Unido y Australia
• En España tiene poca cuota de mercado: entre 5 y 6
%

12. PRODETUR
Windows Phone
• Anteriormente llamado Windows Mobile.
• Desarrollado por Microsoft.
• Basado en el núcleo del S.O Windows CE.
• Tiene pocas aplicaciones y muy básicas.

13. PRODETUR
Mercados = Store
• IOS: App Store
• Android: Google Play
• Windows Phone: Windows Marketplace for
Mobiles.

14. PRODETUR
Cuota de Mercado Mundial

15. PRODETUR
Cuota de Mercado España

16. PRODETUR
Aplicaciones
• En total existen más de
3,1 millones de
aplicaciones: 1,5 millones
en App Store y 1,6 en
Google Play.
• Muchas de ellas son
aplicaciones zombies,

17. PRODETUR
Descarga de Aplicaciones

18. PRODETUR
Ingresos por Ventas

19. PRODETUR
Apps en España

20. PRODETUR
Cómo descubren los usuarios las
Apps

21. PRODETUR
Apps con mayor Implantación

22. PRODETUR
Apps con mayor Implantación: Solo
SmartPhone

23. PRODETUR
Apps con mayor Implantación: Solo
Tablet

24. PRODETUR
Pago por Apps

25. PRODETUR
Qué necesitas para el éxito de tu App
• Desarrollar un buen producto con un objetivo
definido:
– Branding
– Fidelizar clientes
– Entretener / Juegos
– Solucionar problemas
– Cubrir una necesidad Canal de venta

26. PRODETUR
• Definir un modelo de negocio desde el
minuto cero:
– Publicidad
– Pago por descarga
– Compras in-app (modelo freemium) Suscripción
Ventas desde la propia aplicación Generar bases
de datos de usuarios
Qué necesitas para el éxito de tu App

27. PRODETUR
• Posicionamiento en Mercados/ Stores
• Diseñar una estrategia de comunicación
• Diseñar una estrategia de captación y
retención de usuarios: Fidelización
Qué necesitas para el éxito de tu App

28. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

29. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

30. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

31. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

32. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

33. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

34. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

35. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

36. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

37. PRODETUR
Cuanto cuesta mi App
https://www.cuantocuestamiapp.com

38. PRODETUR
¿Que es Good Barber?
• GoodBarber es un servicio que permite crear una aplicación nativa en iOS
y Android, por uno mismo. Esta herramienta DIY (hazlo por ti mismo) está
desarrollada para personas que no saben cómo codificar, pero que sin
embargo quieren hacer realidad su proyecto de creación una app sin
ayuda externa.
• A partir de una interfaz gráfica, el back office, puedes construir tu propia
aplicación nativa paso a paso.
• Con GoodBarber se crean aplicaciones nativas, es decir, las aplicaciones
son desarrolladas específicamente para iOS y Android, y se pueden
descargar directamente desde la App Store de Apple y la Play Store de
Google.

39. PRODETUR
¿Que es Good Barber?
• GoodBarber es un servicio que permite crear una aplicación nativa en iOS
y Android, por uno mismo. Esta herramienta DIY (hazlo por ti mismo) está
desarrollada para personas que no saben cómo codificar, pero que sin
embargo quieren hacer realidad su proyecto de creación una app sin
ayuda externa.
• A partir de una interfaz gráfica, el back office, puedes construir tu propia
aplicación nativa paso a paso.
• Con GoodBarber se crean aplicaciones nativas, es decir, las aplicaciones
son desarrolladas específicamente para iOS y Android, y se pueden
descargar directamente desde la App Store de Apple y la Play Store de
Google.

40. PRODETUR
¿cómo funciona Good Barber?
1. Creación del diseño general de la aplicación al seleccionar un tema, modo
de navegación y una identidad gráfica. Puedes personalizar tu plantilla
mediante la librería de imágenes proporcionadas.
2. Añadir contenido en tu aplicación. Este contenido se puede crear
directamente desde backend, pero también puede proceder de
plataformas externas tales como WordPress, YouTube, Instagram, etc ...
3. Tras recopilar o crear el contenido, además de perfilar el diseño, puedes
probar la aplicación en un dispositivo móvil y/o una tableta para
comprobar que el resultado es el que esperabas cuando creaste tu
aplicación.
4. El cuarto y último paso consiste en presentar tu app a las tiendas para que
pueda ser descargada por los usuarios.

41. PRODETUR
Ejemplo de Apps
• http://blog.goodbarber.com/es/Showcase_r5.html

42. PRODETUR

43. PRODETUR

44. PRODETUR
Subida de contenidos

45. PRODETUR
Aplicaciones Mobile

46. PRODETUR
Importar contenido

47. PRODETUR
Importar contenidos

48. PRODETUR
Importar Videos

49. PRODETUR
Importar Media

50. PRODETUR
Redes sociales

51. PRODETUR
Redes sociales Multimedia

52. PRODETUR
Redes sociales Audio

53. PRODETUR
Importa y crea eventos

54. PRODETUR
Retransmite en directo

55. PRODETUR
Live streaming mobile

56. PRODETUR
Menús e info

57. PRODETUR
Más posibilidades

58. PRODETUR
Personalización HTML

59. PRODETUR
Ecommerce

60. PRODETUR
Primeros pasos

61. PRODETUR

62. PRODETUR

63. PRODETUR

64. PRODETUR
Add ons

65. PRODETUR
Menu de desarrollo

66. PRODETUR
Menú de desarrollo
1. Escoger un Tema
2. Escoger un menu de navegación
3. Configuración de Header Body
4. Añadir contenido
5. Diseñar Secciones
6. Pantalla de portada
7. Añadir iconos
8. Probar y enviar a las stores

67. PRODETUR
Probar tu app en un dispositivos

68. PRODETUR

69. PRODETUR

70. PRODETUR

71. PRODETUR

72. PRODETUR
Notificaciones Push

73. PRODETUR
Estadisticas

74. PRODETUR
Add ons

75. PRODETUR
Add ons

76. PRODETUR
Crea tu App con Goodbarber

77. PRODETUR
Menú derecho
General Secciones

78. PRODETUR
Lo primero elige el tema

79. PRODETUR
Por ejemplo Budapest

80. PRODETUR
El tema incluye una paleta de colores

81. PRODETUR
El color es importante
• Cambiar el color de un sólo botón de verde a rojo aumentó la
tasa de conversión de un sitio web un 21%:

82. PRODETUR
El color según sexos: Hombre

83. PRODETUR
El color según sexos: Mujeres

84. PRODETUR
Previsualiza para ver como queda

85. PRODETUR
Aplica el diseño

86. PRODETUR
Ya tenemos elegido el tema

87. PRODETUR
Elige un Menu

88. PRODETUR
Con una imagen de fondo
Formato de imagen válido:
• Extensiones permitidas: *.jpeg; *.jpg; *.png;
*.gif
• Tamaño mínimo: 1242 x 2208 px

89. PRODETUR
Diseño del Header ( Cabecera)

90. PRODETUR
Diseño del Header ( Cabecera)

91. PRODETUR
Diseño del Header ( Cabecera)

92. PRODETUR
Diseño del Header ( Cabecera)

93. PRODETUR
Diseño del Body ( Cuerpo)

94. PRODETUR
Diseño del Body ( Cuerpo)

95. PRODETUR
Diseño del Body ( Cuerpo)

96. PRODETUR
Añadir Contenidos

97. PRODETUR
Contenidos > Añadir Sección

98. PRODETUR
Añadir Sección

99. PRODETUR
Añadir Sección

100. PRODETUR
Añadir Contenido de WordPress

101. PRODETUR
Añadir Contenido de WordPress
1. Acceder a tu WordPress.
2. Instalar el Plugin GoodBarber

102. PRODETUR
Añadir Contenido de WordPress
3. Obtener la Api
4.- Añadir la sección en Goodbarber.

103. PRODETUR
Añadir Sección

104. PRODETUR
CMS para crear Mapas

105. PRODETUR
Subir un mapa (archivo .kml)

106. PRODETUR
Añadir Sección: Videos

107. PRODETUR
Añade un SplashScreen
• Pantalla de inicio.
• Normalmente suelen aparecer con una
imagen moviéndose o una barra de progreso.
• Fin estético y de confianza al usuario.
– Titulo
– Bseline
– Fondo ( Imagen)

108. PRODETUR
Añade un Icono para el market

109. PRODETUR
¿Todo listo? Prueba tu APP
• 7 de 7 secciones listas
• Descarga la app de GoodBarber y visualiza tu
APP.

110. PRODETUR
Publica tu APP
• Enviar APP:
– IOS
– Google Play - Android

111. PRODETUR
Notificaciones PUSH
• Las Notificaciones PUSH permiten que las
aplicaciones puedan informar a los usuarios
de nuevos mensajes o eventos sin necesidad
de abrir la app. Como un sms, hacen un
sonido y aparecen en la pantalla del usuario.
Ésta es una gran manera de interactuar con
tus usuarios.

112. PRODETUR
Como Enviar Notificaciones PUSH

113. PRODETUR
Acción tras la notificación de apertura
• "Seleccionar una acción”
– Abrir la aplicación: el usuario llegará a la página
de bienvenida de la app.
– - Abrir un enlace externo: el usuario llegará al
navegador interno de la app, donde se abrirá el
enlace indicado.
– - Selecciona una sección en la app: el usuario
llegará directamente a la sección seleccionada.

114. PRODETUR
Programa el tiempo de envío
• De inmediato o programada.
• Hora local, asi se abre según la hora del
destinatario.

115. PRODETUR
Estadisticas
• Las estadísticas se activarán después de la
publicación de tu app
– Paginas Vistas
– Sesiones Únicas
– Numero de Descargas.
– También podemos usar G. Analytics.

116. PRODETUR
App en varios idiomas

117. PRODETUR
App en varios idiomas
Para ese tipo de diseño, es mejor que sus
usuarios sepan inmediatamente al abrir la
aplicación que varios idiomas están
disponibles, es por eso que le
recomendamos que elija uno de los
siguientes menús de navegación desde el
menú Aplicación > General> Menú:
- Grid
-Slate
-Large Typo
-Typo
- Scratch (sólo si usted cómo codificar
html. Le recordamos que no damos
asistencia técnica cuando se trata de
código externo).

118. PRODETUR
Crear una cuenta de Desarrollador: Apple
• Cuesta 99 USD por suscripción al año.
• Se pueden subir tantas aplicaciones como se
quiera.
• Usa esta web para el alta:
https://developer.apple.com/programs/
• Elegir registro:
– Individual
– Como organización

119. PRODETUR
Crear una cuenta de Desarrollador: Apple
• Empieza tu registro" (Start you Enrollment).
• Introduce tu Apple ID.
• Términos y condiciones llamada "Apple Developer
Agreement".
• Rellena tu información de contacto.
• Revisa toda la información.
• Completa tu compra.
• iniciar sesión en itunesconnect.apple.com

120. PRODETUR
Crear una cuenta de Desarrollador: G. Play
• Son 25 €
• Asociar una cuenta de Gmail.
• Incluye foto y descripción en esta cuenta.
• Empezamos en https://play.google.com/apps/publish/signup
• Conéctate con tu dirección de Gmail.
• Acepta los términos y condiciones generales
• Configura tu pedido.
• Elige el nombre que tendras como desarrollador.

121. PRODETUR
Pagina de acceso

122. PRODETUR
Fin de APP
¿Preguntas?
Jmerchan@mkg20.com