Introducción al diseño UX/UI

Fundamentos aplicados en campañas digitales

Índice
- Introducción
- ¿Qué es una campaña digital?
- Puntos clave para la definición de objetivos.
- Benchmark express.
- Funnel de conversión.
- Audiencias.
- Métricas y KPI.
- Encuesta concepto creativo.
- Wireframes, puntos clave a tener en cuenta para el diseño.
- Wireframe landing page desktop.
- Wireframe landing page mobile.
- Anatomía Link Ad.
- Wireframe Link Ad.
- Template de informe.
- Enlaces de interés.
Introducción
User Experience y User Interface
User Experience y User Interface
Las dos caras de una moneda

UX UI
User Experience, también se le User Interface
conoce como UE o ED
(Experience Design).
Principios
del diseño UX|UI

Útil
Usable
Intuitivo
Creíble
Deseable
Accesible
Que genere valor
Campaña Digital
Fundamentos
¿Qué es una campaña digital?
Fundamentos

Conjunto de acciones Datos en tiempo real del Interacción constante para

digitales estratégicas para comportamiento de los mejorar la experiencia,
conseguir un objetivo usuarios diferencia con el acelerar los cambios.
mundo análogo
Objetivo: una clave estratégica
Puntos clave para tener en cuenta a la hora de
definir objetivos
Problema
Escribe todos los problemas
que se te ocurran, luego
decides cuál es el más
relevante de todos.
Benchmark
Analiza a tus principales
competidores, identifica sus
fallas y plantea un objetivo
que cubra esas fallas.
Soluciones
Plantea posibles soluciones
a los problemas que has
identificado, uno para cada
problema.
Objetivos
Redacta en infinitivo los
objetivos que se te ocurran
con el problema y las
soluciones que identificaste.
Ejemplo práctico para la definición de objetivos

Problema Soluciones Objetivos

- Tengo mucha - Dar a conocer mi
- Diferenciarme de la
competencia de marca a personas
competencia
empresas sólidas que interesadas en viajar
ofreciendo cosas
ofrecen paquetes dando una imagen de
diferentes.
turísticos. - confianza con
Posicionar mi marca
- Mi marca no es posibilidades fáciles
señalando por qué es
conocida, es muy de reembolsos o
buena.
nueva. - cambios de
Armar mi base de
- No tengo base de itinerarios.
datos.
datos. - Conseguir más
- No tengo muchos
clientes.
clientes.
Benchmark
Benchmark express
Compara tres marcas que compitan directamente contigo escribe los puntos de mejora que veas en
cada una de estas marcas.
En el ejemplo que te pongo abajo voy a comparar a Avianca Tours, Despegar y Aviatur.

Avianca Tours Despegar Aviatur

En las cards promocionales
no especifican qué incluye la
promoción o paquete.
Tampoco son visibles los
medios de pago disponibles.
Experiencia más completa,
la información para el
usuario es más simple de
entender. Sin embargo, no
dice si los precios incluyen
impuestos.
No señala el cambio de
precios “antes y después‘.
Tampoco habla de
reembolsos, tiene
información útil al final,
pero es difícil de entender.

Semejanzas en los tres: buscador al inicio, precios visibles y fotos del destino.
Funnel de conversión y audiencias
 Awareness
Awareness Tus usuarios empiezan a
conocer la marca.

Consideration
Consideration Tus usuarios empiezan a
considerarte.

Engagement
Engagement Tus usuarios consumen tu
contenido.

Conversion
Conversion
Tus usuarios compran tu
servicio.
Audiencias

Edad Localización Intereses

- Personas entre los 18 - Viajes baratos.
- Colombia. - Viajes cómodos todo
y 35 años.
incluido.
- Padres jóvenes a los que
les gusta viajar en
familia.
Métricas - KPI
 Métricas clave

Link Ad Landing page

- Reach o alcance: total de - Unique visitors.
usuarios a los que le llegó tu
anuncio. - Tiempo de permanencia.

- Clicks: total de clicks que recibe - Tasa de rebote.

tu anuncio.

- CTR: Clicks/reach.

Enlaces útiles:
Conocer el rendimiento de tu campaña de alcance.
Clics en el enlace.
Concepto
Concepto creativo

Keyword research Centro de la

estrategia
Búsqueda de palabras clave
Landing page.
y términos comunes.

Flujo de entrada Crear concepto

¿Cómo entran los usuarios a Tener tu objetivo como
mi landing page? ¿Por referencia principal y hacer
dónde? una miniencuesta.
Concepto creativo
Concepto: Viaja a tu destino soñado con todo incluido
CTA: ¡Quiero viajar!
Encuesta concepto creativo
Breve encuesta a usuarios sobre el concepto creativo

Te dejo la siguiente tabla, califica con 1 o 0 cada uno de los ítems. Si el puntaje es menor a 8, repite el
ejercicio y crea otro concepto.

Concepto: Viaja a tu destino soñado con todo incluido

CTA: ¡Quiero viajar!

Entiende en la Sabe qué acción Recuerda el mensaje

Usuario primera leída llevar a cabo

Usuario 1

Usuario 2

Usuario 3

Usuario 4
Propuestas de imágenes
Listado imágenes
Enlace para buscar las fotos bajo licencia Creative Commons de atribución, la que puedes usar con
fines comerciales siempre y cuando menciones como pie de foto al autor.

https://www.flickr.com/photos/87475230@N04/8364207190/in/photolist-dK7KoN-8tLcwG-6UEMaG-sgRZU-6UEMRw-cQMvzu-6UELWE-8tHvmM-6UAHEi-
8tLpgu-8tHrFp-8tHC4H-8tLxmj-8tLp8w-6UEN4W-g3Z9Ag-5Qd7d8-2g7o8Ch-5QhmQA-8tLoJw-8tLCYE-8tLorW-8tLHSy-8tLozw-8tHf3a-8tLy6m-8tHkEX-
8tHcQe-6UEKKy-8tLtJm-8tLH8U-8tHv28-8tHB8F-DfHKVs-8tHkNt-8tLoZ1-8tLrRh-8tLF4U-8tHvNg-bEGRTZ-8tHvbe-5QhmKm-8tLo3Q-8tHuCZ-8tHaSn-
cdBELd-8tHF38-8tLC2w-6UEMXS-8tLngf
https://www.flickr.com/photos/44228041@N04/8931569201/in/photolist-eBfCmr-Y9DmHz-Y9DmMH-31rYYN-EBWa1-5EoQ6w-dMJ2NZ-aakK2o-5EoQnq-
EBWa5-7ibYcG-Y9Dn6i-SsPomh-EBWa9-XP3FEb-5Ejxuv-2ihVCB7-aE1jfW-94E4ih-94B2VR-5Ejyxn-TakRML-dWPQBY-94B7rT-wuwCG-5EoRaY-dWJboB-
5EoRqo-ewhbTd-a8uoAL-dWJbrt-dWJbk4-7d8ZLt-a8umpm-eFqCeW-wuwCJ-TKnD6v-5EoQLA-a7dVEw-94E3TG-5EoQCq-31nhxt-M3FSp-5EoQuQ-8Yz3Ui-
5EjyhZ-M3yRb-Y9DmS2-5EjzxP-wuuYE
Listado imágenes
Enlace para buscar las fotos bajo licencia Creative Commons de atribución, la que puedes usar con
fines comerciales siempre y cuando menciones como pie de foto al autor.

https://www.flickr.com/photos/aleixcabarrocas/5384665937/in/photolist-9cPPzT-9cPQwR-9cPUqg-9cT1mW-9cSXw9-9cSVSw-nqRz5N-9cPRKe-9cT1Gb- https://www.flickr.com/photos/40883475@N00/7323906404/in/photolist-cabWdm-dLHnes-9q8AiC-8wkVLi-9pQVth-8wkV8B-cabW3w-DknZyy-anKsrP-
9cT1SQ-9cSVwq-9cT1tE-9cSZMC-9cPS3R-9cPSo8-9cSYBf-9cSYME-9cPTLg-9cSTxq-bd9jtD-9cPMMk-9cPUgK-9cSUGC-9cSXk7-9cSURm-9cPMsg- 6dFbjQ-6dF8g5-6dEZK9-anNgxE-8uPo9i-9pLZHz-dLHpiS-dLBXWv-cabVUj-4QvgXW-dH68Gy-4Qr5wk-9q5zuT-dLCJBF-6dF9D9-6dEWS1-cabWk9-6dF5jU-
9cPMED-9cSUwC-9cSVKs-pRUU9V-q9hnpr-q9gGnA-9cPQn2-pcwkq6-q9h1xU-pRV3g6-9cSZhU-9cPUKt-9cPMdK-9cSWZh-9cPQcp-9cSSVQ-pRKZr7- 6dASYi-6dAXBK-6dF3Fq-6dDWv5-5SPP7Z-cDbDVw-6dEM1f-6dENkL-6dAAPg-6dAQ1t-dLCGVz-52aBF6-dH6aKE-dLHiQb-iZrkjP-9q5Ao4-6dAMk6-
9cPPfT-9cSXUd-9cSYfw-9cSY5U-6Yzi1C-TE99RB-iKUYXd dLCDyg-dLHtD1-864Spw-864V27-dEo9mU-pXwqR4
Wireframes
Puntos a tener en cuenta para el diseño
1. Objetivo: Dar a conocer mi marca a personas interesadas en viajar dando una imagen de confianza con
posibilidades fáciles de reembolsos o cambios de itinerarios.
2. Parte del funnel: Awareness.
3. Estructura del contenido que identifiqué gracias al benchmark y a mis objetivos:
- Concepto general.
- Quiénes somos (explicarlo muy brevemente).
- Por qué comprarnos a nosotros y no a los otros.
- Precios de los paquetes turísticos y qué incluye cada uno.
- Cancelaciones y reembolsos.
- Formulario por si quieren atención personalizada.

1. Para el Link Ad no olvidar el CTA en la imagen.

2. En las dos piezas el concepto creativo debe ser el mismo.

Landing page desktop
Landing page mobile

Importante:
1. Una vez al aire, validar
si el número de clics en
las cards de los
paquetes disminuyen
en mobile al no tener
CTA de compra.
2. Ver si en mobile las
tasas de rebote
aumentan, dado que el
usuario para llegar a
los paquetes debe
hacer más scroll.
Anatomía de un Link Ad
El nombre de tu fan page.

Texto principal: máximo 125 caracteres.

Características de la imagen:
Dimensiones de la imagen: mínimo 600
x 600px
Dimensiones recomendadas: 1200 x
628px
Ratio de la imagen: 1:91:1

Enlace de tu landing page.

CTA. Se puede elegir entre algunas opciones. Te

recomiendo uno relacionado con awareness. No es
el mismo de la imagen.
Título: 25 caracteres.

Descripción: 30 caracteres.
Link Ad
Porfa, revisen este enlace para profundizar más sobre el Link Ad.

Importante:
1.Una vez al aire, monitorear el CTR. Si está por debajo del 1%
replantear el CTA.
Tabla para insertar los textos complementarios de la anatomía del Link Ad. Estos textos
son complementarios al concepto principal y al CTA de la imagen. Es opcional
incluirlos en el proyecto final. Guíate por esta extensión de textos y por la diapositiva
anterior. Te dejo un ejemplo:

Texto principal ¡Descubre una nueva forma de viajar! Haz cambios de

(Max. 125 caracteres) itinerario y solicita reembolsos fácilmente.

Enlace quieroviajarmas.com

Título Viaja a precios bajos

Descripción Haz clic y descubre cómo.

CTA Más información

Iteración
Template de Informe
Periodo analizado: del XXX al XXX

Recuerda incluir hallazgos importantes

Landing page
XX XX XX
Unique Visitors Bounce Rate Av. Time on Site

Link Ad
XX XX XX
Reach Clicks CTR
 “
"A poem is never finished; it is only abandoned."

Paul Valery
 “
"Un diseño digital nunca se termina; solo es abandonado por un tiempo."
Enlaces de interés para profundizar y seguir estudiando
Enlaces de interés
1. Headings:
https://www.w3schools.com/html/html_headings.asp
https://yoast.com/how-to-use-headings-on-your-site/

2. Funnel de conversión:
https://www.cyberclick.es/que-es/funnel-de-conversion

3. Accesibilidad web:
https://www.w3.org/WAI/fundamentals/accessibility-intro/

4. Tendencias digitales:
Engagement rate, la nueva métrica de Google Analytics 4.
Cambio en la política de Cookies de Google.
¡Gracias!