A la hora de construir una App para Infoproductos, en la que se establece una membresía, es muy importante incluir una sección de la App con una "función código" para poder embeber el inicio de sesión a estos cursos. Si ya se dispone de este Membership se puede enlazar directamente el Inicio de sesión.
Para nuestro ejemplo, te vamos a mostrar cómo creamos una sección de membresía con nuestra Tecnología de Funnels y embeberemos el inicio de sesión del membership.
En el siguiente vídeo te mostramos el gran valor que aporta contar con una APP en el ecosistema de venta de tus Infoproductos.
Construcción Área Membership
¿Qué es un área de tipo Membership?
Es un tipo de página web que alberga contenidos que sólo serán visibles para los clientes que les has dado un acceso específico, por ejemplo, una subscripción de pago a un curso online que está formado por distintos vídeos, como es el caso de nuestro ejemplo.
Hemos creado un Funnel de ventas para una instructora de Yoga, Catherine Willgood. Éste se compone de cuatro pasos.
1- En el primer paso del Funnel se ofrece la posibilidad de comprar un curso de Introducción al yoga. Se trata de una serie de vídeos que sólo serán accesibles a través de la compra de la membresía.
2- Cuando se añade el Curso de yoga al carrito, en la página de resumen de compra, aparece la opción de añadir también el ebook de alimentación saludable, con sólo un click.
3- En el tercer paso del Funnel, cuando se pulsa el botón de comprar en la página de "resumen de compra", se redirige al comprador a una página en la que se le informa que su pedido está a punto de procesarse, pero antes, se le ofrece la oportunidad de añadir el Curso Avanzado de yoga, a un precio muy especial. Esto se trata de un Up-selling, es decir, una estrategia de ventas que pretende incentivar a los clientes a adquirir una versión más sofisticada o moderna del producto que originariamente pretendian comprar.
4- El cuarto y último paso del funnel lo constituye la página de gracias, dónde además de agradecer la transacción realizada, se ofrece la descarga de la app, informando de todas las ventajas y beneficios que se pueden obtener.
De esta forma, los pasos del Funnel, quedan configurados de la siguiente manera en el constructor:
Las páginas que conformarán el Membership las construiremos a partir de éste cuarto paso. Por lo tanto, añadiremos un nuevo paso que lo constituirá la página de presentación del Curso de introducción al yoga.
Te lo mostramos todo en el siguiente video:
Construcción de la APP
Primeros Pasos
Una vez en la pantalla de inicio de Scoreapps, en el menú lateral izquierdo encontrarás el icono con forma de 'a' del constructor de apps. Ahí podrás crear una nueva aplicación y darle nombre.
Una vez estés en la pantalla de administración de Apps, haz clic en 'Nueva App':
Una vez hayas creado y puesto nombre a tu app, te aparecerá una pantalla en la que podrás elegir entre varias plantillas.
Son diseños predefinidos para que no partas de cero pero en realidad, después podrás modificar absolutamente todo. De hecho, podrás cambiar la plantilla que escojas ahora. Y si no te encaja ninguna, haz clic en 'Blank Template' para empezar de cero a diseñar tu App.
Para este ejemplo escogeremos una plantilla en blanco
El proceso de creación de Aplicaciones con Scoreapps es muy sencillo. Sólo tienes que ir siguiendo los pasos del constructor.
Estos pasos están representados en la barra de progreso que tendrás siempre a tu disposición en la parte superior del constructor y que te permitirá fácilmente navegar entre las distintas páginas, con sólo clicar encima del icono.
Primer paso. Diseño de la App
En la pestaña Diseño, encontrarás todas las opciones relacionadas con la información del menú y de la pantalla inicial de tu App.
La sección Opciones de Pantalla de Inicio muestra las opciones disponibles según el estilo de navegación (Layout) escogido. Debes tener en cuenta que cada estilo de navegación o Layout dispone de sus propios ajustes de configuración.
Menú de elección del Layout
Para este aplicación, hemos escogido el layout 95. Este diseño de layout muestra el contenido de la primera función que hemos establecido en el menú, con la posibilidad de establecer una imagen de cabecera. Para esta disposición, resulta especialmente atractivo mostrar el logotipo de la compañía. Un botón tipo hamburguesa desplegará lateralmente un menú dónde se mostrarán el resto de funciones.
Como puedes observar, la pantalla inicial de nuestra aplicación muestra directamente la presentación de Catherine en una página personalizada. Cómo configurar esta función lo veremos más adelante.
Estos son los parámetros de configuración que podrás ver en el constructor para este layout en concreto.
- Visibility of logo: puedes establecer si quieres que se vea o no tu logotipo.
- Ancho sidebar: puedes establecer el tamaño del menú desplegable. Puedes configurarlo en base a un porcentaje respecto la pantalla o un ancho fijo de píxeles.
- Logo URL: en este espacio deberás pegar el link que se generará en la herramienta para subir imágenes. Ésta se encuentra en el menú lateral izquierdo de tu pantalla. Para entrar deberás hacer clic en el siguiente icono.
Te aparecerá la siguiente pantalla. En ella, sólo deberás arrastrar la imagen que deseas subir y automáticamente se generará el link.
El tamaño de imagen no debe superar los 500KB. Cuánto menos pesen tus imágenes, más rápida será la carga de las imágenes y mejor será la experiencia de usuario al navegar por tu app.
La sección que vas a ver a continuación, te ayuda a elegir una imagen para la pantalla de inicio que se vea bien en todos los dispositivos y ratios de pantalla. Usa la herramienta overlay (sombreado) para comprobar si la información importante de tu diseño queda dentro de las zonas seguras recomendadas en función de la orientación de pantalla para la que está diseñada tu App.
Asegúrate que los elementos que consideres importantes, queden dentro de la zona sin sombrear.
Para saber cómo diseñar bien las imágenes puedes descargar la plantilla con las medidas, disponible tanto en formato .png como en .psd.
Veamos ahora un pequeño vídeo de 5 minutos para aprender a diseñar la Pantalla de Inicio de la Aplicación:
Escoge el idioma en función de tu país y la moneda de tu aplicación. Se utilizará para diferentes aspectos, como la zona horaria y el símbolo de la moneda.
Para cambiar la fuente de tu app puedes seleccionar una de las que aparecen en el menú del constructor, o importar una desde Google Fonts. Para hacerlo es tan sencillo como escribir el nombre de la fuente.
Segundo paso. Colores
Elige los colores principales de la aplicación.
- General: aplica al fondo (si no hay una imagen específica) y al texto general.
- Inicio: aplica al menú de navegación y a sus elementos.
- Cabecera: aplica a la cabecera de navegación de la app.
- Tarjeta: aplica a los elementos mostrados en formato tarjeta.
- Lista: aplica a los elementos mostrados en formato lista.
Además, si dispones de conocimientos de programación Web, en la parte inferior del panel encontrarás un espacio para poder introducir código CSS y así, personalizar al 100% los elementos de tu App.
Una vez diseñada la pantalla inicial y escogidos los colores principales de la Aplicación, vamos con la parte funcional.
Las plantillas incorporan de forma predeterminada algunas funciones que consideramos interesantes para cada sector. Puedes verlas en el carrusel de funciones. Pero si quieres eliminar alguna, sólo tendrás que darle a la “X”.
Para que veas lo sencillo que es incorporar nuevas funciones a tu App, te mostramos este gif donde podrás ver cómo realizamos el proceso.
"The Coach" y "The Course" (Página Personalizada)
Para esta app hemos configurado una página de presentación de la instructora y del curso de yoga que ofrece.
Esta funcionalidad te ofrece múltiples opciones para crear una página informativa.
Puedes escribir un artículo con una imagen, puedes publicar una galería de fotos, puedes publicar un vídeo directamente en esta página y puedes agregar botones de llamada o un enlace a cualquier sitio web externo.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función "
Página Personalizada".
"Yoga trainning" (Enlace)
En esta sección hemos embebido el acceso al curso de Introducción al Yoga que hemos creado al principio del video. Como la página creada es de tipo responsive, en las plataformas móviles tiene una perfecta visualización. De esta forma, los usuarios podrán seguir el curso desde cualquier lugar e incrementar así, las tasas de éxito y de finalización al curso.
Para opder realizar esta acción hemos utilizado la función "enlace". Es muy sencilla de utilizar, te lo mostramos en el siguiente video.
Recuerda que el link que se tiene que embeber es el de la página de Inicio de Sesión o Acceso a miembros.
"Weekly Masterclass" (Página Personalizada)
En esta sección, Catherine Willgood ofrece contenido de tipo semanal sólo para los usuarios de su app.
La función que hemos utilizado es la de "Página Personalizada", la misma que hemos utilizado al principio en la sección "The Coach" y "The Course".
"Social Wall" (Muro Social)
El objetivo de esta sección es generar comunidad y engagement. Desde esta sección sus usuarios podrán postear comentarios, compartir experiencias con otros usuarios o abordar cualquier consulta con el mundo del yoga.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Muro Social"
"Upcoming events" (Calendario eventos)
Desde esta sección, Catherine Willgood mantiene informados a sus usuarios de todos sus eventos o webinars.
Para construirla hemos utilizado la función "Calendario de eventos".
En este video puedes ver paso a paso cómo configurar esta función.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Calendario Eventos"
"Yoga Playlist" (Audio & Music)
La app también cuenta con una playlist de música de yoga. De esta forma los usuarios de Catherine pueden disfrutar de música exclusivamente seleccionada por ella.
Para poder configurar esta función, hemos seleccionado "Audio & Music".
Hemos creado cuatro playlists: "Yoga playlist", "Meditation playlist", "Sounds of Nature" y "Tibetian Bells".
Para conocer mejor cómo configurar esta función, puedes ver el siguiente video paso a paso:
Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Audio & Music"
"SHOP" (Tienda / Delivery)
Desde esta sección Catherine Willgood vende productos con su branding. Los usuarios de la app podrán comprar de forma rápida y sencilla todos los articulos que puedan necesitar para sus ejercicios de yoga.
Esta función te permite crear una o varias tiendas, poner a la venta todos tus productos por categorías, mostrando los precios, las tallas, opciones de productos, etc. y personalizar las opciones de venta, entrega o envío. Asimismo, podrás configurar varias opciones de pago y descuentos.
En nuestra app, primero hemos configurado la tienda. En este caso, se trata sólo de una tienda online y no dispone de una dirección concreta. Si se diera el caso contario, esta tienda estaría geolocalizada y su ubicación se mostraría en el mapa (su funcionamiento requiere añadir una clave API de Google Maps).
En la sección de "Categorías", hemos establecido las siguientes:
Y por último, te mostramos cómo se ve en la pantalla del constructor, todos los productos una vez añadidos.
Para aprender paso a paso cómo configurar todas opciones de la función "tienda/delivery", te lo mostramos en el siguiente vídeo.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función
“Tienda/Delivery”.
"Newsletter" (Temas)
Esta sección permite a los usuarios de Catherine Willgood subscribirse a su newsletter para mantenerse informados de todo lo que les interesa.
La función que hemos utilizado es "Temas".
Hemos creado una descripción, en este caso, acompañada de una fotografía.
Y luego hemos establecido los distintos temas de interés a los que se pueden subscribir los usuarios.
Para aprender paso a paso cómo configurar todas opciones de la función "temas", te lo mostramos en el siguiente vídeo.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función “Temas”.
"Yogui Food" (Carpetas)
Hemos creado también una secció dedicada a la alimentación yogui con recetas y consejos alimenticios exclusivos para usuarios de la app.
Hemos utilizado una función "Carpetas". Esta función tiene como objetivo contener y organizar dentro de ella otras funciones. Es decir, que a la función carpeta que hemos llamado "Yogui Food" va a contener otras funciones, en este caso, páginas personalizadas, que recibirán el título de cada una de las recetas.
Aquí te mostramos un video sobre la función Carpetas.
Clica en este enlace y podrás ver un artículo paso a paso explicando la función “Carpetas”.
La aplicación cuanta con un formulario de contacto para que Catherine Willgood pueda resolver cualquier tipo de duda o consulta de los usuarios de su comunidad.
Para crear la sección de Suggerencias, hemos utilizado la función de Formulario.
Para obtener un formulario como el de la imagen, hemos seguido la siguiente secuencia de campos.
Si quieres aprender cómo utilizar esta función paso a paso, visualiza el siguiente video.
Haz clic en este enlace y podrás ver un artículo paso a paso de la función “Formulario”
"Share" (Share app)
La app también cuenta con una sección, a través de la cual, los usuarios pueden compartir la aplicación de forma rápida y sencilla con familiares, amigos, etc. generano así, una mayor viralización de la app.
La función "Share app" permite a tus usuarios compartir la App con sólo dar a un botón. Puedes configurar el mensaje y el texto del botón, para una experiencia más personalizada.
Si quieres aprender cómo utilizar esta función, puedes visualizar el siguiente video.
"Instagram" (Enlace)
Esta sección es muy sencilla. Para integrar tu página de Instagram en la app, hemos utilizado la función enlace. Sólo tendrás que copiar el enlace de tu página de Instagram en el campo de nuestro constructor y tu página quedará conectada.
Los mensajes o notificaciones Push son el sistema de marketing más eficiente que existe en la actualidad. Mientras que de cada 10 emails enviados 8 caen en las bandejas de SPAM, con los Mensajes Push ocurre lo contrario... el 99% son leídos.
Añadir esta potente herramienta a tu App es muy sencillo:
1- Debes incluir en la Aplicación la función "Notificaciones Push"
2- Para poder hacer uso de las Notificaciones Push, es necesario que la Aplicación en cuestión se encuentre publicada para las versiones nativas Android y/o iOS.
Una vez que la aplicación haya sido publicada en App Store y/o Google Play, podrás enviar notificaciones directamente desde la propia función "Notificaciones Push".
Clica en este enlace y podrás ver un artículo, paso a paso, de la función "
Notificaciones Push"
Paso 4. Icono y ajustes de la Aplicación
Desde aquí puedes elegir el icono que se mostrará en la pantalla del dispositivo del usuario, así como el diseño del botón “volver”.
Si quieres enviar notificaciones push, aquí es donde puedes personalizar algunos aspectos, como el icono o el color de fondo.
Esta herramienta te ayudará a elegir una imagen de inicio que será compatible con todos los tamaños de pantalla de los diferentes dispositivos. Ésta se verá cuando se inicie la aplicación mientras se está cargando.
Paso 5. Avanzado
Si lo deseas, puedes monetizar tu aplicación agregando anuncios publicitarios o anuncios intersticiales que se mostrarán a los usuarios de tu aplicación. Para ello deberás configurar el sistema de publicidad Admob.
Publicación de tu App
En función de Plan (Starter, Business, Growth o Reseller) dispondrás de distintos tipos de Publicación:
- Versión Nativa Android.
- Versión Nativa iOS.
- Web app HTML5.
- Modo PWA (Progressive Web App).
Para publicar la versión nativa de tu App en Appstore o en Google Play, necesitas un plan Business, Growth o Reseller, mientras que la versión Web App y PWA puedes publicarlas con un plan Starter o incluso durante el Trial gratuito de 14 días.
Si has seguido la guía hasta aquí ya deberías tener lista una primera versión de tu Aplicación. Recuerda que si tienes cualquier duda puedes consultar nuestro Centro de Ayuda o escribir al equipo de Soporte (soporte@scoreapps.com)