Time to Grow up – the Evolution of our Product’s Logo

This post was originally published here on 29th May 2018

“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.

Sir Pointsalot illustration that used to be used by Staff Squared
Sir Pointsalot illustration that used to be used by Staff Squared

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.

The previous Staff Squared logo
The previous Staff Squared logo

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.

Staff Squared logo idea sketches
Staff Squared logo idea sketches

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.

S-in-a-square logomark idea
S-in-a-square logomark idea

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.

Trying out different typefaces for he logotype and matching to the S-in-a-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”.

Testing different shades of green for the logotype
Testing different shades of green for the logotype

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.

Final colour ideas for the logotype to go with the green logomark
Final colour ideas for the logotype to go with the green logomark

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

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.

A set of icons designed for the marketing website and software
A set of icons designed for the marketing website and the software app.

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.

Logo usage guidelines
Logo usage guidelines

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.

New Staff Squared logomark

Eat Lead – Letterpress Exhibition

My letterpress work is to be exhibited at the Atom Gallery alongside leading practitioners in the analog printing community like Alan Kitching, Dafi Kühne, New North Press, and Thomas Mayo.

See more of my letterpress work over on my Instagram

It’s dedicated to Jim Spalding and Ken Cave who were master printers and friends who occupied Atom Gallery’s site from 1996 to 2015, under the name W.H. Jones, a printing company established in 1897 in Stoke Newington.


Born with the smell of ink in my nostrils

My version of “born with a silver spoon”

Being born to a sixth generation printer with roots dating back as far as 1876 in Riga, Latvia and with the smell of ink in his nostrils, paper between his toes, type, shapes and colours all around him; becoming a designerprintmakerphotographer and wordsmith was inevitable for Andrew.

Andrew’s father Leonard, set-up home above his east London printshop so, when growing-up, Andrew was surrounded by the processes and practices of the print industry that worked on all of his senses. The sight of letterforms, colours and graphics, all shapes and sizes; the red light in the darkroom and the brightness of daylight afterwards.The smell of ink and paper, oil lubricating a printing press, the aroma of slightly burnt paper as it passed through the heated elements of a thermographic machine that caramelised the wet ink onto shiny raised letterforms; the stench of printing solvents and photographic processing chemicals. The sound of the printing press, a guillotine blade slicing through paper, a stapling machine and the hum of the fan on a typesetting machine. The touch of uncoated and coated paper, strawboard, anti-set-off spray powder and the fragile matte emulsion side versus the strong gloss side of photographic film.The taste of currant buns from the bakers across the street (there were jobs to be printed and time was never on our side).

Andrew wanted to be the first member of his family to go to University; having a curiosity for most things and the What, When, Why, Where and How of a story or event. After getting straight A’s, Andrew was well on his way but right in the middle of his exams his father passed away. The dilemma was stark — follow his intended career path or inherit the family business — one that he candidly admits was in dire financials straights.

Andrew decided to continue with print. The technologies available for producing designs for were changing from the much revered method of rub-down lettering on plastic sheets called Letraset, to machines like the quirky and slightly ridiculous Strip Printer (allowed headlines to be made on photographic paper exposed via a strip of negative film) and the Kroy typesetter (much like an oversized Dymo machine). Following hot on the heels of these interim typesetting methods was the real game changer: desktop publishing. For the first time entire pages of text, graphics and images could be visualised on screen and output without using expensive photographic methods. The means of producing design for print was becoming affordable and it was a leveller in the industry.

The web came along by the late 90s and Andrew started to embrace this new technology with strap lines like: “Get a website for your business large or small”, “Print is dead!”, and “The web is the road ahead”. Websites started out with HTML text links in underlined blue and animated GIFs. However, the design side of the web quickly took hold when CSS came along with rapid progress towards mobile friendly layouts. Functionality and ease of use became important as technology made it possible to delight users rather than requiring them to have special powers to use a website — Andrew practiced user experience by default, not as a job title but because everything including websites, should be designed and built around making it easier and more pleasurable for people to use and engage with products, services and information.

It all felt like rapid progress at the time where better, faster, cheaper, more versatile processes were embraced all the time. In retrospect some of the technology left a lot to be desired and you could laugh at how idiosyncratic and limiting most of it was compared to what can be achieved today with cross-platform compatibility and open source technology. But those tools and methods made it possible for the technology we have now to exist. And so the story continues.

Almost a quarter-century on, Andrew brings his own unique blend of digital and analog design experience and skill to every project; achieving financial success and clients on four continents. More importantly though, he is motivated by a love of online and offline design, the processes involved in making it happen, the tactile nature of printed work, the convenience and experience of end users, and the appreciation from his clients.

Andrew has over 50,000 followers on Instagram (they chose him as a suggested user twice), has had his work featured by the National Heritage Lottery Fund and according to this newspaper report, has sold a photo of a broken down beach hut for £50,000. He is also a wordsmith and writes about technology as well as his thoughts on being an independent designer. Finally, but no means least, in his spare time, Andrew can be found setting lead or wood type and inking up his printing press in the corner of the design studio, with the imprints of his father’s craft at the forefront of his mind.


The Microsoft Surface Book: a designer’s review

I am a designer, photographer and printer. I’m an Apple fanboy. I have been since Apple resurrected themselves under Steve Jobs with his second stint at the helm in the 1990s. He recruited designer Jony Ive and in 1998 the iMac was born — the oddly shaped, colourful, plasticy all-in-one computer that was not only innovative in design but was also the first to lack a floppy disk drive — remember those? It was an instant hit. I remember looking through the window of a travel agents and seeing rows of these futuristic computers lined up on each salesperson’s desk. What a sight to see after the beige clunkiness of computers that came before it.

Of late though I’ve been wondering about Microsoft who themselves have gone through a resurrection, especially since the launch of their own range of tablet, laptop and most recently, “studio” all-in-ones. It’s the first time in this their 40 plus year history that they’ve made their own computers to run their near-ubiquitous operating system on. I have been intrigued as a designer how these machines look, feel, work and whether I could use one instead of a Mac. I use the Adobe suite of programs plus some other less household names like QuarkXpress (the king of page layout design before InDesign became the norm). It’s pretty standard fare really but things that are important to me are screen quality, reliability, performance and the overall experience because I think that a tool I’m using pretty much all day, most days of my working life should be a pleasure to use.

The Microsoft Surface Book with it’s characteristic Dynamic Fulcrum hinge allows the screen to be detached, turned around and folded over on itself, like a book (although I know at least one bookworm who would view the practice of folding a book like this as heresy).

So I contacted Microsoft and they kindly agreed to let me trial one of their Surface Book laptops.

Not a Mac vs PC review

What I’m looking to do here is to review the machine and my experiences with it, but not by way of a comparison with Apple laptops. I don’t see the point. Each manufacturer and machine has their pros and cons — the arguments around which is better could go on until eternity just like the Windows/MacOS debate and there is no definitive answer in my opinion. Speed comparisons and number crunching are done better by others with their scientific tests. Instead I want to establish if the hardware, software (Windows itself) and the triple input of type, touch and stylus is desirable, useful and productive for the kind of work I do — designing web pages, user interfaces, brochures, editing photography from a shoot, posting images of my work.

A surface less usual

The machine itself comes in a magnesium material that’s neither smooth or rough but is delightfully matt yet smooth and frictionless to the touch. It feels unusual but in a very satisfying way. I dubbed the manufacturing material Surfanium in a recent Twitter response to Microsoft Surface. How well will the material wear I wonder? Who’s had a Surface Book since it’s original release in 2015 and used it a lot?

What’s nice is that the keyboard, hinge and the trackpad are all made from the same material and are identical in colour. It makes for a triumph of minimalist design. After all, this product has the word surface in it’s name so it seems fitting that Microsoft came up with a material that delights.

The minimalist design of the casing, keyboard and trackpad give this machine a unique, modern look.

Nothing to report on the ports, except one

The machine comes with the usual selection of inputs like USB, SD, Mini DisplayPort etc. There’s not much for me to report here except for the charging port which I’ll come back to in a bit as it is more than worthy of a mention.

Who thought a track pad could be so nice?

The one thing I notice about the Surface Book when I’m using it is that the track pad is lovely to use and a very responsive alternative to using a mouse. I’ve never found any other non-Mac laptop to have anything that even resembles a positive track pad experience. In some cases I’ve felt as if the input was being controlled by someone else because it’s not responding properly to the movement of my fingers across the surface. This important aspect of the hardware design of a laptop device has been given thought by Microsoft and the engineering that has gone into this trackpad deserves credit. The only caveat I would mention is that in a quiet room the click on the trackpad is quite noticeable. But in an environment like a coffee shop it’s not noticeable at all. Can we have a volume setting for trackpad clicks?

The power and the volume

The power and the volume buttons are on the top edge of the screen/tablet. They are low profile enough to avoid being visually intrusive when looking at the screen. I initially wondered why these buttons aren’t on the keyboard/base part of the device but I realise that they are needed for when the screen is detached and used as a tablet device since there aren’t any physical buttons on the surface of the screen itself. That wouldn’t work out well at all when used in its role as the screen for the laptop. It’s a case of this being a multipurpose machine so there’s lots of considerations to juggle when it comes to the design and functionality. More on what I think about that in the third part of my review when I will look at the triple whammy of type, touch and stylus that this device has in it’s arsenal of input options.

Charging port

I said this review wasn’t about comparing Macs with PCs but I couldn’t resist sharing this video from a YouTube personality and social media heavyweight called Casey Neistat. Watch from 5:30 onwards where Steve Jobs (I’ve used his name twice now — I told you I was an Apple fanboy) introduces the revolutionary MagSafe to the then new range of MacBook laptops back in 2006. But keep watching as Casey tests out the current MacBook and its charger adaptor. It’s hilarious!

Well, guess what? The Surface Book also sports a magnetic charging port so that you can enjoy the same reassurance that if you trip over the cable the worst won’t happen — well I haven’t tried it out for myself in the way Casey did in his video — I don’t want to find out if it doesn’t work because I only have this machine on loan. And BTW: thank you to James Tarry who is a superb interior and architectural photographer and a good Twitter friend of mine who introduced me to Casey in the first place.

The charging port is magnetic to avoid those expensive slip ups.

Detach and draw

The Surface Book has a detachable screen which makes it a tablet device as well as a traditional laptop. This isn’t unique in the Windows laptop world and there are many designs for detaching and manoeuvring the screen in these 2-in-1 devices. Some seem ingenious, others are just ugly and are in need of a rethink. The cream will rise to the top. The Surface Book has its dynamic fulcrum hinge and this allows the screen to be folded over on itself but annoyingly you can only do this once you’ve detached the screen, spun it around and reattached.

The mechanics the hold the tablet/screen part of the device to the base/keyboard.

For detaching the screen there is the Detach key. When you press it there is a reassuring click which is the sound of the hinges moving so that the screen can be pulled out of the base. The detach key doesn’t respond to a quick tap in the way that normal keys do. You have to press and hold for a bit longer and then the Read to Detach notice appears on the screen. If you don’t proceed to physically detach the screen it reattaches itself automatically. You don’t get the same reassuring click to inform you that the screen is attached again though. The lack of that sound of physical engineering kicking into action always makes me reach for the screen to reassure myself that the screen is actually still attached to the rest of the machine and won’t fall off — so there’s certainly an argument for the clunk sound in both directions of travel.

The detach notice appears in the bottom right hand of the screen

There is a fly in the ointment though. You can’t always detach the screen as and when the mood takes you. If you have a number of programs open like Photoshop for instance you will get this notification after hitting the detach button.

A message asking you to quit some processes before you can detach the screen and go into tablet mode.

Without knowing all the technicalities involved this is because the screen doesn’t have the same level of processing and memory power as the base so you are forced to quit those processes that are using too much power for the tablet part on its own. I found this really frustrating as I may be working on an image in Photoshop and want to switch to tablet mode to make use of the stylus/touch functionality if it’s a better way of completing a particular task. Having said that I’ve not encountered any performance problems when opening up the same applications and work files, and carrying on working on the tablet part after it’s detached. So while switching from using the Surface Book in one format to another isn’t quite seamless, depending on what you’re working on at time it’s not a major problem once you get used to it.

As sharp as a pin

I’ve saved the thing I’m most impressed about to the end. As soon as I started using the Surface Book I was and still remain astonished by the sharpness of the screen. It has a resolution of 3000 x 2000 pixels @267 ppi and sports 6 million pixels. I don’t know how they stack up against other Windows or Mac laptops but I know it’s the sharpest viewing experience I have encountered to date in a laptop device. I have traditionally been against using Windows laptops because the screens always seem to be of such poor quality and as a designer and photographer this just doesn’t work for me, even if I’m just surfing the web or checking email.

I notice how logos on websites in particular, in other words vector images, can look blurry on high definition screens usually because they are not optimised for these high resolution devices. But even when they are I’ve found that some vector images can look soft when displayed at certain proportions of their original size. However, on this Surface Book everything looks pin sharp.

Legacies

However, I have found as I use the Windows 10 OS that some aspects like control panels that are legacies of older versions look less polished and because of the sharpness of the screen they are less legible than the new control panels designed with MDL2 (Microsoft Design Language v2) and Fluent Design. More on this in the next part of my review where I will look at the Windows OS and my experiences of it while using the Surface Book and as someone who hasn’t really used Windows since the days of version 7 or Vista.