March 14, 2016

Digital Design Language phases and why we have an iterative design process

We’re building Tesco’s Digital Design Language (the DDL) like a product, using iterative design to continually optimise the guidance on the toolkit.

This means that we’re open to hearing how the toolkit, which is where we publish the specification can be improved. DDL is a collaborative project with teams across Tesco participating in its creation. It’s not a case of us’ setting guidelines and them’ picking holes in it: we all work together to produce the best design language that works for the whole of Tesco. We bake this into the development of the guidelines by incorporating people across the business into the studio team, as well as having weekly critiques with the heads of design. We reinforce this by gathering feedback once we have guidelines we feel are ready to implement.

That’s why we don’t go straight into publishing guidance on the toolkit and designating it as The Release. We have a beta phase for each element of at least four weeks during which we look closely at how the DDL element is working in practice for our various digital properties. We do stress test designs extensively during the design and development process so we’re confident in the guidance but there’s no substitute for real world evidence.

Most guidance you see on the toolkit is in at least beta testing, but here’s information on what each status means.


Pre-alpha is the design phase, lasing four weeks.

While in pre-alpha, we scope exactly what elements are in scope, before designing the elements. As part of this work, the team looks at how the designs would change how current and known future sites look. They’ll also look at logical groups of elements together, to test that they make wider contextual sense.

We do not typically publish work in progress during this phase. Instead, we hold weekly heads of design meetings to gather feedback.


Something designated as Alpha’ on the toolkit has gone through the design phase and is currently in development, meaning that it’s being coded up in the DDL prototype and the guidance being finalised.

Typically, if guidance on an element is published while it’s in alpha, it will be the design PSDs or presentations that give a sense of the design work that’s gone into the element.

Alpha guidance is subject to some change, depending on how the interactions work in the browser. We don’t usually expect the look of a design to change at this stage, however.


Something shown as Beta’ on the toolkit is reference design and code, available for consumption by early adopters and anyone else. As it’s beta, we might refine the guidance based on results from testing.

If you’re using beta elements, let us know, as it’s really important to have the results from real-world usage feed into the toolkit.


When we’re confident that the guidance is stable and not subject to change from testing, we designate it live’. It can be considered the stable release version of the guidance.

Design systems Design language process

Previous post
Emotional design (or the Hallmark Cards approach to interfaces) It’s no longer enough for an interface to be usable, it needs to be an expression of the personality of the business behind it. Today’s audiences
Next post
Making Tesco’s websites more helpful by design Customers using Tesco online probably aren’t aware that our digital estate includes over 100 different websites and dozens of apps. But they do