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?
Each sign is individual, and handmade, some painted, screen-printed, drawn, and even photocopied. Each has been created by a different individual, or individuals, has its own character, it’s own materials, using a variety of styles. Yet, and what I love most about them, even with this mixture of methods they’re recognisable as taxi signs — even from a distance.
Signs of a design system
The success of these taxi signs is due to a design system at play. The amount of recognisable features the signs have, and how these features are organised is key. This means that even with the mixture of materials and styles each has enough elements to still be a clearly recognisable taxi sign.
Having lots of recognisable features = flexibility
As you can see from the illustration above the features include; colour, the letter P, taxi cab illustration, arrow, the number, wording, shape of the sign, and the white T shape. That’s an impressive total of 8.
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.
…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?
Of course the features found on the taxi signs are already a big part of all UI design systems, type, colour, icons etc. But could the inconsistencies found on the taxi signs be part of a UI? Or even better — could these qualities be part of a UI design system? And therefore benefit from the efficiency, and scalability that systems bring.
A system of inconsistencies
When it comes to creating design systems adding inconsistencies is going against the grain. However getting the correct balance by adding these inconsistencies in the right places could help UIs have more character, and feel more hand crafted. In this digital world where we are all glued to our screens, this human touch seems increasingly important.
Icons with a human touch
Let’s test this theory, I’ll use the hand painted illustrations on another one of Mumbai’s road signs (above) as a starting point. We can then compare some new icons based on these illustrations to icons created following guidelines from, IBM, Google, and Redgate. We’ll then be able to see if some of the hand made charm of the taxi signs can be captured in a set of icons that are suitable for use in a UI design system.
From the above examples all of the icon sets have different characters:
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.
Flexibility in a design system is as important as consistency
In fact adding flexibility as part of a design system will increase consistency. This may seem counter-intuitive but if a design system isn’t flexible its uses become narrower, and it will become more difficult to use, therefore it will be used less — leading to less 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
The wheels aren’t perfect circles, the corners are not exactly 90 degrees, edges are not perfectly straight…if design systems can replicate real life, and be purposefully inconsistent they can feel more natural — 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 :)