The power of a useable styleguide

 

With almost 20 years’ experience working in real estate and technology, Jai Ivarsson is realestate.co.nz’s Head of Product and Development. Here Jai explores the power of a usable styleguide.

Brand and identity are integral to any business, but they aren’t static things. A healthy brand, like a personal identity, should grow and evolve from its experience and learnings.

In 2016, we decided realestate.co.nz had outgrown its then-brand, and that it was time for a refresh. This resulted in an evolution of our logo and a fresh set of brand guidelines.

Going through the updating process across our platform highlighted several pain points. Here’s what we learned:

 

We have to modify how many codebases?

The brand refresh was the first project we embarked on after I joined the company. It turns out, this was the perfect way for me to understand all the different moving parts of our platform.

When scoping out what needed to be modified I discovered quickly that our architecture resembled a typical ‘big corporate’ problem, where different departments are working with silos of data – with no cross-leverage of information.

We had a functioning microservices architecture which unfortunately held all its brand assets locally. So, every codebase needed to be individually updated with new logo files, styling changes and template changes.

 

How do the brand guidelines translate to a digital UI?

Brand guidelines are important because they ensure that everything a company produces follows a familiar pattern and ‘feels’ like the brand. However, translating that into a digital user interface can be difficult.

Applying that interface across multiple products, all with their siloed resources, means it is all too easy to introduce inconsistencies.

 

Styleguide to the rescue

By this stage, it was clear that we needed a styleguide or, more specifically, an interface styleguide.

We needed a resource that defined what everything in our products should look like, from our typography, logos, links, menus and all other UI elements.

Today, our Product and Development team are able to leverage the styleguide when creating new features that require a user interface. Having a concrete ‘look and feel’ to work towards means the UI practically builds itself.

If you’re interested in learning more about interface styleguides, I highly recommend this great article on A List Apart.

 

Now let’s make it useable

While a having interface styleguide was a great improvement, it didn’t really solve our biggest pain point.

If we made a change to how something should look and feel, we still needed to copy that change across to multiple products and codebases, resulting in a lot of the same issues.

This is where our implementation choice for the styleguide resulted in some big wins.

Our first choice was to build our styleguide following the Atomic Design principal, where large, complex user interfaces are built up from the design choices of smaller components. This lead us to use Patternlab as the framework in which to maintain our styleguide.

The big upside of this approach was that our Patternlab styleguide produced all the assets (CSS, images and templates) we needed to update our products automatically. We produced the perfect “build once, use everywhere” design system.

Of course, we aren’t the first to do this. Twitter’s Bootstrap and Google Material Design systems are examples of other companies using this philosophy.

 

Bring on the next evolution

Building an interface styleguide isn’t the end of the story. It should be a living, breathing document that is consistently progressing with the company and its products.

As those who witnessed my recent talk at the Frontend Auckland meetup saw, we are currently evolving how we integrate our styleguide into our codebases by utilising a modular/add-on approach.

The result of all this hard work is we are in a much better place to evolve our branding and user interface across our entire platform. Just don’t tell marketing that we’ve reduced the amount of work a rebrand takes by over 75%...

 

Jai Ivarsson is realestate.co.nz’s Head of Product and Development. With experience working with successful start ups, Jai specialises in finding pragmatic solutions that allow for fast growth. Connect with Jai on LinkedIn here.