Design System: What We Did to Rally People Over The Years

No, adoption does not happen magically.

Morgane Peng
Societe Generale Design
6 min readJun 18, 2020

--

Designers and developers, we often think that our products should speak for themselves. We forget that sales, marketing, and product people are the ones selling what we do.

So who should be selling internal products like design systems? Ours has grown from serving a single department to entire business divisions over the last 6 years. We’re all contributing now to make it better together.

To achieve this, we learned to become Design System ‘growth hackers’. This is the theme of the article today — on the human side of design systems.

How can we deliver the best experience for a large portfolio of services in a timely manner?
How can we deliver the best experience for a large portfolio of services in a timely manner?

I’ll also adapt some of the pro tips my colleague Daniel Herbera uses to coach people and startups when they pitch in front of investors or management. They’re relevant to design systems too!

Understand other people’s problems

A successful product is a product that solves a real problem — and this problem isn’t necessarily yours. Telling people that I find design systems interesting or that the team worked very hard isn’t going to make their lives better off.

If you want people to adopt your product and change how they work, you need to convince them that it’s worth their efforts... What’s in it for them?

In 2014 we had the insight that we needed a design system to scale design with a systemic approach in the bank. But the people who would eventually use the system had other (valid) priorities. Releasing a product on time. Growing a business. Minimizing project risks. The list goes on.

Here’s how I mapped the problems and solutions in our case:

In our B2B context, we also have an additional challenge: our products vary greatly in terms of design complexity, so our value proposition had to convey that a single design system can work for all of our products:

Answer clients’ needs from the simplest to the most complex with the same design system — a collection of guidelines and reusable assets, implemented both in design and code.

Share concrete examples

We can’t ask people to trust us unconditionally: real examples are the best way to let them see for themselves. I always show our services’ real production environments where possible (sometimes the data is too sensitive) and not just static prototypes.

So what can you do with the SG Design System?

Information websites for clients, like this one which introduces SG Markets, our B2B suite of services:

Technical websites, like our developer website that allows internal and external developers to explore and register APIs and documentation:

Simple digital products, like our foreign exchange service for small and medium French enterprises, which guides them step by step when managing their foreign exchange exposure:

Advanced digital products, like our foreign exchange trading services for foreign exchange professionals — in case you’ve ever wondered what expert tools look like! Here everything is condensed to allow users to monitor multiple currencies at the same time and be efficient in their work:

Since professional users spend a lot of time watching dense screens with a lot of data, we’ve introduced a dark theme to ease eye strain:

Advanced expert products, like market analysis tools. Here again, we’re using a dark theme:

Note that you can also add concrete examples from the competition, especially if your solution is still work-in-progress — I’ve already talked about when to use the bandwagon effect here.

Let people try the solution with no strings

Nobody likes to be forced into something. Remember when you last downloaded an app or wanted to read an e-book, only to be stopped by a sign-up form or a paywall? These frictions are increasingly turning people off (me included!).

We said it in a previous article: like many companies around, Societe Generale is made of heterogeneous teams with different skills and inspirations. This makes it a bad idea to impose our design system upon them, especially if we want to collaborate.

What helped us most was to keep our design system repositories open. We allowed literally anyone in the company to try it.

We even went a step further, by creating our Playground, a home-made tool to design in the browser for both designers and developers. No need to download any design UI kit or fetch any code package. Everyone is welcomed to start playing — I’ve even seen product owners and communication people have a go at it!

Prioritize critics

As counter-intuitive as it sounds, your critics are your best friends. Maybe your design system really is missing something. Maybe it’s impossible to understand how to use it. Maybe it clashes with brand guidelines.

Listen to criticisms and prioritize them to strengthen your design system.

When we first released our design system in 2014 for example, people mentioned that it wasn’t working for condensed trading interfaces. This is how we ended up introducing extra small inputs:

Example of extra small inputs.
Example of extra small inputs

Same story for our dark theme. In 2016 people complained that our design system was eye-straining, and wanted something similar to Bloomberg’s dark interfaces. As a result, we managed to be 3 years ahead of the dark theme trend just thanks to real user needs.

Be transparent on what will not be your priority. For example, we made it clear that we weren’t working on marketing and event elements up until recently as our main use cases were for operational applications. Our communication teams are also proficient with other systems and have different layout needs.

Production button.

There is one catch with critics, however. Sometimes, no matter what you do or say, some people will keep making excuses not to use your product.

Their political environment may be preventing them to collaborate, even if you are part of the same company. This is called the NIH syndrome. I find these topics around organizational design fascinating but I won’t dig into this for now for the sake of this article’s length!

Unless you have a good understanding of the influence mechanisms within your organization, just move on. Don’t take it personally, as it is a systemic rather than an individual problem (most of the time).

Always formulate a clear call-to-action

Like us, you’ll probably be doing a lot of presentations. Always formulate a clear call to action at the end of each of them. It may be obvious to you what you want people to do — make sure your audience is aware of it too.

As my colleague Daniel often says, the worse feedback you can get from any presentation is a weak “So what do you want me to do?”.

Are you looking for your audience’s support and recommendation? Asking them to try out your design system? Proposing to join forces in developing it together? Make it crystal clear what you want your target to do.

Let’s recap! Here are the things we did to build engagement over the years around our SG Design System:

  • Understand other people’s problems
  • Share concrete examples
  • Let people try the solution with no strings
  • Prioritize critics
  • Always formulate a clear call-to-action

I hope they’ll be useful to you as well. Any thoughts, or criticism? Let me know in the comments!

This article is part of our Design System series: a 5-year overview, 4 false assumptions, governance & chaos (part 1), governance & chaos (part 2), adaptive colour systems, and surviving. Watch this space for more!

--

--

Morgane Peng
Societe Generale Design

Blending user experience design with business strategy in the financial space. Also into indie game dev. @morganepeng