Mejores prácticas de UX y UI de los programas de recomendación

Esta publicación de blog recopila las mejores prácticas e inspiraciones para diseñar programas de referencia UX y UI para sitios web y dispositivos móviles. Cubriremos todo el viaje del cliente desde los banners promocionales, las páginas de destino de referencia, compartir los códigos de referencia, recibir recompensas de referencia y canjearlos. Escribimos esta publicación de blog basándonos en la interfaz de usuario de las plataformas de comercio electrónico de DTC con mejor desempeño (en términos de ingresos) (que verá mencionada a lo largo de la publicación).

Esperamos que esta guía lo ayude a rediseñar su plataforma para incluir un programa de referencia o mejorar su interfaz de usuario existente. Si desea aprender a diseñar las reglas de su programa de referencia, le recomendamos esta publicación de blog.

Nota: A lo largo de este artículo, llamamos a la persona que recomienda a un amigo "recomendador" o "defensor" y a la persona a la que refieren, "árbitro" o "amigo recomendado".

Nota: Todas las capturas de pantalla de escritorio se realizaron en Mac, Chrome y todas las capturas de pantalla móviles se realizaron con la resolución de iPhone X en Chrome.

¿Cómo asegurar la mejor UX en un programa de referencia de clientes?

Aquí hay una lista de verificación rápida de consejos de UX que puede seguir mientras crea su solución de referencia. Para obtener instrucciones más detalladas con ejemplos, siga leyendo.

1. Cree una página de destino de referencia separada.
2. Agregue un título pegadizo y una copia.
3. Explicar las reglas y los beneficios del programa.
4. Agregue imágenes de marca y de valor de ahorro.
5. Agregue un formulario para permitir que los clientes participen fácilmente en el programa de recomendación.
6. Permita la personalización del código de referencia en función del nombre del remitente.
7. Proporcione múltiples opciones para compartir.
8. Proporcione una plantilla de mensaje de referencia pero permita la personalización.
9. Diseñe mensajes de éxito y error para compartir.
10. Deja clara tu llamada a la acción.
11. Incluya preguntas frecuentes y términos y condiciones en su página de destino de referencia.
12. Añadir testimonios de clientes.
13. Anuncie su programa de referidos a través de todos los canales y puntos de contacto disponibles.
14. Envíe un mensaje a los referidos potenciales directamente.
15. Cree una página de destino para los amigos referidos.
16. Diseñe notificaciones de progreso para los remitentes y permita que los remitentes realicen un seguimiento del progreso de las referencias.
17. Haga que las recompensas por recomendación sean fáciles de encontrar y obtener.

1. Cree una página de destino de referencia

Su página de inicio de referencia debe ser el centro principal para la información de su programa de referencia. Debe explicar todo lo que los clientes deben saber al respecto y convertir a posibles defensores. Debe usarlo como el principal centro de referencia vinculado en su menú o banners publicitarios. También debe vincularlo en sus mensajes. La página de destino debe incluir un formulario que permita a los promotores capturar y compartir enlaces de referencia. Aquí hay algunos consejos para aprovechar al máximo una página de destino de referencia:

Agregue un título y elementos visuales atractivos

El título de su página de destino debe ser simple y explicar cuáles son las reglas del programa. Estos son algunos ejemplos de titulares pegadizos que puede utilizar:

• "Recomiende a un amigo y gane recompensas nunca antes vistas"
• "Comparte el amor"
• “Consigue una X gratis para ti y tus amigos”
• “Corra la voz y obtenga un descuento”
  

Ejemplo: el título de la página del programa de recomendaciones de Harry es corto y llamativo y contiene el beneficio: “No dejes atrás a tus amigos. Invita a amigos y gana productos”.

Explicar los beneficios y las reglas del programa.

Como lo más probable es que sus clientes participen en el programa para obtener los beneficios que ofrece, comience de inmediato explicando los beneficios de participar en el programa tanto para los recomendadores como para los amigos recomendados. Debe explicar los tipos de recompensas que ambas partes pueden obtener y el valor de las recompensas, especialmente porque los árbitros no están familiarizados con su marca y es posible que no sepan el valor de las recompensas, especialmente si ofrece sus productos como recompensas.

Ejemplo: Omsom tiene una página de programa de referencia muy simple que explica claramente los beneficios tanto para el referente como para el árbitro.

Otra parte es hacer que las reglas del programa sean fáciles de entender y seguir. ¿Qué deben hacer los defensores y los amigos invitados para ganar el incentivo? Si tiene exclusiones o más detalles, colóquelos en la página, pero debajo de las reglas generales, para que los conceptos básicos del programa sean fáciles de entender.

Ejemplo: Trunk Club explica las reglas del programa de forma breve pero clara en su página de inicio.

Incluya preguntas frecuentes o términos y condiciones en su página de destino de referencia

Los clientes generalmente tendrán algunas preguntas antes de registrarse en su programa de referencia. Agregue una sección para algunas preguntas frecuentes (puede seleccionar algunas preguntas clave, si prefiere crear una página de términos y condiciones separada) para proporcionar respuestas listas para sus posibles defensores.

Ejemplo: Ted Baker tiene un enlace a sus Términos y condiciones en su página de inicio de referencia.

Agregar testimonios

Los testimonios son una gran adición a cualquier página de destino. Aunque no se ve a menudo en las páginas de destino de referencia. Si puede mostrar a los clientes alguna prueba social, estarán más dispuestos a unirse a su programa o comprarle por primera vez. Esto es especialmente importante si envía la página de destino de referencia a los amigos referidos, que no conocen la marca.

2. Agregue un formulario para compartir referencias

Si desea obtener la mayor cantidad de referencias posible, debe hacer que sea fácil unirse y participar en su programa. Solicite a los posibles remitentes solo que completen información básica, como su nombre y dirección de correo electrónico. No incluya demasiadas preguntas adicionales u opciones que realmente no necesita para ejecutar su programa. Esto lo ayudará a convertir mejor a los clientes interesados ​​en defensores.

Ejemplo: Lulus ofrece un formulario simple, al lado del cual se explican brevemente las reglas del programa de referencia nuevamente, como recordatorio.

Permitir la personalización del código de referencia

Si usa códigos de referencia o enlaces de referencia, permita la personalización de códigos o enlaces (por ejemplo, KATE-10 o www.domain.com/kate-10). Lo hará más compartible, más fácil de recordar y más probable que sus referentes lo agreguen a su publicación en las redes sociales, por ejemplo. Tener este tipo de códigos o enlaces ayuda a tus amigos a identificar con un mínimo esfuerzo cognitivo que se trata de una invitación de un amigo.

Ejemplo: Pretty Little Thing crea códigos de referencia personalizados a partir del nombre y apellido del remitente.

Proporcione múltiples opciones para compartir

Proporcione muchas opciones para compartir en función de la demografía y las preferencias de su audiencia. Si prefieren usar las redes sociales en lugar de los correos electrónicos, proporcione opciones para compartir el enlace de referencia o el código a través de las redes sociales de forma nativa. Si tiene su programa de referidos en la aplicación, use la función para compartir integrada para las aplicaciones móviles para usar todas las opciones que el móvil suele ofrecer. De esta manera, sus referentes tendrán acceso a su libreta de direcciones telefónicas, listas de correo electrónico y cuentas de redes sociales de inmediato. También ayudará con la experiencia del usuario, ya que saben cómo funciona esta funcionalidad.

Recuerde proporcionar enlaces relevantes para dispositivos móviles y de escritorio. Si envía un enlace a un dispositivo móvil, debería abrir su aplicación o tienda de aplicaciones, si está en una computadora de escritorio, debería guiar a los usuarios al sitio de la computadora de escritorio. Puedes hacerlo, por ejemplo, usando Branch. Vea cómo Shopmark usó Branch para crear enlaces de referencia relevantes en todos los canales.

Ejemplo: Summersalt ofrece múltiples opciones para compartir enlaces de referencia: por correo electrónico, SMS, Facebook, Messenger, Twitter o simplemente copiando y pegando el enlace.

Prepare una plantilla de mensaje de referencia lista pero permita la personalización

En algunos casos, es mejor proporcionar un mensaje preescrito para alentar a los posibles defensores a enviar invitaciones a sus amigos. Esto facilitará que los remitentes envíen los mensajes de referencia. Sin embargo, debe permitir que los remitentes cambien o personalicen los mensajes si no les gusta la copia preescrita.

Cuando se trata de la copia del mensaje de referencia, debe hacerlo un poco más informal y personal para que suene como si el remitente lo hubiera escrito él mismo. Debes incluir el nombre del remitente y el amigo recomendado para personalizarlo un poco. Debe ser breve, directo al grano, que explique un poco sobre la marca y su producto, además de explicar qué hay para ellos (un descuento) y cómo obtenerlo (use el código de referencia). También debes incluir un CTA visible para que el amigo referido no tenga que pensar mucho en dónde hacer clic para ver la oferta.

Ejemplo: Ausente tiene un breve formulario de referencia que solo requiere la dirección de correo electrónico del amigo recomendado y tiene un mensaje preescrito (que se puede personalizar). El mensaje es breve e informal y explica el valor del producto, el contexto y la recompensa que pueden obtener gracias al enlace de recomendación que recibieron.

Así es como se ve el correo electrónico de referencia una vez enviado al amigo recomendado:

Diseñe un mensaje de éxito y error para compartir

Muestra un mensaje de éxito si el código de referencia se envió con éxito o se copió al portapapeles.

Ejemplo: Omsom muestra un mensaje de éxito si una referencia se envió con éxito. También alientan al remitente a recomendar a más amigos allí.

Por otro lado, también deberías mostrar un mensaje de error si algo sale mal. Por ejemplo, si el amigo ya fue referido por el referente o ya es cliente y no cumple con las condiciones del programa.

Deja clara la llamada a la acción

Su formulario requerirá algún tipo de CTA que enviará el mensaje de referencia a los amigos referidos. Todo lo que se encuentre en la página de destino de su programa de referidos debe conducir a la llamada a la acción. Una llamada a la acción de referencia debe llamar la atención e invitar a las personas a hacer clic. Ponga el texto en negrita, subrayado o en un color diferente. Algunos diseños agregan aún más énfasis al agregar flechas que apuntan a la CTA.

Cuando se trata de la copia de CTA, cuantas menos palabras se usen, mejor. Algunas ideas para el texto de CTA incluyen: "Únase a nuestro programa", "Comience a compartir ahora", "Obtenga su primera recompensa", "Regístrese", "Únase ahora" o "Comience a compartir".

Ejemplo: Lulus tiene un simple "enviar correo electrónico" de CTA ya que la forma principal de compartir el enlace de referencia es por correo electrónico.

Seraphine tiene un lindo CTA "Comparte el amor" en su página del programa de referencia.

3. Promociona tu programa de referidos

Un programa de referidos no sirve de nada si sus clientes no lo conocen. Puede, por ejemplo, agregar un widget (similar al widget de chat) en todas las páginas que solicite a los usuarios que recomienden la marca a sus amigos. Aquí hay algunas otras opciones para una excelente UX de referencia:

Anuncie el programa en su sitio web o aplicación móvil

Piense en agregar pancartas a su página de inicio, un enlace en su menú, información al respecto en la cuenta del cliente (cabina), o escribir una publicación de blog o un comunicado de prensa para correr la voz. No solo debe promocionarse en una página de destino que nadie conoce. Debe ser parte de su oferta principal, visible directamente desde la página de inicio en el sitio web y la aplicación móvil en todas las páginas hasta las páginas posteriores al pago y los correos electrónicos de agradecimiento posteriores a la compra.

Ejemplo: Pretty Little Thing tiene un enlace a su programa de referencia en la cuenta del cliente.

Haverdash tiene un enlace para recomendar a un amigo en su menú principal en el sitio web.

Trunk Club tiene su página de inicio del programa de referencia en el pie de página de su sitio web.

Anuncie su programa de referencia en las redes sociales

Piense en publicitar su programa de referencia en las redes sociales, especialmente si tiene una gran base de seguidores allí. No le costará casi nada y puede atraer a más participantes.

Anuncie su programa de referencia a través de correos electrónicos

Puede agregar su programa de referencia al pie de página de todos sus correos electrónicos o como un banner para todos los correos electrónicos. También puede agregarlo a ciertos correos electrónicos. Por ejemplo, correos electrónicos de reenganche, confirmación de compra, correos electrónicos de agradecimiento posteriores a la compra o boletines informativos.

Ejemplo: Ausente agrega el enlace "Recomendar a un amigo" al correo electrónico del carrito abandonado.

Envíe un mensaje a los referidos potenciales

Otra forma de publicitar su programa de referencia es enviar un mensaje directamente a los referidos potenciales. Puede informarles sobre su programa de referencia y animarlos a participar en él. Puede hacerlo inicialmente, cuando inicie el programa, así como enviar recordatorios si aún no han participado.

En cuanto al diseño del mensaje, debe comenzar con un título conciso que explique de qué se trata el mensaje. Incluir los beneficios directamente en el título aumentará las tasas de apertura y evitará algunos informes de spam.

Luego, debe explicar por qué los está contactando (para informarles sobre el programa, para recordarles sobre el programa), de qué se trata el programa (beneficios exactos, recompensas), cómo funciona (cuáles son las reglas principales del programa) y llévelos a una llamada a la acción breve, por ejemplo, "Más información", que los dirige a la página de destino de su programa de recomendaciones. También puede agregar un código de referencia o enlace directamente en el mensaje para que la persona que recomienda pueda copiarlo y enviárselo a sus amigos sin tener que ir a su página de destino. Esto acortará la cantidad de pasos que deben seguir para invitar a amigos. No olvide vincular su página de destino o la página de términos y condiciones en algún lugar del mensaje, ya que sus clientes necesitan tener acceso a las condiciones exactas de la oferta.

Ejemplo: Harry envió un correo electrónico anunciando su programa de referencia que establece claramente el beneficio para el remitente.

Home Chef envía un correo electrónico muy breve para promocionar su programa de recomendación, pero tiene un CTA muy convincente "Obtenga un crédito de $35" que enfatiza el beneficio para las personas que recomiendan.

4. Cree una página de destino para los amigos referidos

Debe decidir dónde quiere que aterricen los amigos referidos después de hacer clic en el enlace/código proporcionado por los defensores. Hay un par de opciones. Puede dirigirlos a la página del programa de referencia general donde explica las reglas del programa. También puede dirigirlos a una página del programa de recomendación diseñada específicamente para los amigos recomendados, explicando las reglas desde su perspectiva (enfocándose en cómo pueden obtener su recompensa) y mostrando sus productos. También puede dirigirlos a su oferta mediante un enlace a su página de inicio o a las páginas de sus productos.

Esta última es la mejor opción de todas porque mostrará su oferta y hará que los árbitros estén un paso más cerca de completar la compra. Sin embargo, si elige ese escenario, recuerde agregar los términos y condiciones del programa de recomendación en el mensaje de recomendación que les envíe. Para facilitar el canje de recompensas, es mejor si el enlace a su oferta es un enlace profundo que también agrega el código de referencia a su cesta para que no tengan que recordar copiarlo o simplemente convertir su incentivo en una promoción autoaplicada. (si siguen ese enlace). Aclare entonces en el mensaje de referencia que la oferta se aplicará solo si siguen el enlace en ese mensaje y completan el pedido en la misma sesión.

Ejemplo: Pretty Little Thing ofrece una página de destino separada para los amigos referidos donde aterrizan después de hacer clic en el enlace del correo electrónico. Como la recompensa por recomendación es una participación en el sorteo, el amigo recomendado debe reclamarla completando un formulario.

Seraphine ofrece una página de inicio separada para los amigos referidos que llegaron a través del enlace de referencia. Piden la dirección de correo electrónico del amigo recomendado, luego muestran el código de descuento y un par de enlaces que los llevarán al catálogo de productos.

{{LIBRO ELECTRONICO}}

{{ENDEBOOK}}

5. Diseñar notificaciones de progreso para los referentes

Al igual que cualquier campaña de marketing, es importante mantener a los clientes comprometidos y entusiasmados durante toda la campaña. Debe mantener informados a sus defensores sobre el progreso de sus referencias. Puede hacerlo enviándoles notificaciones cada vez que ocurra algo en el proceso de referencia. Por ejemplo, si el amigo referido realizó una compra utilizando el código o enlace de referencia. También debe informar a los defensores una vez que reciben incentivos, hacerles saber cómo canjearlos y cuánto tiempo son válidos.

Ejemplo: Haverdash envió una campaña de correo electrónico cuando introdujeron una entrada de sorteo por tiempo limitado para los referentes y árbitros.

Deje que los remitentes sigan su progreso

Si permite múltiples referencias y ofrece recompensas por cada referencia, sería muy útil para los remitentes ver su progreso. Por ejemplo, cuándo enviaron un enlace de referencia, a quién, se canjeó, etc. También puede permitirles enviar un recordatorio a sus amigos que aún no han canjeado la recompensa. De esta manera, les permite administrar sus referencias y evitar confusiones sobre el estado de sus referencias. Ellos sabrán exactamente a quién recomendaron ya quién aún no.

Ejemplos: Eatsy ofrece una página en su aplicación móvil que muestra el estado de todas las referencias realizadas por un cliente y les permite enviar recordatorios a los amigos que aún no han utilizado la oferta. También muestra la cantidad de incentivos que están disponibles para el defensor.

Morning Brew muestra qué recompensas se pueden obtener por recomendar a más amigos y qué tan lejos estás en tu viaje para pasar al siguiente nivel:

Lulus proporciona un botón simple con estadísticas de las referencias en su página de referencia (no es necesario iniciar sesión, extraen las estadísticas una vez que proporciona su dirección de correo electrónico).

Mizzen+Main ofrece un seguimiento del progreso de las referencias una vez que intenta recomendar a otro amigo e inserta su dirección de correo electrónico en la página de referencia (similar a Lulus pero sin tener que presionar ningún botón y está en la página, no en una ventana emergente, también da más información que Lulus).

6. Haz que las recompensas sean fáciles de encontrar

Lo mejor es ofrecer un lugar donde los remitentes puedan encontrar sus recompensas. Una opción es ofrecer una página de seguimiento de referencias dedicada, como se mencionó anteriormente. Otra es ofrecer una cabina de clientes, donde los clientes pueden realizar un seguimiento de todos sus incentivos, también los que no están relacionados con referencias. Es especialmente importante si las recompensas tienen una fecha de vencimiento más larga o si permite múltiples referencias y los remitentes pueden obtener múltiples recompensas.

Ejemplo: H&M ofrece una cabina de clientes, donde los clientes pueden encontrar su saldo de puntos de fidelidad, descuentos disponibles, cupones únicos y un programa de recomendación.

Aquí está su cabina de cliente en la aplicación móvil:

Diseñe la vista de pago para códigos de referencia

Si ofrece un código de cupón o una tarjeta de regalo como recompensa por referencia, puede consultar nuestra guía de prácticas recomendadas de IU de promociones de cupones cuando se trata de la UX y la IU para las vistas de cesta y pago. Hemos cubierto el diseño y la ubicación de la caja de cupones, los mensajes de error y de éxito para las vistas en dispositivos móviles y sitios web. Si solo usa códigos de referencia, asígnele el nombre "código de referencia" y, si ambos, puede nombrarlo cupón/código de referencia o un código de descuento.

Ejemplo: Ted Baker ofrece un cuadro separado para el código promocional y para el código de referencia.

Esto es lo que aparece si hace clic en "¿Ha sido recomendado por un amigo?" botón:

Después de ingresar el nombre del remitente, el formulario le pide que proporcione su dirección de correo electrónico para obtener el código de descuento.

Si ofrece un descuento de carrito, debe agregarlo a la cesta automáticamente y asegurarse de que se mencione en los mensajes que el descuento se agregará solo si se cumplen ciertas condiciones, por ejemplo, solo si un cliente inicia sesión con el correo electrónico referido o si completan su pedido siguiendo el enlace que recibieron de su amigo.

Si ofreces otro tipo de recompensa, asegúrate de explicar a los clientes cómo reclamarla tanto en los términos y condiciones o en las preguntas frecuentes del programa de referidos como en las notificaciones de recompensas.

Resumen

Espero que esta lista de mejores prácticas de UX lo ayude a comenzar a diseñar su sitio web y dispositivo móvil para programas de referencia o mejorar su diseño actual. También hemos creado una guía sobre cómo crear programas de recomendación efectivos que pueden ayudarlo a diseñar el programa de recomendación en sí.

{{CTA}}

¿Listo para llevar sus programas de recomendación al siguiente nivel?

Empezar

{{ENDCTA}}