Extensibility in Digital Design Systems

5 Oct 2017

Extensibility Illustration

Creating a brand guideline document is a gruelling affair. You know the drill – font sizes, colour, image placement, image treatments, and a long list of do’s and don’ts for the logo. But you almost half know that the document in question will sit, lonely and neglected, on a shared drive somewhere, only to be dug out when a new one is required – and often, from someone else.

The reasons are manifold, but in general, these brand guidelines often don’t consider how any of the brand’s collateral will work digitally, let alone on the company Twitter account or Facebook page. It requires a carefully considered plan regarding how all of these assets are going to work for the client going forward, rather than focusing on quick wins and undercooked frameworks.

Bring on the System

This sort of thinking requires a design system, rather than brand guidelines. What’s the difference, you ask? A system, by the definition of the word, is a self-contained and complex whole, with every last element working towards the incipit goal. Systems are often cyclical and continue to grow within the boundaries of the system, whereas guidelines, in contrast, merely point you down a linear route with a definite end and no intrinsic scope for growth.

Systems sound great, right? Why don’t we all start using them? I think, the issue is a complex one, but hear me out. Making a system won’t make bad design or thoughtlessness a thing of the past. The same issues could still arise from the use of a system - after all, the output depends on the input, and is a huge factor in assessing the usefulness of the system.

In order to make these frameworks work, they need a roadmap - a roadmap which details the extra bits, the things you may not have thought of, and how it may look in the distant future.

This, my friends, is where a fancy word comes to mind: extensibility.

Extensible Design

Extensibility is a word normally used to describe software systems. But let’s nick this concept, and apply it to design systems. For something to be truly ‘extensible’, it is:

  • Scalable
  • Modular
  • Predictive
  • Robust

These above factors allow developers and software engineers to grow their systems even when they have no clue what is around the corner. It’s this mindset that allows a nugget of software to be constantly updated with new features and perhaps even slight changes to the navigation, without looking or feeling completely odd to use. Or of course, without failing miserably.

This foresight is something that desperately needs porting to the world of everyday digital design. By putting in that extra groundwork and thought, designers could rejoice that their system had the longevity it deserves.

Let’s have a more in-depth look at these extensibility principles…

1. Scalability

Extensibility Illustration: an exponential sequence of abstract cubes

Scalability is the ability of a system to grow with the demand on that system. An example would be something like this:

Designer A creates a design system for a small consultancy which contains information and instructions on how the company branding, and all related collateral, on and offline, should be used and in what context. This consultancy suddenly acquires ten other companies, and needs the apply the design system across all of it’s acquisitions. If the design system can successfully accommodate this increase in demand, it could be said to be successfully scalable.

The above example also includes elements of modularity and robustness to be able to scale successfully.

2. Modularity

Modularity Illustration: a cluster of abstract cubes expressing outwards

Modularity is building a system in such a way that adding extra modules, or bits, onto it has been thought about properly and catered for. These modules can add functionality that aren’t addressed by the core system. WordPress’ plugin system is a good example, which allows the functionality of the system to be expanded on demand from a pool of plugins created by a vast, skilled creator base.

With regards to a design system, this would be the ability to create sub-brands which fit seamlessly. These additions can be seen as complimenting the brand - such as the Coke Zero sub-brand, for instance.

3. Predictability

Predictability Illustration: an incremental sequence of blocks

Being able to predict the way that a system will grow (scale) is more planning than a practicable objective. If you have a design system you’ve created for a bank, you would probably predict that there may be some international requirements further down the line. Or that, if said bank only takes deposits at the moment, it may branch out into other offerings in the future such as loans, current accounts and the like.

Planning for the more obvious outcomes makes short work of problems as they arise, and will give a firm basis to continue expanding the system to accommodate needs you could easily guess.

4. Robustness

Robustness Illustration: A number of blocks forming a cube

Robustness is the ability to withstand strenuous interrogation, or the ability of a system to maintain its’ original structure or configuration whilst increasing the workload upon it.

Of all the principles I list above, robustness is the one quality that should be focused on the most, within the context of a design system. Will all elements of this system be useful? Will they be a workhorse you can rely on again and again? If the answer is no, disappear for a bit and test them out, and keep going until you have something you’d be able to use under nearly all circumstances.

It’ll work wonders when pitching a system too - the confidence that robustness will give you will trickle down to others who use it, safe in the knowledge that most of the testing legwork has already been completed.

Existing Extensible Systems

Google's Material Design

Google’s Material Design

It’s now over 3 years since Google’s game-changing Material Design system was unveiled. Within that timeframe, Material Design has become one of the de facto standards of designing for screens, alongside Apple’s Human Interface Guidelines and various frameworks. The reason for this is pretty simple at first glance - Google marketed it well, and came at an enormously beneficial time for the big G.

Prior to Material Design, there were maybe hundreds of Google services which looked completely different to one another. In the first instance this wasn’t a necessarily bad thing; Google was experimenting with a lot of different services at once; some of which are now their best-known products (like Google Drive and Google Docs). They then realised that they needed to unify their disparate brands using a universal design system, which they dubbed Material design.

Apple's Human Interface Guidelines

Apple’s Human Interface Guidelines (HIG)

Apple’s HIG has been lauded (and mocked) over the years, but one thing is for sure, their digital design system is one of the most robust, user-friendly, and extensible in modern times.

Starting with the GUI for Macintosh computers, after the release of the iPhone in 2007 Apple have consistently updated and revised their design language - but one thing you may notice is that the iOS structure pretty much remained the same. This is a fairly great testament to the longevity of their design system which has been translated since onto tablets, phones, watches, even bigger tablets, and gigantic 27-inch iMacs.

The Last Word

Creating an extensible system for design is a pretty huge challenge, with only a handful of the world’s most successful companies successfully implementing them and reaping the benefits that they bring.

Don’t let that put you off, though. We all need a challenge from time to time, don’t we?

Even for tiny design endeavours, keeping extensibility in mind when designing anything is sure to make your project manager love you, your developers rejoice, and product leads tap-dance with unfettered joy.

Happy designing! 👨‍🎨