Stach LTD
Tesco: DDL Tools - prototyper
The Problem
Although we had made huge progress defining the UI specification for Tesco’s digital products, we wanted to accelerate adoption of the new brand expression by focussing on teams who were building content and marketing pages. This was a strategy of focussing on the high-volume, high-turnover pages.
What we did
We believed that if we could create a tool that would allow them to use standardised DDL components and along with their content, we could create a pipeline that reduced the need for full-time engineering support and so accelerate the roll-out of the new brand expression on digital.
How we did it
The prototyper was the critical link in that pipeline which linked the core DDL-UI repository (an internally open-sourced library of DDL components). It allowed users to drag and drop components, edit their content and preview how the page responded at various viewports.
An secondary objective of this work was to showcase how effective and versatile a well-designed set of components could be, and was used to help persuade teams how were still reticent to get onboard.
The video above shows a WIP demo of how the Prototyper could be used. This example shows the tool recreating an existing Clubcard page using ‘off-the-shelf’ components from the DDL-UI library.
product design web product strategy tesco UI design systems tools caseStudy