Shift June 24, 2019

Design consistency at scale

Thomas Smolders

Resident Writer

On June 20, almost hundred people gathered at In The Pocket for a Shift on design systems. Experts shared their lessons learned, gave insights in specific cases and listened to Jina Anne, who used to be Senior Design Systems Lead at Amazon and is now a true Design Systems Advocate. In case you couldn’t make it: here’s the recap.

At the last main Shift conference in October 2018 Dominique Leroy, CEO of the Belgian telecom operator Proximus, said something remarkable. ‘The biggest opportunity in digital transformation lies in an increased focus on user experience’, she said.

We couldn’t agree more - that’s why we’ve been working on the implementation of design systems for a few years. As more and more customer touchpoints are digitised and design teams are growing, the need for consistency in design and automated tools is increasing. Design systems, a well-documented, overarching set of rules and agreements on how to create products and communications by using components, can give companies a competitive advantage.

Shift-Maarten-De-Roeck
Shift-Thibault

Thibault Maekelbergh, our React Native & Full Stack Web developer, showed how In The Pocket integrates design systems both in its own work as in the projects of its clients. ‘Design systems,’ he said, ‘is a team effort and assembling your core team is one of the most important steps.’ Our team focusing on design systems consists of people from different teams, with different expertises.

According to him, design systems aren’t just upgraded style guides, but tools to create consistency and automatisation. ‘We wanted to take a look at the pain points in projects and processes and ease those pains. They forced us to find a solution.’

That solution is Hubble, In The Pocket’s own system that aligns the design and development teams, which was demonstrated by our Lead Competence Product Designer Maarten De Roeck and React Competence Lead Jonathan Dierckens at Shift. Every change in design is directly pushed to the code and other targets. Thanks to this system the gap between designers and developers is closed as changes in Sketch or Figma can be pushed immediately to the digital products.

Design-systems-hubble

One of the clients for who In The Pocket is implementing design systems is itsme, the tool used by one million Belgians to identify themselves online. As itsme works on multiple platforms, design systems help to create consistency - not just in the colors or logo’s, but also in the customer flow. It feels like you’re using just one product with a shared interface. To demonstrate the power of Hubble, Maarten and Jonathan changed the design of itsme live on stage, and showed how it’s immediately pushed to the code.

Itsme is not the only Belgian company who’s investigating the benefits of design systems. Wouter Walgraeve, Service Design Lead at Colruyt, joined us at Shift to talk about his experiences. He currently isn’t an end user of design systems, but he’s a true enthusiast of the concept, who sees and evangelizes the value and use of design systems for Colruyt. The organisation, he said, is a family of brands. Besides companies such as Colruyt, Bio-Planet and Dreamland, the group has own brands such as Boni and Everyday.

Shift-Wouter-Walgraeve

It’s a challenge to keep this ‘family of brands’ all under control and aligned. To explore the power of design systems, Colruyt started by implementing the principles of atomic design, a term most known by the eponymous book by Brad Frost. Wouter and his team created an inventory sheet with all the relevant building blocks, mapped on the language used by the design team. ‘It’s an easy but very effective starting point to implement design systems’, he said.

Jona-Anne

We finished Shift with the closing keynote by Jina Anne. The American Design Systems Advocate used to work at Amazon, where she was Senior Design Systems Lead. ‘Design systems have been around for ages, but nowadays they have come to mean something different’, Jina said.

Whether you’re debating if style guides are considered design systems or not, it’s still important to think about why we’re talking about design systems. ‘We need to focus on our main purpose: the people using our digital products. When we try to sell design systems in our organisation, we tend to focus on success and productivity. Design systems alone won’t achieve this - as they’re mostly just documentation tools. Instead, it’s the people who make these things happen.’

Listen to the interview with Jina Anne

Before Jina Anne took the stage, we interviewed her for the Shift podcast. Listen to what she had to say about scalable design wherever you get your podcasts (search 'Shift by In The Pocket') or here.

Listen
Listen

What design systems can do, Jina said, is empowering change in your culture. People will feel that they belong and have an impact. They’ll feel heard and emotionally connected to others. In our design systems work, our materials or artifacts, are our style guides. Our documentation. Our component libraries. The non-material is our shared language and nomenclature. Our tenants, or principles.

‘Failed design systems are due to a lack of a unified vision, shared language and purpose’

Taking care of the people will also have an impact on how easy it is to convince folks at work why it’s worth the time and effort to have a design system. Or, as Alex Schleifer of Airbnb once said: ‘You can’t innovate on products without first innovating the way you build them.’ According to Jina, everyone in your organization is an owner of the design system and should feel able to contribute and use it.

Jina concluded by saying that it all starts with a simple step: listen. ‘What kind of value are you providing in your organization? Know more about the organization you are serving. Hear their input and apply it in practice. Find out how you can fulfill their needs. Rather than advertising your design system, build relationships and solve problems together. When you respond well to feedback, you gain trust.’

Download our Design Systems whitepaper

We wrote a whitepaper on how to make your design scalable using design systems. Get your copy today!

Learn more
Learn more