How&How rebrands software testing company with “retro-futurist” illustrations

How&How has designed a new identity for software testing company SauceLabs, regenerating its robot mascot and creating a logo based on code brackets.

SauceLabs is used by developers to test across the whole development lifecycle, helping them to gain deep insights, pinpoint errors and fix issues efficiently. Developers can then go ahead with creating, delivering, and updating web and mobile apps with its test automation and error monitoring solutions.

The studio was recommended to the SauceLabs by a previous client and, after seeing How&How’s branding of global user insights platform Hotjar, chose to work with the team. Upon seeing the initial brief, How&How founder Cat How says that the team already loved the company name, and that working on a robot mascot design “is pretty much every graphic designer’s dream”.

How&How designed the logo encompass “several key attributes”, according to How. While it appears as coding brackets when stationary, the logo animates and moves between different icons: an abstract letter S representing the company name and a lightning bolt which aims to symbolise speed. The “legacy lightning bolt” is one of the brand’s central assets, says How.

Poland-based illustrator and graphic designer Joanna ławniczak was commissioned to create illustrations for SauceLabs. How says that “the delicacy of her work and her surreal retro-futurism” helped to make “the inaccessible seem accessible”, as the illustrations are able to communicate what SauceLabs does in a digestible way.

SauceLabs’ new robot mascot seeks to be “more abstract” that its predecessor, says How. She adds that it is made of the same elements of “code syntax” used by developers.

Inspired by the software testing traffic light system, How&How created a primary and secondary colour palette for the brand. The primary palette comprises a core green hue, with amber and coral referencing the signifying colours of pass, issue, fail.

The secondary palette uses other tints, shades and colour ratios, “flexing for text, dark mode and light mode […] to ensure maximum accessibility across digital”, says How.

For the primary typeface, How&How opted for Aeonik Fono by CoType Foundry. How says that the team thought it could add “a contemporary twist to classic developer style typography”. The studio used code syntax, as with the logo, to “shape graphic highlighters, textural moments and product logos”, says How.

The SauceLabs website consisted of over 42 components and 40 page designs. How&How used Lottie – a file format for vector graphics animations – to “bring the illustrations to life”, and CSS animations for “micro interactions and to highlight key actions and information”, says How.

A combination of the illustrations, the graphic code system and UI illustrations brought the rebrand together through the website and helped to “explain SauceLab’s large suite of DevOps test tools”, How says.

She adds that “bold, sharp colourways and adaptable module variants” allowed for flexibility and fluency across the website, setting the brand apart from competitors with “a clear, defined brand language which makes it unmistakably SauceLabs”.