Inspiration

What if All Apps and Websites Followed the Same Design System?

Is it even possible, and what would be the effect on UX?

Source: Envato Elements

Much has been written of late about the importance of design systems. It’s a way of ensuring consistency in design throughout a company. Airbnb’s design language system lead Karri Saarinen recently defined it as a ‘set of shared and integrated principles and patterns that define the overall design of a product’.

Using a design system decreases inconsistencies across a company’s products. This means an improvement in brand image, but more importantly, an improvement in user experience. Typography follows a set guide, buttons all follow the same design language, and content is laid out in a structured and consistent way. This makes it easier for the user to navigate a website or app. They can recognise key instances of the design like primary call-to-actions, titles, icons, navigations, and notifications.

The more a user becomes invested in a product, service, or ecosystem, the more familiar they become with their design system. They’ll expect consistent design direction and language across all digital products. It helps first of all to allow them to use the design with ease. However it also conveys a level of trust to the user. When someone is inputting important information, they expect to feel safe and secure. Phishing scams and fake websites now better than ever at replicating designs. This makes it all the more important that the smallest details are paid attention to.

We can analyze design systems like those created by Google, such as Material Design. It’s present across almost all of their web and mobile products. Or Apple’s iOS, which itself has its own set of design guidelines, patterns, and principles. Even many companies at the very smallest end of the scale employ top designers who define and implement their own design systems. In every case it improves consistency, familiarity, and brand recognition. Most importantly, it improves user experience.

The issue with every company using a different design system is this: people use more than one product. They use multiple products every single day and are finding and using new ones all the time. They may even switch between Android and iOS, or Mac and Windows, on a daily basis – perhaps between work and home. What this means is that each time a user finds and uses a new product, the user interface and user experience is wholly different. Buttons are different, navigations are in all sorts of places, some text is easy to read, some is harder, and so on. The users themselves are required to learn this design system over and over again. It can be incredibly confusing, particularly to those most in need of something simple and understandable.

So the question presents itself: what if all apps and websites followed the same design system? At first, this might seem a ludicrous idea. But by exploring deeper, it’s not as out-there as would first seem.

Source: Material Design

As the most definitive design system available, let’s use Google’s Material Design guidelines as a resource to study this concept. Material Design outlines every single aspect and element of an app design and even crosses over into web. Google has shown just how effective and consistent this system is by applying it across both their mobile and web-based products. Everything conforms to the same direction, from the spacing and styles to the icons and typography.

Using Material everywhere

Designers already borrow a tremendous amount of direction from the Material guidelines. To follow these guidelines closely for web and mobile still requires a great deal of skill but would speed up their process considerably.

How it would look

It would take away from the individuality of websites in some regard. However, Material Design allows for extensive customisation of colors, imagery, and other brand details. This can transform a recognisable design language into something very much on-brand.

Source: Medium

Material is a visually stunning design system which has been compiled by some of the most talented designers around.

User experience benefits

This is the key point for exploring this concept: what would the user experience benefits be? They would be significant:

  • Navigations would follow the same pattern. New users would know exactly where items would be located across products and operating systems.
  • Buttons would be the same. Instantly recognisable, they would speed up flows considerably. No more outline buttons or buttons that are barely large or bold enough to notice. Every button would be clear, easy to locate, and easy to understand.
  • Design elements like calendars, forms, and tables are simple and consistent. Every one of them is optimised for accessibility and a great user experience.
  • Icons would be the same everywhere. A user would see an icon and instantly know what it means. If they were not sure, they’d only have to experience it once in order to learn. There would be no ambiguous or confusing icons which are more focused on aesthetics than user experience.

The list of user experience benefits goes on. In short, everything would be consistent with little-to-no learning curve required. It would be consistent not just across a single product, but across most of the digital landscape.

The reality

Sadly, the reality is far from this simple. A single well-defined design system for web and mobile would indeed see dramatic improvement in user experience. However, there are other conflicting factors. There are one-off sites; those which could not easily conform to a set of guidelines. These include sites which are by definition meant to separate themselves visually. This includes sites for films, portfolios, agencies, sales pages, and more. Some aspects may be possible to incorporate. However, there would be difficulty in applying this system to a predominantly visual design.

There are also standoffs between companies. An example is Apple and Google who both each believe their individual design systems are better than the other. In their ecosystems, design is also a differentiating factor. iOS sells because of its design and integration with its hardware. The same with Android and how it integrates with Google’s services. As a result it’s also a determinant for profits for these companies.

We won’t see anything close to a universal design system in the future. However, we can at least be grateful for systems like Material Design. It continues to push for consistency across Android and is starting to push for the same on web. It continues to supply exceptional and freely accessible resources such as Material Icons. This gives it the best chance of becoming more widely adopted as a design language. In time, this will improve consistency and user experience for as many people as possible.


About the Author Ben Bate

I'm Ben, a Product Designer from the United Kingdom. You can visit my website or follow me on Dribbble.