Identity system vs. a logo

This post is part of a series discussing the process we’re undertaking to redesign our user interface and branding. We’re sharing in the spirit of “designing in the open” with the hope that it might be of value to our customers and others in our community.

In my previous post I hinted that we were looking to develop a visual identity system, rather than just a logotype, set of fonts and colours, and how much whitespace to leave around the logo.

While these elements are important, we were more interested in ensuring the branding elements would translate into a variety of different contexts, and that it was flexible enough to accommodate new treatments into the future. (For example, 5 years ago, tablet computers were predominantly represented by eye-candy design concepts from the likes of frog design and IDEO.)

This was especially important for our web application. We wanted a branding system that could enable the Labs team (our internal development and testing team) to make decisions without necessarily having to consult with the design team on every detail. That is, that there were a set of guidelines that could be applied and would make sense whether we were designing for on-screen or off.

Internally, we’ve been referring to this as developing a “design language”. I first heard this term being used in the context of automotive design, in reference to Mazda’s Kodo design language. Mazda have been leaders, I think, in applying this principle across their fleet. You can see the familial resemblance across all their vehicles, from their micro-cars to their SUVs. Each has a distinct personality and character, but is clearly a Mazda. Contrast this with manufacturers like Subaru or Nissan, where each vehicle looks like it could be from a different manufacturer.

Such a system requires a clear set of values and an underlying “story” that enables this kind of translation. In Mazda’s case, it is “soul of motion”, which Mazda’s chief designer Akira Tamatani describes: “The essence of the Kodo design is to capture the beauty and strength of the instantaneous motion of animal and athlete.” He explains (and expands) in this short video interview:

The folks at Studio Sammut really ‘got’ this concept (and demonstrated this in their portfolio) and we think they’ve done a great job of translating this into the brand guidelines we are now using internally to develop the new marketing website and refresh the product design. The underlying story comes from our brand values, and our key value that managing your business financials should be rewarding, and that Saasu is a place where lots of elements of running your business come together.

The visual translation places an emphasis on our customers and their world. It also draws upon the Bauhaus and functionalist design traditions (from which the adage “form follows function” is drawn). This is the same tradition from which Microsoft’s highly regarded “Metro” design language draws upon, and which steps away from the ornamental design style popularised by Apple with their iOS (which runs on iPhone and iPad). Music software maker Ableton is another example of this approach at work.

While the specific design details of each of the products we’ve applied our own design system to are quite distinct (and we are still evolving and refining this language as we gain more experience using it), they retain that familial connection. As a sneak peek of what we mean, here’s a quick shot of a few example treatments. It’s important to note that these are just exploratory examples and don’t necessarily represent the final products.

I feel it important to note that, in keeping with our ‘Engineered’ brand value, this design language is not just about aesthetic look and feel. We’ve also considered performance, device independence and other factors in its development. But that’s a whole different topic… (for another blog post, perhaps.)