Dynamic display principles

Brand:
Specsavers (Global)

Channels:
Dynamic Digital Display

My role(s):
Prototyper, Lead Digital Designer, Digital Brand Guardian, Studio Technology Lead

  • In 2019, I successfully launched dynamic display creative at Specsavers for the first time, alongside our partner, Ad-Lib (now Smartly Video & Display). As part of that project, I designed and coordinated the build of a range of Specsavers VI templates. Initially, we launched in the UK & ROI, rolling out performance campaigns. Following a successful start in the UK/ROI, within 12 months, it was adopted by all regions.

  • Each market was working in silo, developing templates with no real long term reusability or shareability in mind. The number of templates within the platform very quickly became unmanageable. Multiple versions of the same template existed as they were built by different markets, which was hugely inefficient.

    Discrepancies in layouts, animations etc… further segregated each region. I felt we needed to completely reassess our processes and approach to dynamic templates, looking at it primarily from a global perspective.

  • In 2020, I embarked on a personal project to streamline the UK & ROI’s templates, standardising everything from animations and timings to typography as I went. This soon snowballed into a major global project with buy-in from stakeholders in all regions.

    My aim evolved into designing a ‘super template’ that accommodated all twelve Specsavers VI templates, allowed extensive creative flexibility, and considered all the specific regional ‘isms’. In addition, there was the challenge to the developers at Ad-Lib to see if they could get my vision to work given the small file weight limits we had to operate within for digital display advertising.

  • I began by looking at how things were being done versus how I felt things, ideally, should be done. As shown below, there was very little synergy between regions, with most people acting reactively instead of proactively when it came to new templates.

    My proposal was to switch to a global first approach. Global templates would be designed and developed proactively, allowing time to maximise creative flexibility and reuse. By following this route, we could improve production efficiency and improve brand consistency across regions.

  • I analysed all our existing dynamic templates in order to establish:

    • Which common elements applied across all our templates?

    • Which of those elements needed to be controlled dynamically?

    • Was there any additional functionality that we needed in future templates?

5.png
6.png
7.png

  • All the common dynamic elements, animation and functionality highlighted above were collated. I then used this information to design what I referred to as the ‘shell’. The shell would form the basis of any future templates. The designer/developer would essentially skin it to look how they wanted.

    By doing this, it would streamline the development process, mean every new template would have a huge amount of flexibility and reusability already built into it, and would also improve general brand consistency.

  • One of the primary aims of my global template was to incorporate all the different VI templates into a single master dynamic template. To do so, I would need to add the unique curve variants found within Specsavers’ VI templates to the shell. Having reviewed the templates, I worked out that we needed to add six curve variants (which I referred to as ‘CC’ in my documentation).

    My idea was that each of these could be selected from a dynamic field (dropdown) when using the master template in Ad-Lib.

    • CC1: 2 x convex curves. One filled, one outlined.

    • CC2: 2 x convex curves. Both filled.

    • CC3: 2 x convex curves. Both outlined.

    • CC4: 1 x concave curve. Filled.

    • CC5: 1 x convex curve. Filled.

    • CC6: 1 x concave curve. Filled. (text-only specific)

19.png
20.png
21.png
22.png
35.png
36.png

  • Colour and opacity could then be controlled dynamically to achieve the relevant VI template (as shown below). I opted to keep the available colours locked to the corporate colour palette, so these were made available via a dropdown rather than free text. Bespoke colours were available on request, following approval from the global brand team.

    The position of copy elements could be adjusted with some basic CSS, meaning we could potentially unlocked a huge amount of flexibility within a single set of templates.

24.png
25.png
26.png
27.png
28.png
29.png
30.png
38.png
39.png
40.png

Structure & general timings

47.png
48.png
49.png
50.png
51.png
52.png

Defined animations

54.png
55.png
56.png
57.png
58.png
59.png
60.png
61.png
62.png

Looping & maximum durations

Summary

My dynamic display principles and the resulting master global dynamic template were a resounding success.

Firstly, the developers were able to suggest some additional improvements, which added even greater flexibility to the templates.

Secondly, my aim of significantly reducing the number of active templates within Ad-Lib was achieved. We retired around 90% of the existing templates within the platform, which were replaced by the global template. In 2021, c.2.3 billion impressions were served worldwide. Of that, close to 2 billion were served using this template.

One of our big challenges in the UK was in our performance marketing campaigns. We could only use one template within e.g. the national UK optics performance plan, meaning we lacked variety in our creative. The global template instantly unlocked all Specsavers’ VI templates in one. A real game changer at the time.

Each region was delighted with the end product. As something that started out as a personal project, I am very proud of what we achieved and consider it my finest piece of work to date.

It was subsequently referred to as best-in-class by one of Ad-Lib’s founders.