Alexander Baumgardt is a design-centric management consultant, teacher and coach, whose mission is to co-create a world in which all of Earth’s lifeforms can thrive. In the final episode of the NEXT-SHOW series five, he talked through the potential and future of design systems.

---

Watch the complete episode

---

If we’re going to talk about design systems, firstly we need to understand what they are. So, what is a design system?

“Well, a design system is a term that emerged during recent years,” says Baumgardt. “It’s basically a system of all the components of expression within a product, and mainly in the user interface, and of managing those components at scale. “

So, it’s a way of creating new experiences for any kind of device that feels familiar. He points out that we see this most often with mobile devices, but it applies to any device and its digital components.

“It’s the building blocks you would use to create an interface in any given context,” he explains.

Apple is perhaps the most over-used example of this. “I still give it because we all love and know Apple,” he says. “And no matter if you are using an iPhone or if you’re using a tablet by Apple, you have particular interface components that behave the same way, right?”

And so, across the brand’s product range, you have a consistent, familiar approach to interface — even with the newly announced Vision Pro.

The elements of a design system

“Ultimately, the design system is used to both manage and easily assemble new modes of interfaces for any existing touchpoint or the future ones,” says Baumgardt. “There’s actually a term for that: branded interactions. We all know there are interactions, but then there are certain interactions that are branded and sometimes even patented, right?”

And he gives the example of the iPhone’s “rubber band” scrolling animation. That’s one’s not patented by Apple because it actually came from an external developer, but it’s become part of the language of the Apple interface. Former Apple designer Bas Ording created the effect in 2005, and it — amongst other prototype interactions — convinced Steve Jobs to build the iPhone

“The design system’s main value is that it basically integrates all these different properties, assets, and components that you can manage them in a digital domain. It brings in efficiencies for the business, you don’t have to constantly recreate the components.”

These elements are known as “tokens”, so if there’s a brand colour you want used consistently, you make it a token, and all the components that use that colour refer to that token.

An old idea expressed in a new way

“It’s basically an object-orientated approach,” he says. “And it’s not actually entirely new. If you’re old enough to have experienced it back in the day when we had brand design systems and corporate identity, with letterheads with a certain kind of grid and all the elements. It’s pretty much the same, just at a much bigger scale.”

This significantly speeds up the product development pipelines, by reusing familiar features where it makes sense. “You can build prototypes fast, which then accelerates research observations, which means you’re faster to market.”

Does this stifle the room for creativity in the product design process? Baumgardt doesn’t think so.

“Again, in the old days, you would have a design grid, and things would sit at certain points on the grid. And designers would complain that it stifled their creativity, it was forcing them to do something more like architecture. But architecture needed those constraints because you have to work with physics.”

And that left plenty of room for architects to be creative within the constraints that reality imposes. His argument is that these design systems create a form of digital gravity, which gives you boundaries to be creative within.

“Since I’m a professor, I can say such obscure things,” he laughs.

Design systems and branded interactions

One way of looking at design systems is as an internal product you use to create other products faster, to solve business needs and solve for user and customer goals.

“That means multiple parts of the organisation have to work together,” he says. “Since we are mainly talking about digital experiences here, one of the classic challenges is the collaboration between design and development. I know I’m over-simplifying this, but the designer draws a picture and describes things that are invisible, but that the user can feel. These are behaviours that are expressed in interactions, like the little button that does a certain thing: branded interactions. And then that all needs to be translated into code.”

Some designers have code affinities, some don’t. But in Baumgart’s experience of design education, the number of code-aware designers is growing. There are also some helpful moves from the coding end of the spectrum, including the “low code” movement, which works with compartmentalised predetermined code.

But to achieve the real benefits of the design systems approach, the coders and the designers have to work closely together, and then you can start scaling what you do.

“And so, without wanting to go too deeply into this, given the design system brings in efficiencies and value at each stage, there’s not a single organisational unit that is not touched by it, like branding, marketing, and product development and product management.”

Improving design systems with feedback loops

And that creates an opportunity for feedback loops that can help you change and improve the components, but no systems allow that easily at the moment. Happily, that’s changing.

At his presentation at NEXT22, he had a colleague there from Github, who demonstrated how they now have emerging features that allow the system to learn from how it’s actually used in the world.

“And then it can change, and grow, and you can create new components,” says Baumgardt. And that could accelerate in the future, through our old friend, AI.

“How are these efficiencies brought in the future?” he says. “The answer is very simple: advanced computation pattern recognition machine learning. Most of the core components of any design system are the same. The devices are the same, the human factors are the same. You could have those as a white-label version that an AI system could recognise and make available.”

Creating space for creativity

“Now, from a creative perspective you might say ‘Wait a second, won’t everything look the same?’,” he says. “Well, bluntly, they already do. The difference is only in the surface layer, and isn’t that what it should be? If I’m looking at news, the news should shine, and the interface shouldn’t get in the way.”

When he’s talking to his students, he describes these fundamental forms and elements of user interface as being a bit like the Euclidean geometry of the digital experiences.

“A circle is always a circle. And, as long as a human is touching it, a button is always a button. You can have it bigger or smaller, or have a little bevel, but it’s still just maths. That’s it.”

“On the higher stacks of the architecture, there are plenty of things you can change according to the brand principles, like behaviours, motions, movement, and other interactive elements.”

He likens the process to speeding the architectural design of a stable house, and then freeing up more space to furnish it. That’s where the creativity kicks in again.

Where AI can aid creativity in design

“You don’t want to be spending your time pushing pixels that the machine can push. If the machines take away the mundane tasks, then I can be a designer all day. It sounds attractive, but with the caveat that it’s a transition that will take five to 10 years.”

We still need to figure out what tools we need, and at what level they will work. It might mean, he suggests, that we won’t need to sit in front of screens all day any more. NVIDIA’s Omniverse tools allow you to bring any 3D object into their systems, for example.

“The tools and processes will allow us to free up time for creativity, but designers need to embrace code and maths more, to design the core tools,” he suggests.

At the intersection of design and engineering, we’ll need a new language to describe the processes we develop.

This piece was updated on 4th July 2022 to correct confusion between the iPhone’s rubber band effect, invented by Bas Ording and the “pull to refresh” gesture invented by Loren Brichter with a Twitter app called Tweetie.

---

This is a summary of an interview with Alexander Baumgardt conducted by Ina Feistritzer. It was broadcast on the NEXT–SHOW on 16th May 2023. You can catch up with Alexander and his work on LinkedIn, Facebook and the web.