Could a UI design system have character? — A system of inconsistencies

On my last visit to Mumbai I became a little obsessed with the road signs. The blue and white taxi signs (above) are among my favourites. Each time I discovered a new one, I got far too excited.

What’s to love about these signs?

Signs of a design system

The 8 distinguishable features of the taxi signs

Having lots of recognisable features = flexibility

My slight obsession with these signs is linked to my slight obsession with brand identities. For any good brand identity (like these signs) having lots of recognisable features has always been important. Just think of Coca Cola with its, logo, red, bottle shape, circle button, and even Santa, to name a few.

Each sign only needs 5 out of the 8 features to still be a recognisable taxi sign. This gives flexibility, and allows for so many variations in material, style, and composition. Even with this variety the signs are still fit for purpose, and even better, it’s together with this variety that makes each sign so individual and interesting.

Number of recognisable features per sign

…could the inconsistencies that help create the individuality and character, together with the hand made nature of the taxi signs be part of a UI design system?

Could a UI design system have character?

A system of inconsistencies

Adding inconsistencies

Left: hand painted vintage road sign Right: vectors created from the original sign

The test

Icons with a human touch

The result

The IBM icons are precise and modular—think lego

The Google icons are cute and playful—think Playmobil

The Redgate icons are grown up — think Dinky Toys rather than Playmobil

The new icons are organic and hand-made — think…Hornby Models

I think the new icons are a success, they’ve captured some of the charm of the Mumbai road signs, and they’re scalable, making them suitable for a UI design system. And while the other sets of icons use geometric shapes making them feel digital and computerised, the new icons have a more human feel.

The new icons feel hand-drawn, yet are still pixel perfect(ish)

Conclusions

Flexibility in a design system is as important as consistency

It’s the flexibility that led to my slight obsession with the Mumbai road signs. Just imagine if the signs were all the same…well, like most road signs…I wouldn’t of even noticed them let alone collected photos of them Pokémon style.

Inconsistencies in a design system can make them more human

— Pete Woodhouse, designer at Redgate

I’ve just realised being purposefully inconsistent could be the same as adding flexibility…maybe just be flexible, on purpose :)

@petewoodhouse | Designer @redgate

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store