March 10, 2018

Tesco: DDL Tools - responsive promo builder

The Problem

Following the creation and rollout of Tesco’s digital brand expression (the DDL) we were asked to help speed-up the adoption of the new brand in on-site promotions.

What we did

After a short discovery phase where we spent time shadowing and working alongside the brand and onsite marketing teams, we learnt that the people responsible for creating the promotions and assets lacked confidence and training around responsive design practices.

Responsive image specification

We also found that the agencies who were being briefed to shoot assets for campaigns weren’t being briefed to shoot for responsive placements.

How we did it

Builder tool

We created a tool that would allow promo creating teams to build and proof their promos in the browser, enabling teams to check copy and assets before sending the requirements to the development teams.

We added functionality to the tool that let teams upload an image and preview the crops for focal and safe areas, and then export them for production. I worked with Brand and Procurement to require this step in all photographic briefs to remove downstream costs/compromises created by having to edit imagery to get it to work responsively.

Links

• DDL Specification for Promos (u/p: view/1Tesc0)
• Promo Tool (u/p: view/1Tesc0)

product design web product strategy tesco UI design systems tools caseStudy

---

Previous post

Tesco: Digital Design Language (DDL) Tesco lacked a coherent look and feel for its digital estate which was contributing to decreasing trust in the brand, and confusion among existing

Next post

Tesco: DDL Tools - prototyper Although we had made huge progress defining the UI specification for Tesco’s digital products, we wanted to accelerate adoption of the new brand