Caso 03
Accesibilidad web contada como crecimiento
Spot animado para un plugin de accesibilidad web de Shopify y WordPress. El encargo pedía hablarle a quien instala el plugin, no a sus visitantes, así que la accesibilidad se cuenta como crecimiento: experiencia, SEO y conversiones.
- Cliente
- Plugin de accesibilidad web para Shopify y WordPress
- Encargo
- Spot animado de producto
- Año
- 2024
- Plazo
- 12 días
- Rol
- Dirección creativa
- Dirección creativa
- Animación 2D
- Guion y storyboard
01 · El encargo
Hablarle a quien instala el plugin
El producto es un widget de accesibilidad web que se instala como plugin de Shopify y WordPress. Funciona en tiempo real, adopta el estilo visual de cada web y se puede personalizar. Lo instalan pequeños negocios y tiendas online.
Los anuncios de accesibilidad suelen hablar de la persona que no puede usar una web o de la ley que obliga a adaptarla. El encargo pedía otra cosa: hablarle al dueño de la tienda, que es quien instala el plugin, y enseñarle qué gana su negocio. La accesibilidad tenía que llegar como una mejora de la experiencia, del posicionamiento y de las ventas.
Tres formas de vender accesibilidad
Empatía
- Le habla a
- la persona que no puede usar la web.
- Argumento
- incluir a todos es lo correcto.
Cumplimiento
- Le habla a
- el responsable legal.
- Argumento
- la ley obliga y hay sanciones.
- El enfoque del spot
Crecimiento
- Le habla a
- el dueño de la tienda.
- Argumento
- mejor experiencia, mejor SEO y más ventas.
El logo del cierre lleva el descriptor «AODA Compliance Software», pero la voz no menciona leyes ni sanciones en ningún momento.
02 · El proceso
Del guion al montaje en doce días
- 01
Guion
Se define en una sesión con el copywriter, a partir del objetivo del encargo.
- 02
Mesa visual
Segunda sesión: el guion se traduce a imágenes y se fija el estilo gráfico.
- 03
Storyboard
Lo dibuja el diseñador gráfico y se revisa en una tercera sesión.
- 04
Producción en paralelo
Ilustración y animación avanzan a la vez; el editor prepara música y sonido sobre el storyboard.
- 05
Animatic
Viñetas, voz y música montadas. Lo aprueban dirección y el diseñador de producto.
- 06
Animación y montaje
Animación completa, montaje y ajustes finales.
Equipo: copywriter, diseñador gráfico, motion designer y editor. Herramientas: Illustrator, After Effects, Premiere Pro y ElevenLabs para la voz.
Dirigí el proceso sin ejecutar ninguna pieza. Las ideas salieron de las sesiones de mesa con el equipo; mi trabajo fue aportar al desarrollo creativo y decidir qué ideas seguían adelante y cuáles se quedaban fuera.
03 · El guion
Un guion en seis escenas
El guion sigue un arco corto: un problema que el espectador reconoce, una ayuda que llega del cielo y un resultado que se puede contar. El dato de accesibilidad abre el spot y, a partir de ahí, todo habla de la tienda. La protagonista es la dueña, no sus visitantes.
Guion
| Escena | Imagen | Voz |
|---|---|---|
| 1Tiendas conectadas | Tres pequeñas tiendas se alternan, cada una con su color. Aparecen usuarios en rojo que no pueden entrar. | “They say we’re all connected to each other in today’s world. But wait. With one in every four people not being able to access your web… are we really?” |
| 2Sarah | Sarah, dueña de una tienda de moda, mira su web: un boceto gris, sin clientes, que cruza una planta rodadora. | “Oh, look, there’s Sarah, a kick-ass store owner who’s missing out on sales because her site isn’t accessible. Ouch. Right?” |
| 3Llega la ayuda | Se abren las nubes y baja el icono del producto. Sobre la web aparece un botón para instalarlo; un clic. | “Don’t sweat it, Sarah. AccessPro up here. That’s right, I got you from here. With me it’s a piece of cake. No coding, just a few clicks and boom.” |
| 4La demo | El widget activa tamaño de texto, color y texto alternativo. La web se llena de color. | “AI handles text sizes, color changes and the creation of image alt tags like a pro.” |
| 5El crecimiento | Una columna sube por tres cielos: UX, SEO y conversiones. El contador de clientes sube y el widget toma el color de la tienda. | “Watch your user experience glow up, your SEO skyrocket and your conversion rates hit new highs. Plus, you can style AccessPro to fit your brand’s vibe perfectly. See?” |
| 6Cierre | Sarah sonríe. Vuelven las tiendas del inicio, ahora con usuarios en verde. Logo y lema. | “How’s everything now, Sarah? Look at those numbers climb. Let’s make the web accessible for everyone. AccessPro. A web without walls.” |
04
Storyboard y animatic
El storyboard fijó encuadres, transiciones y el ritmo de cada escena antes de ilustrar. Con sus viñetas, la voz y la música se montó un animatic; una vez aprobado, se terminó de animar y montar. Así, el ritmo y la sincronía con la voz quedaron cerrados antes de la animación final.
05 · Decisiones en pantalla
Seis decisiones en pantalla
Cada decisión visual responde al mismo encargo: que el dueño de la tienda se reconozca en la historia y vea qué gana.
La protagonista es la dueña
Sarah no es una visitante con discapacidad: es quien compraría el plugin. El espectador al que se dirige el spot se ve en ella.
La web inaccesible, en boceto
Gris, sin terminar y con una planta rodadora que cruza una tienda vacía. El contador marca cero clientes.
Instalar es un clic
Un botón y un cursor resuelven la duda de que instalarlo sea complicado. La voz lo remata: «No coding, just a few clicks and boom».
Cada interruptor, una frase
Texto, color e imagen: los tres interruptores del widget entran con las tres funciones que nombra la voz, y la web pasa del gris al color.
Tres cielos para tres beneficios
Una columna verde sube del atardecer al cielo de día y de ahí al espacio: experiencia, SEO y conversiones. Es la imagen literal de «skyrocket» y «new highs».
Un final en espejo
El spot abre con tiendas que pierden usuarios, marcados en rojo, y cierra con las mismas tiendas ganándolos, en verde.
06
Personajes, color y voz
Personajes
Los personajes toman como referencia directa el estilo de Storyset: figuras planas, sin contorno y de proporciones sencillas. Cada tienda tiene su propio color, para que el cambio de escena se lea al instante.
Dulces 
Regalos 
Plantas 
Moda, la tienda de Sarah
Color
El producto siempre es verde: el icono, el botón de instalar, el widget y la columna. El mundo de Sarah es azul. Al final, el widget toma el azul de su tienda, y la personalización se cuenta con color.
El widget, en verde 
El widget, con el azul de la tienda
Voz y sonido
La voz en off se generó con ElevenLabs, en inglés y en un registro cercano, con humor: «Ouch. Right?». La música y el diseño sonoro se montaron sobre el storyboard, y los cortes caen en las palabras clave: «up here», «boom», UX, SEO y conversiones.
07 · Entrega
Lo que se entregó
- 12días
- 3sesiones de mesa
- 6escenas
- 0IA en ilustración y animación
Un spot animado en 16:9, con locución en inglés, para presentar el plugin a dueños de tiendas en Shopify y WordPress. La voz se generó con ElevenLabs.
Senior Designer | Branding · Motion · UX · Producción con IA
Llevemos las ideas
a la práctica
Madrid, España | Trabajo Remoto para Toronto, Canadá