A new design system for the world’s largest ad company

Client WPP

Sector Advertising - WPP

Key aims

  • Review WPP products

  • Review best in class design systems

  • Wireframe and prototype new design system/pattern library

  • Present to Global Heads of Product Marketing and Product Technology, UX and UI Directors

WPP has come a long way since being the ‘Wire and Plastic Products plc’. It now has a raft of subsidiaries of talented companies:

Each of these have own products, tools and design system - the challenge was to how to bring them together under a WPP look and functionality. This would enable someone, say, from groupM to work on a VMLY&R product and understand it intuitively. In a nutshell - to really open up what’s possible across WPP.

I interviewed teams from GroupM, Wavemaker, VMLY&R and others, studied their products and came up with a unifying design system and how to effectively roll it out.

This 7-week project needed empathy and diplomacy to allow the teams to be part of the process and understand the need for change.

The best in class I studied:

  • Atlassian

  • Adobe CC

  • GOVUK

Atlassian oversee an expanding suite of tools that have a dedicated fan base of different user groups. How do they maintain their fan base while aligning with the Atlassian ‘big brand’ and design system?

Adobe own a wide range of leading design software - how do they ensure consistency of those products while retaining the identity of each?

Finally, GOV.UK, a leading example of how to align a disparate set of departments, each with their own style, identity and goals. How did they create something, simpler, clearer and faster?

An example of what GOV.UK achieved (department pages before and after)

Some of the best in class takeaways:

  • There’s trust in these organisations due to the unity of design

  • Allow each department/tool it’s own flavour within a clear, unified, locked down structure

  • Employ a phased implementation approach

  • Show don’t tell, actual working examples of a compelling design system are far better than a 20+ page pdf

  • Establish a contact and evangelist in each team - to convey the key aims and squash misplaced rumours

My next steps:

  • An audit of components in each WPP product - what are the consistencies and differences?

  • Create a new design system based on WPP branding, and apply to select set of components/pages

  • Present to key players who own each product - they’re the hands on experts, does it make sense to them?

  • Identify easy wins to roll out first with the least disruption

The outcomes:

  • Client super happy, and the project received a special mention in Stephan Pretorius’ company update, WPP’s Chief Technology Officer.

 
“Great work, I love it.”
— Jason Baldwin, SVP, Global Head of Product Management at WPP

  • My prototype recommended a simplified, consistent design and onboarding (see below).

  • Language check - avoid terms that only make sense to the teams who built them.

  • Document a roll out plan - what’s the easiest elements to update and align first?

  • Use actual examples in the plan - show don’t tell.

Onboarding, simple header options and consistent sign in screens