There have been a few posts on the blog about QR codes, but so far we haven’t looked at how to change them visually to fit into branding guidelines. Jacqui Lockwood from University of Warwick worked on a project to do just that for their library, and this post shares her experiences and provides you with tips for doing the same.

Jacqui Lockwood is the Learning Grid Officer at the University of Warwick Library. Her role mainly involves working alongside the Learning Grid Coordinators, assisting in the smooth running of the four Grid sites and developing the service to ensure it is at the forefront of innovative teaching and learning within the university. She also is involved in marketing, disability awareness, and QR code working groups as well as several other projects. Before this post she worked as a Library Adviser in the Enquiry Support Team and was involved in the development and marketing of the recent Just ASK campaign.

Where it all began

So, let’s face it, QR Codes look rubbish. They’re boring, monotone, blocky, and ugly.

Despite this, they do provide a quick and easy route for customers to reach web based information and resources. The question is how can we use QR Codes without ruining the aesthetics of the overall product?

For those who don’t know, a QR Code is 2-D barcode developed by Denso Wave  (QR Code is a registered trademark of Denso Wave) with the aim of being easily read by a scanner and the potential to hold a great deal of information. On release in 1994, it was originally picked up by automotive companies to help keep track of manufacturing processes. However, thanks to Denso Waves decision not to exercise their patent rights and the emergence of barcode scanning software available on smartphones, advertising moguls saw an opportunity.

It wasn’t long before these little black and white boxes started appearing everywhere, from posters to trucks, drinks cans to coins. The trouble was that people were starting to get a little bored.

So, what was next? One by one, companies and ad agencies started to play around with a rather useful feature of QR Codes – the ability to have an error correction capability of up to 30%. Although this was originally created to assist with the restoration of data, even if the symbol is partially dirty or damaged, it can be exploited to include branding as part of the image.

Applying it in the Library…

With such a strong brand identity in place in the University of Warwick Library, it seemed possible to incorporate this into QR Codes to make them part of our designs rather than a scar on them. In May 2012, with the development of the Just ASK campaign building pace, there was an opportunity for me to give this a go.

Warwick Print and the Just ASK marketing team had finalised the branding for the campaign….

The design seemed to lend itself quite well to the development of a branded QR Code. It took quite a while to get it quite right though…

Version 1

Starting out with the full word in the middle of the code, although it works and looks quite nice, it didn’t quite keep in with the branding as much as we’d like, so it was back to the drawing board.

Version 2

Taking the original image from the branding and popping a black QR code over the top worked in matching the branding but the results when trying to scan the code with such a dark background weren’t ideal. People aren’t likely to spend ages trying to get a code to scan, it needed to work first time.

Version 3

Version 3 became the shining light in this project, the QR code would work in the red and blue picked for Just ASK (the Stewards using black meant that they’d never be much of a problem.)

Version 4 – the final product

As incorporating the codes into the advertising went on, the text at the bottom was abandoned and we were left with three clean, crisp, and far less boring QR Codes ready to stick wherever was relevant. All three scan quickly, even when reduced down and printed to sizes below 1.5cm square.

We added them to our advertising material and that was that…

So, how’s it done?

When first playing about to get an idea of how much you can utilise the error correction capabilities, we started off using Gimp (mainly because it was the only image editing software, besides paint, that I had on my computer!) This was, at times, a little fiddly and it proved easier when playing around, to import the different sections as layers and move them about in Microsoft Publisher.

Once I’d realised the sorts of sizes you can get away with, the colours that work and don’t work, and the key locations that need to be kept free of any branding, it was back to proper image editing software to get them just right.

With the help of our in house IT team, the final QR Codes were created in Adobe Illustrator as vector files. This meant we could change them to any desired size without losing resolution and convert them in to JPEGs when required. The main reason we did this was to ensure that, no matter where we send to image to for printing, it should always arrive as a sharp image. Initial JPEG files sent to the printers came back blurry when incorporated on to leaflet designs.

Developments since then…

Since working on this project, a number of sources have appeared that can help people created braded QR codes without the need for fiddly work in image editing software.
First off is Denso Wave’s own service, LogoQ, the only issue here being that it isn’t a free service. If you’re after a free tool, Unitag helps you customise a branded code to high extent via their free service with the option to pay for more customised work.

Of course, nothing works better than doing it yourself. Any free tool will have limitations on how close you can get it to your branding style.

Would we do it again?

There have been a few other experiments with branded codes at the University of Warwick Library since this project, but the use of all QR Codes, branded or not, is still quite low.

What we learned from this is that, for short campaigns and adverts, branded codes give us a great way of connecting our customers to webpage they may otherwise overlook without compromising our strong marketing style. There is also only a place for these little codes if there is a requirement for the customer to access online material, a pointless link to a redundant website would be a waste of time for both the creator and the scanner.

Now for some top tips…

1. Keep testing your code.
   Don’t think that because it worked when the added features were a millimetre one way that it will work when you move it. Every time you make an alteration scan that code!
2. Print out test sizes.
   Try printing out lots of size variations of your created code and check they all scan. If the QR Code has a lot of data in it, reducing the size can make the individual components hard to pick up by your scanner.
3. Try different scanning devices.
   Don’t just rely on your smartphone. Get an iPad out, or borrow someone else’s smartphone (preferably a different make or model!). You need to make sure that anyone who comes to scan your code should be able to.
4. Don’t make one just for the sake of it.
   QR Codes can be irritating if they don’t serve a purpose. A recent trip to a nearby library presented me with a QR code on a plasma screen that informed me that the corridor below it led to the toilets. Is that really necessary? Codes that don’t provide the customer with something they might actually be interested in can make them reluctant to bother scanning any of the others you put in place.