Giving brand a digital home

Over the summer at Haio, we’ve been taking a look at our brand; how it looks, what it feels like and how it tastes. As part of that, we started creating a brand guidelines pack. You know the one.. that beefy PDF document that details all about how your brand works. So we fired up InDesign and got to work. Setting out the building blocks and debating and discussing in turn the different aspects of our brand.

Except there was a problem.

See, we specialise in user-centred design — which means it’s our job to make things that are a) easy to use, b) valuable for the end user and c) deliver on the objectives of the project. In the process of designing our 30+ page PDF brand and design system, we noticed some pretty frustrating downsides:

Finding the damn thing

Buried in the team dropbox, hiding away in a long lost folder somewhere they’re not visible and accessible to the whole team. Even in a nicely organised file structure there’s a large amount of friction between the end user and opening up the pack to trawl through to the 26th page (or was it 28th? I can’t remeber) to find the content they need to complete a quick task. Let alone waiting for Adobe Acrobat to crash, for the millionth time. (Seriously Adobe, what is going on there?)

Brands aren’t static

There is so much that incorporates a brand these days that creating one is a constantly evolving that process — and having a PDF is a very static way of trying to capture that process with little room for development. We’re a product agency so we love iteration, but this also gives us the shudders…

Animation

And what of animation? Movement and animation has become a fundamental component of a brand and how a product works and feels — we can’t demonstrate that inside static documents.

File sharing can get messy

Modern technology has made it super easy to collaborate on projects. In our case, lots of people need access to our brand assets — whether that’s designers, developers, press… the list goes on. Our brand consistency and feel are vital for us, so having a single, easily updatable source of truth is key.

A digital home for brands

These problems sounded like a challenge we wanted to solve — so we put on our thinking caps, got our sketchbooks out and started dreaming up a solution. The result — we created a flexible, component based design system in the form of a web app.

Pages (each with their own URL) give designers and developers access to the asset/code they need, fast.

Combining detailed visual identity, product design components and handy documentation, we found that this structure essentially gives designers and developers a common playbook on how to get things done, quickly and easily. As a result, our products are more consistent — not just visually, but in the way they are approached.

Assets, design files and packs become easily accessible to the whole company, with the added benefit of updating deliverables — all in one place. This also makes handing over guides to clients and collaborators an absolute dream — One URL to rule them all!

Check it out at brand.haio.design

Of course, just like the evolution of brands and technology, we are always learning how to improve this new way of structuring design systems, and having such a useful resource allows us to focus more on creating products that bring real value.

Want to work together?

Drop by, pop up or give us a buzz