“We need to grow up”

This was what came out of the team meeting that kicked off a brand refresh for Staff Squared – and my first project as the new designer at Atlas Code.

Staff Squared was launched in January 2012 as an online software application to help small businesses manage their HR. It was the idea of Atlas’s directors, Simon Swords and Dean North. They found out the hard way that failure to automate, schedule, document and manage the employment of their staff can lead to unnecessary HR hassle and can impact on the health of the business itself. This took the form of a missed appraisal, which led to a member of the team leaving the company a long time prior to Staff Squared being born.

Six years later, Staff Squared has grown considerably in popularity and capability; but the branding, including an illustration that appears in many different helpful poses across the website called Sir Pointsalot (aptly named because he generally points a lot), remained unchanged since the launch of the brand. This is understandable because the team have spent all their time and resource on improving and maintaining the software. Logos and branding are often dismissed as just pretty stuff and often gets put on the back-burner when customer feedback, maintenance and new features have to be rolled out.

But the time has come to grow up and to brand Staff Squared in a way that presents the product as it really is – credible, robust and above all, an indispensable HR software solution for small businesses.

Simon Swords, our Director, said of the existing brand: “the colour and overall branding no longer reflects the values Staff Squared now represents and will continue to embody moving forward. It’s time for us to grow up – which is also a good reason for removing that cartoon character from our marketing.”

Ditching and keeping

I set about the process of establishing what was wrong with the existing logo and brand from a design and marketing point of view. I researched and started formulating ideas for a new logo that better reflects who Staff Squared are right now.

The existing logo was created to represent a speech bubble because the software is about the staff and employers within a company communicating with each other; be it requesting and approving time off work, creating staff appraisals which are then documented and archived for reference and to inform future appraisals or allowing staff to update important personal information which is accessible to their employer, for example bank details so that important tasks like payment of wages can be set up. Staff Squared cuts down on unnecessary, insecure and outdated ways of handling HR all around.

Other elements like the handwriting in the logomark (that’s the graphical part of the logo that represents the company and may or may not include the name of the company) was originally chosen to suggest an informal, personable style ­­– something that is very true in that Staff Squared genuinely are a happy and friendly bunch; especially our Customer Care Team, who are dedicated to helping customers use the software and help resolve any problems they may have.

What was missing from the existing logo was a logotype (that’s when the name of the company or brand is written in words and is easily readable), because the logomark may not fully communicate the name of the product. In the case of the existing logo the brand name could be misread. The “2” element while feeling like a clever take on “squared” could also be misunderstood with people calling us “Staff Two” if they don’t already know it’s Staff Squared. The logo is also inflexible as it’s not legible when used at very small sizes.

We wanted to keep a green colour going forward. It represents nature, growth, harmony and freshness ­– who wouldn’t want to associate their product with these positive attributes? Green is also associated with money – and the software certainly does represent a good ROI when it comes to small business HR.

Keeping the green colour also ties in with the need for Staff Squared to retain an element of consistency going forward because it is a prominent colour in the application itself used by all our customers ­­– it’s not cool to suddenly and radically change how the product looks. Major visual changes to software like computer operating systems is something that people hate. We just want to use these tools to get our job done and a fundamental change like a colour from green to say, blue, would at least cause initial upset. As software developers, one of our aims is to gracefully evolve a software interface rather than impose a radical change overnight.

What do you think of this?

I set about creating a mood board of existing online software products to present to the Staff Squared team so I could get their feedback on what they like and dislike when it comes to logos and branding. Having looked at the dozen or so logos I presented, there was a consensus for a more rounded and less formal look – in keeping with the sentiments of the existing Staff Squared look and feel, but with a need to modernise and make it more professional and grown up at the same time. There was also a concurrence around not having all capital letters which we felt looks harsh and ‘shouty’.

Based on this initial feedback, I started working on initial sketches for logomarks. I wanted to reduce the logomark down to its simplest elements and create something that was very easy to recognise at all sizes. This is because logos don’t just appear within websites, but in places like the favicon (the tiny graphic that appears in a browser tab so you can recognise what site is in that tab), on social media profiles where brand recognition needs to be instant, and therefore clarity is very important.

Many of one instead of many of many

I sketched several pages of ideas for the logomark and presented these to the team.

Design note: this is an online application that I’m designing for so why work with pencil and paper? Most designers will start their ideas away from the computer screen when designing things like logos because it allows for more creativity and removes any constraints whatsoever. The logo can then be reproduced and perfected – this is the format that the design has to ultimately end up in, of course. If you use the analogy of a toolkit, the software used to produce the logo is just one tool rather than the toolkit itself.

There was a clear winner amongst the team. It happened to be my favourite too, although I didn’t mention this in fear of influencing their gut reactions.

After the sketches, it was time to get working on the first digital version of the logomark. We decided that it was much better to concentrate on iterating on one idea and exploring what we could do with it instead of splitting time amongst multiple ideas when there was a unanimity over which idea was the strongest.

We called the logomark: ‘S-in-a-square’. It resembles an ‘@’ sign in the way you can draw the ‘S’ and the surrounding partial square in one stroke. It also resembles a paperclip, which is a metaphor for what might be a pile of HR paperwork back in the days when software wasn’t available or if a company is handling this aspect of their business manually.

I set up the ‘S-in-a-square’ with a range of typefaces as a way of exploring how the ‘S’ shape differs quite significantly depending on the typeface. It was interesting how some of the glyphs (this is a fancy term for a letter) were really aesthetic while others were less so ­– made more apparent by using the ‘S’ on its own and combining it with the square shape, connecting the bottom of the letter with the round-cornered square.

Design note: Why are the logos done in black? That’s a good question. The reason for them all being in black is that a logo should work on a level where meaning is conveyed solely by shape ­– colour shouldn’t be used to give or add to its meaning ­– think about Apple’s logo. It is used in many different places and often without colour – like on the reverse of an iPhone where it is currently etched on and is reflective – the shape conveys the meaning irrespective of colour, surface or texture.

12 out of the 13 versions featured the ‘S’ in the shape of a typeface that match potential typefaces for the Staff Squared words. I tried something different on the thirteenth version and made a geometric ‘S’ using the same thickness line stroke as the square surrounding instead of the glyph from a typeface. I also did the Staff Squared in a suitable typeface to show how this might look as part of the entire logo.

I gave each of the 13 versions a rating from one to four stars. I used this as a way of steering the team towards the best versions from a design perspective. This stage of the process marks a move away from getting feedback without coaching the team towards a particular choice because there is a much higher level of subtlety and design understanding involved in order to achieve the best outcome for the final logo.

We decided on a logo

Having agreed on the best choice of ‘S’ and how it works within the rounded square – the ‘S-in-a-square’ – it was time for me to refine the winning version multiple times with decisions around:

To leave the edges of the S sharp as per the typeface or rounded and consistent with the rounded cornered square.

The radius of the rounded square.

To have the right-hand part of the square curve round and meet the S at the bottom or go straight into the ground.

To have a gap between the square and the ‘S’ or join the two together.

The gap size between the ‘S’ and the square having decided that they shouldn’t be joined up.

To make the end of the square that is next to the ‘S’ rounded or sharp.

Generally making elements consistent like radius’ and distances.

After having perfected the logomark I was able to move onto the colour, remembering that we decided to retain green as a colour. I decided to explore different shades of green after a comment was made by the team that it “could be fresher”.

I ended up with three favourite shades of green based not only on their aesthetic appeal, but also on their legibility; particularly when used in body text which we use in the Staff Squared application.

We quickly found a winner which was not radically different from the existing green but just that bit fresher, sharper and very legible – just perfect for the new brand direction.

Design note: The font used for the ‘S’ in the ‘S-in-a-square’ and subsequently for the logotype is Ciutadella Slab Medium.

I put the Staff Squared logomark and logotype together using a range of different colours for the words.

We opted for the third version because we wanted the logotype colour to be the same as the colour used in the body text. This is to cut down on the number of annoyingly similar colours in use across the website and application. The hex code is #515151, a charcoal colour that is a bit lighter than black but not quite grey.

Design note: In its purest form black should be avoided.

The version of the logo that is all green lacks clarity and the distinction between the logomark and the logotype is lost. The blue version meant that we would then have a second dark and conflicting shade in addition the #515151 colour. For these reasons, both versions were rejected.

And here is the final logo

It all stems from the logo

The new logo has also sparked inspiration for other elements of the Staff Squared design. One major aspect of this is that it has lead me to design new icons that we use to represent different functions of the application. The ‘S-in-a-square’ logomark also feels part of the set of icons itself when viewing alongside them.

As part of the Staff Squared logo redesign, I created a Brand Guidelines document which covers how the logo should be used, the typefaces used, colour palettes, icons, imagery and language.

What the logo represents

It is clever. The ‘S-in-a-square’ perfectly represents the name of the brand in a grown up, iconic manner.

The logomark and the logotype can be used independently from one another if required.

The font is unique enough to be different from the various fashionable fonts being used at the moment, but not so different that people wouldn’t like it.

The colours are in keeping with our current brand, but again a tad fresher and more grown up than the previous incarnation.

Spend more time on your business

As part of the logo design process, we brainstormed phrases that would perfectly encapsulate the proposition of Staff Squared as an HR software product for small business owners, HR managers, Project Managers and anybody who needs to handle the employment of their staff.

After many different ideas we ended up with this – “spend more time on your business” – Staff Squared is a software that allows our customers to spend more time running their business rather than getting entangled in doing their HR manually and with all the downtime and risk of human error that this represents.

We look forward to bringing the new logo to life in the Staff Squared application, our marketing website and everywhere that the brand appears.

If you’re not already a Staff Squared customer, sign up for a FREE trial on our website.