In recent years, the phrase Design System has become familiar to everyone who is at least somewhat in touch with trends in the fields of digitization and branding.
In 2019, we built a custom design system called Metron. Metron was initially made to ensure brand consistency throughout the web tool we were building for the client at the time. At some point, the need to evolve the Design system to where it could be used for various brands at any given moment became clear.
Our client WPP recognized an opportunity to speed up the launching of new products for their customers. With the implementation of our multi-brand design system, they managed to speed-up their process by 273% in 2021 and 2022.
WPP is a British multinational communications, advertising, public relations, technology, and commerce holding company headquartered in London, England. It was the world's largest advertising company, as of 2019. WPP owns many companies, which includes advertising, public relations, media, and market research networks such as AKQA, BCW, CMI Media Group, Essence Global, Finsbury, Grey, Hill+Knowlton Strategies, Mindshare, Ogilvy, Wavemaker, Wunderman Thompson, and VMLY&R. It is one of the "Big Four'' agency companies, alongside Publicis, Interpublic Group of Companies, and Omnicom.
Like many other companies, WPP also pitches to large companies in order to secure long-term deals with them. Each time they wanted to present their proprietary tools for unifying work processes, it was necessary to open a new, functional instance for the target client, which meant defining most of the necessary parameters manually in the back end environment. In addition, each client needed a personalized look for the tool, to be consistent with their own visual guidelines. In short, that meant a lot of time spent on technicalities and less on creativity and ideas.
By making a design system that is holistic, scalable, robust, and at the same time flexible for personalization, we streamlined their process so that it is much faster, more efficient and therefore consumes less financial resources.
Before the introduction of our Multi-brand design system, WPP spent about 3-5 working days to prepare a new instance for presentation to the client. Many times they wanted to quickly impress a potential client with their solution, but they simply couldn't have a custom instance ready because of the time component. Since we were contracted to build their Orchestration System, we proposed optimizing the process by creating a complementary Multi-brand Design system. Its addition means that anyone can now configure a completely new look of an instance with only a couple of clicks. In practice, this resulted in speeding up the launch process from a few days to only a few minutes.
By optimizing the process, we can also talk about substantial financial savings. Despite the fact that the initial investment in the making of such a versatile design system was substantial, by saving time and increasing the success of product pitches, the new system more than paid for itself within only a short amount of time from its implementation. The total cost to prepare individual Pitch environments was reduced by 93%. In addition, WPP also increased its agility and competitive advantage over their rivals.
Optimizing the process through the implementation of our multi-brand design system has sped up the launch of new tools. WPP held a trump card in their hands that opened doors to many new clients. Within two years of using the orchestration system together with the multi-brand design system, they saw a 273 percent decrease in the time needed to launch a new tool.
In the first step, we built a Multi-brand design system. This means that components do not store the actual values regarding their color or typography. Instead, components contain variables or so-called tokens, which are defined by a separate JSON file. In practice, this means that we can define the appearance of the components separately from their structure, even after launch, and completely tailored to the needs of the client.
In the second step, we upgraded the orchestration system so that WPP could easily open new instances within the user interface. To achieve this, we have built a special WYSIWYG theme configurator, where the user defines the colors, typography, spacings, sizes, the logo, welcome messages, and other parameters needed to open a new instance, in just a few easy steps. Our system then generates a JSON file, which is used to calculate the tokens for the new template. Everything happens in an instant, and changes to the instance are visible immediately.
The entire system is based on Angular technology and Angular Material, which are widely used technologies in the IT world and can be implemented in a vast variety of systems. Today, this type of methodology is already used by more than 100+ world-famous brands.
We managed to exceed the expectations of our client. In the beginning they didn’t fully understand how much impact this change would have. Once they started testing the MVP they were thrilled with how many resources they would save.
With this implementation we have:
We can always count on the Nudge Labs team to get us a competitive advantage with their agile methods and technical knowledge.
Do you also encounter slow processes within your company that are ineffective or financially wasteful? We have several decades of experience with the optimization and digitization of processes in the business environment. We offer professional guidance and support to all our customers in maintaining and upgrading the systems that we implement for your process. Gain a competitive edge by optimizing your business process with our forward thinking digital solutions.
