Skip to content
ESEN

Case 03

Web accessibility told as growth

Animated spot for a web accessibility plugin for Shopify and WordPress. The brief called for speaking to the person who installs the plugin, not to their visitors, so accessibility is told as growth: experience, SEO and conversions.

Client
Web accessibility plugin for Shopify and WordPress
Brief
Animated product spot
Year
2024
Timeline
12 days
Role
Creative direction
  • Creative direction
  • 2D animation
  • Script and storyboard
A green accessibility icon descends through the clouds, lit by a beam of light.

01 · The brief

Speaking to the person who installs the plugin

The product is a web accessibility widget installed as a Shopify and WordPress plugin. It works in real time, adopts each website’s visual style and can be customized. It’s installed by small businesses and online stores.

Accessibility ads usually talk about the person who can’t use a website or the law that requires it to be adapted. The brief asked for something else: to speak to the store owner, who is the one installing the plugin, and show them what their business gains. Accessibility had to come across as an improvement in experience, search ranking and sales.

Three ways to sell accessibility

  • Empathy

    Speaks to
    the person who can’t use the website.
    Argument
    including everyone is the right thing to do.

  • Compliance

    Speaks to
    the legal officer.
    Argument
    the law requires it and there are penalties.
  • The spot’s approach

    Growth

    Speaks to
    the store owner.
    Argument
    better experience, better SEO and more sales.

The closing logo carries the descriptor “AODA Compliance Software”, but the voiceover never mentions laws or penalties.

02 · The process

From script to final cut in twelve days

  1. 01

    Script

    Defined in a session with the copywriter, based on the goal of the brief.

  2. 02

    Visual table session

    Second session: the script is translated into images and the graphic style is set.

  3. 03

    Storyboard

    Drawn by the graphic designer and reviewed in a third session.

  4. 04

    Parallel production

    Illustration and animation move forward at the same time; the editor prepares music and sound over the storyboard.

  5. 05

    Animatic

    Frames, voice and music cut together. Approved by direction and the product designer.

  6. 06

    Animation and editing

    Full animation, editing and final adjustments.

Team: copywriter, graphic designer, motion designer and editor. Tools: Illustrator, After Effects, Premiere Pro and ElevenLabs for the voice.

I led the process without executing any piece. The ideas came out of the table sessions with the team; my job was to contribute to the creative development and decide which ideas moved forward and which were left out.

03 · The script

A script in six scenes

The script follows a short arc: a problem the viewer recognizes, help that arrives from the sky and a result that can be measured. The accessibility statistic opens the spot and, from there on, everything is about the store. The protagonist is the owner, not her visitors.

Script

SceneImageVoice
1Connected storesThree small stores alternate, each with its own color. Users in red appear who can’t get in.“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?”
2SarahSarah, owner of a fashion store, looks at her website: a grey sketch, with no customers, crossed by a tumbleweed.“Oh, look, there’s Sarah, a kick-ass store owner who’s missing out on sales because her site isn’t accessible. Ouch. Right?”
3Help arrivesThe clouds part and the product icon descends. A button to install it appears over the website; one click.“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.”
4The demoThe widget turns on text size, color and alt text. The website fills with color.“AI handles text sizes, color changes and the creation of image alt tags like a pro.”
5The growthA column rises through three skies: UX, SEO and conversions. The customer counter goes up and the widget takes on the store’s color.“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?”
6ClosingSarah smiles. The stores from the opening return, now with users in green. Logo and tagline.“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 and animatic

The storyboard set the framing, transitions and pacing of each scene before illustrating. Its frames, the voice and the music were cut into an animatic; once approved, the animation and editing were completed. That way, pacing and sync with the voice were locked before the final animation.

Pencil storyboard in twelve frames, from the opening stores to the final logo, with action and voice notes under each frame.
12-frame storyboard, reconstructed from the final cut.

05 · On-screen decisions

Six on-screen decisions

Every visual decision answers the same brief: for the store owner to recognize themselves in the story and see what they gain.

  • Sarah, an illustrated store owner in blue, scratches her head next to her computer; a handwritten label points to her name.

    The protagonist is the owner

    Sarah isn’t a visitor with a disability: she’s the one who would buy the plugin. The viewer the spot is aimed at sees themselves in her.

  • The store’s website drawn in grey, with the customer counter at zero and a tumbleweed.

    The inaccessible website, as a sketch

    Grey, unfinished and with a tumbleweed crossing an empty store. The counter shows zero customers.

  • A cursor over the green INSTALL button on the store’s website.

    Installing takes one click

    A button and a cursor settle any doubt that installing it is complicated. The voiceover seals it: “No coding, just a few clicks and boom”.

  • The store’s website now in color, with the widget open and its three toggles switched on.

    Each toggle, one line

    Text, color and image: the widget’s three toggles come in with the three features the voice names, and the website goes from grey to color.

  • A green column rises toward a blue sky with clouds, next to the word SEO.

    Three skies for three benefits

    A green column rises from sunset to daytime sky and from there into space: experience, SEO and conversions. It’s the literal image of “skyrocket” and “new highs”.

  • The same candy store clerk twice: on the left, serious and with users in red; on the right, smiling and with a user in green.

    A mirrored ending

    The spot opens with stores losing users, marked in red, and closes with the same stores gaining them, in green.

06

Characters, color and voice

Characters

The characters take direct reference from the Storyset style: flat figures, no outlines and simple proportions. Each store has its own color, so the scene change reads instantly.

  • Candy store clerk, illustrated in purple tones.
    Candy
  • Gift store clerk, illustrated in red on a grey background.
    Gifts
  • Plant store clerk, illustrated in green.
    Plants
  • Sarah at the counter of her fashion store, illustrated in blue.
    Fashion, Sarah’s store

Color

The product is always green: the icon, the install button, the widget and the column. Sarah’s world is blue. At the end, the widget takes on her store’s blue, and customization is told through color.

  • The store’s website with the accessibility widget in green and the counter at 525 customers.
    The widget, in green
  • The same website with the widget in blue, the store’s color, and the counter at 598 customers.
    The widget, in the store’s blue

Voice and sound

The voiceover was generated with ElevenLabs, in English and in a friendly, humorous register: “Ouch. Right?”. The music and sound design were cut over the storyboard, and the cuts land on the key words: “up here”, “boom”, UX, SEO and conversions.

07 · Delivery

What was delivered

  • 12days
  • 3table sessions
  • 6scenes
  • 0AI in illustration and animation

A 16:9 animated spot, with English voiceover, to introduce the plugin to Shopify and WordPress store owners. The voice was generated with ElevenLabs.

Senior Designer | Branding · Motion · UX · AI Production

Let’s put ideas
into practice

Madrid, Spain | Remote work for Toronto, Canada