Design systems without screens

A glimpse into a possible future for design systems

Jules MAHE
UX Collective

--

An empty TV filled with water and rocks
Photo by Sam Balye on Unsplash

As 2022 draws to an end, instead of reflecting the past and thinking about 2023, this is a chance to consider the future of our industry.
Let’s face it, we are living in a rather peculiar moment in our business. On one hand, the tech world is going through dark times: Meta is losing its bet on virtual reality, Facebook, Amazon and many other tech companies are laying off tens of thousands of people, and I’m not even talking about what’s going on at Twitter right now 🙃

At the same time, we have never been more aware of our smartphone addiction. We are reaching a saturation point with our screen consumption after years of binge-watching, and we are now looking for ways to get away from it.

It sounds as though we are declaring the end of technology’s golden age, both for those who make it and for those who use it. If we are heading this way with our technology and interfaces, what does this mean for design? Are all these circumstances leading to the end of anything design related?
Or, what if this marks the beginning of a new era in design, and how does this affect design systems?

A screenless future

A couple in bed looking at their hands, where they’re supposed to hold their smartphone that have been removed
Photo by Eric Pickersgill from its Removed series project

From screenaholism…

The upcoming failure of Mark Zuckerberg’s virtual reality gamble feels almost like a gut reaction to how many screens we’ve consumed in the past decade. The idea of having a screen stuck directly on our faces is perhaps the trigger that we needed to become aware of our relationship with screens. Do we really want this future? Our mental health and our ability to connect with each other have been compromised due to the overuse of screens and we now need to step away from our screens in order to preserve our sanity.

A man looking at his smartphone with his face being sucked into the screen
Photo by Antoine Geiger

Whether it’s about digital detox programs, screen time sensibilization or tools to help you get away from screens, screen addiction is a serious topic. There’s even a movie starring Eva Longoria about it!

But don’t get me wrong. I’m not saying we’ll experience an utterly screenless future. It’s all about balancing and reducing the number of screens in our lives. So, be reassured (or not) that screen interfaces won’t disappear. However, this trend towards fewer screens will bring changes, for sure. And one of the first changes implies that we — as designers — need to think about other ways to create interactions that don’t include a screen.

… to screenless innovation

As a result of our screen addiction, one of the side-effect is developing more interfaces that use fewer screens. And it’s already happening. You probably noticed how voice has become a new playground in our industry over the last few years: Google Home, Alexa, Siri… all these new technologies where we can interact without looking at a screen. It is affecting how we communicate as our conversations have become more voice-driven. We’re not just typing anymore; we’re also sending voice messages to interact with friends and family. It’s as if we are trying to get rid of the screen to take back our lives. This trend has also spread to our social media with new services like Clubhouse or Twitter Spaces, which create new social experiences with only our voices.

Someone putting their phone in a locker before attending a concert
Someone putting their smartphone in a Yondr’s locked case for Madonna’s concert

Although all these examples on voice interactions, I don’t think it means that voice is the new screen. It’s more like a reflection of a desire to escape screens and live in the moment. It’s especially true at live events, such as concerts, where everybody holds up their smartphones to immortalize it. The fact is, none of us are actually living this special moment, as everyone is glued to their screen. Because of this, artists like Bob Dylan, Alicia Keys, Dave Chappelle, Madonna and Jack White have decided to ban smartphones from their shows so that people will experience the event more authentically and focus on living in that moment.

But it doesn’t mean we’re experiencing the end of our technology and going back to Middle Ages. It’s just another evolution of interfaces and our relationship with them. Technology needs to reinvent itself to not only survive but also to redefine our relationship with screens. It needs to offer solutions that enable us to continue using it without being dependent on it. An excellent example of how technology can set us free from screens is Snapchat’s drone, Pixy, a drone-powered camera that can record videos and photos (although it died prematurely, still, the intention of this innovation was fascinating). It’s an excellent example of how we can still develop solutions to help us pursue our needs — like taking snapshots of our moments with friends — without being held captive to technology.
So, what does this mean for our interfaces, and more specifically, what impact will this screenless future have on our design systems?

A screenless design

A piece of paper with braille letters
Photo by Ramona on Unsplash

Back to basics

The reduction of screens in our projects may also lead to a return to the basics of how we work. If we spend less time on the UI and more on the UX, we can spend more time working in an analog way. And what is a better and more natural way for a designer to scribble paths directly? What if you could just sketch the interface and automatically convert it to a coded interface?

The fact that Figma has been offering the ability to draw directly on their tools on the iPad Pro since last March is very interesting. I wouldn’t be surprised if we start using pens instead of a mouse tomorrow. It is another way in which we, as designers, are returning to a more manual and human profession. The screen would be more like a tool for work and no longer a medium only, reducing our relationship with it.

Maybe the next step would be getting rid of the screen as a tool and converting a drawing into an interface directly. This future looks possible with tools like UIzard, Sketch2Code, TeleportHQ, or Artyline, which have explored ways of converting sketches into coded interfaces using AI. Even Airbnb has experimented with this solution for their design system with an AI that turns design sketches into product source code!

As designers, I think it makes more sense to go back to sketching and delegate the UI part to a third-party tool like AI. It’s as if we have been trying to automate our expertise all along, so we can finally get back to the basics of our profession.

GIF of a sketch uploaded on UIzard that becomes a UI interface in a few seconds
A sketch converted to an interface with UIzard

Back to the future

The tools we use are constantly evolving, making us more efficient and productive. From Adobe Creative Cloud to Sketch and the Figma revolution that helped us automate and accelerate our workflow, our designer’s journey is continuously evolving and it’s not going to stop. The next level will most likely come from AI integrations directly into our tools. It has the potential to change how we work and automate many tasks.

Similar to Midjourney and Dall-E, some AI-powered tools (using OpenAI’s GPT-3) are already emerging to generate complete interfaces, such as Debuild, Designer, and more. Some other tools can also help generate placeholders and utilities such as real text, illustrations, color palettes or life-like images with fake people.

GIF showing a demo of Debuild.app where someone is typing some keywords and an interface is building next to it
Example of Debuild.app

Now imagine an AI-powered design system and how helpful it would be. Let’s say we only need to type something or take a picture and this AI would automatically analyze colors, patterns, and shapes and generate design elements for us based on our design system.
The power of AI in the service of design would allow us to focus entirely on the experience to design and free us from the execution. Writing simple instructions to generate the most effective interface and user experience would probably be liberating. Reducing our work to just a few lines of text allows us to focus on the essentials. In return, we could do more meaningful tasks that enable us to better understand and collaborate with our users and colleagues. Through AI, we are liberated from technology’s passive tasks, allowing us to reconnect with each other and reclaim the humanity we had lost through all the time spent behind a screen.

Now let’s get a little crazy and think a little further ahead: can we envision an AI integrating with our thoughts directly to build interfaces based on our imagination? Perhaps even crazier, would the AI generate interfaces directly on its own, based on the habits, behaviors, and tests it observes, eliminating the need for any human interaction whatsoever?
This raises even more questions about our role, but given the speed at which our tools evolve, it is not too crazy to expect this scenario in a few years. I know it may sound a bit scary, but if you have been in the design industry for a few years now, you know that a designer’s role is constantly evolving. Therefore, it is natural as designers to adapt and embrace this change.

A screenless system

Someone using a specific keyboard with unusual keys
Photo by Sigmund on Unsplash

Design 2.0

Having fewer screens to design doesn’t necessarily mean the end of design. Design systems will still bring consistency to our digital products and uniformity to our screen experiences. In response to this standardization, brands will likely seek creative ways to stand out. Whether it is through sound identity, in-store experience, new physical sensations, etc… There is a whole new world for brand and even design systems to explore.

Screenshot of Brainly’s music guidelines page
Brainly’s music guidelines

Future design systems might involve less UI, but new ways to design interactions are available, giving designers a whole new area to explore: sound, voice, physical assets, etc.
For instance, look at what’s already happening with sound identity. We hear sounds from apps all the time and we can even relate a specific sound to its brand: a Slack notification, a Google Calendar reminder or even when you match on Tinder 😉

Some design systems already started to work on these new brand patterns. Brainly has guidelines about their music or merchandising. Decathlon documented their physical assets and product signature. And Intuit has their Content Design documenting things like conversations. There is still so much to explore and document when it comes to new interactions that aren’t always visible, such as haptic interactions, APIs, design tokens, accessibility, UX research, etc.

We must prepare ourselves for these brand evolutions and consider how we include these changes in our design systems for tomorrow.

Design Systems 2.0

Today, you may be working on documenting your buttons, forms, headers, and other components of your design system. Now fast forward a few years, and you’ve finally figured out how to document most of your brand patterns. What’s left to document? A design system never ends and new components and changes will always happen. The point isn’t that your design system will end, but that there are entirely new patterns to explore that will need documenting. Perhaps we should look at our current documentation situation to understand the future of design systems better.

Screenshot of the How We Document survey with a ranking of the most documented patterns in a design system
Excerpt from 2022 How We Document survey by zeroheight

In early 2022, zeroheight shared the results of their How We Document survey, with interesting data about the trend and habits of what design system documentation usually includes. It’s no big surprise, we find that colors, buttons, typography, forms, and so on are the most documented patterns. However, the most interesting part is what needs to adding — looking at the least documented patterns hints at what is to come in the design field. Indeed, after we documented and automated our UI and visual patterns, we’ll need to explore new territories to create new experiences to document. This is especially true for patterns that don’t involve screens. Related to the information above, it seems the patterns left to document are related to things other than a screen such as sound guidelines, accessibility, UX copy, voice and tone, UX research, etc. And that’s without mentioning future technological advances that will certainly impact design systems.

If you were worried about getting bored after working for a few years on a design system, wait for it, it’s only just begun!

Wrapping up

Screens are such an integral part of our lives that it is still difficult to imagine a future without them, but it is interesting to begin forecasting their uses in the future. The purpose of design is to solve problems and help people. So we must look to off-screen uses to help people disconnect and ensure that our profession will endure with these new uses.
The future will be less focused on screens, but more on people, and designers are pivotal in creating this future.

Do you want to take part in this history?

Going further

Related resources that helped writing this article:

A screenless future

AI in design tools

Voice and sound design

--

--

Design Director @PayFit -- ex Design Advocate @zeroheight; Design System Expert @frog and Art Director @fabernovel