How&How a conçu une nouvelle identité pour la société de test de logiciels SauceLabs, en régénérant sa mascotte de robot et en créant un logo basé sur des crochets de code.
SauceLabs est utilisé par les développeurs pour effectuer des tests tout au long du cycle de vie du développement, les aidant à acquérir des connaissances approfondies, à identifier les bogues et à résoudre les problèmes efficacement. Les développeurs peuvent ensuite continuer à créer, livrer et mettre à jour des applications Web et mobiles à l’aide de ses solutions d’automatisation des tests et de surveillance des bogues.
Le studio a été recommandé à SauceLabs par un client précédent et a choisi de travailler avec l’équipe après avoir vu la marque Hotjar de la plateforme mondiale d’informations sur les utilisateurs de How&How. Après avoir vu le brief initial, le fondateur de How&How, Cat How, a déclaré que l’équipe était tombée amoureuse du nom de l’entreprise et que la conception d’une mascotte de robot était « à peu près le rêve de tout graphiste ».
Selon How
Le logo conçu par How&How contient « plusieurs attributs clés ». Alors qu’il apparaît comme une parenthèse codée au repos, le logo s’anime et se déplace entre différentes icônes : une lettre abstraite S représentant le nom de l’entreprise et un éclair destiné à symboliser la vitesse. Selon How, « Legacy Lightning » est l’un des atouts majeurs de la marque.
L’illustratrice et graphiste polonaise Joanna ławniczak a été chargée de créer des illustrations pour SauceLabs. How dit « la sophistication de son travail et son rétro-futurisme surréaliste » contribue à rendre « l’inaccessible accessible » car les illustrations communiquent ce que SauceLabs fait de manière accessible.
La nouvelle mascotte robotique de SauceLabs se veut « plus abstraite » que son prédécesseur
A déclaré How. Il se compose des mêmes éléments de « syntaxe de code » que les développeurs utilisent, a-t-elle ajouté.
Inspiré par les tests logiciels des systèmes de feux de circulation
How&How a créé des palettes de couleurs primaires et secondaires pour la marque. La palette de couleurs principale contient des nuances de base de vert, l’ambre et le corail représentant les réussites, les problèmes, les échecs…
La palette secondaire utilise des teintes
Des nuances et des échelles de couleurs supplémentaires, « ajustées pour le texte, le mode sombre et le mode clair […] pour assurer une accessibilité maximale sur les appareils numériques », How..
Pour la police de caractères principale
How&How a choisi Aeonik Fono de CoType Foundry. How dit que l’équipe pense qu’elle peut « ajouter une touche moderne à la typographie classique de style développeur ». Le studio utilise la syntaxe du code, tout comme le logo, pour « façonner des surligneurs graphiques, des moments texturés et des logos de produits », explique How.
Le site Web de SauceLabs comprend plus de 42 composants et 40 conceptions de pages. How&How utilise Lottie, un format de fichier d’animation graphique vectoriel, pour « donner vie aux illustrations » et des animations CSS pour « micro-interagir et mettre en évidence les actions et informations clés », How..
Une combinaison d’illustrations
Un système de code graphique et des illustrations d’interface utilisateur maintiennent le changement de marque ensemble sur le site et aident « à expliquer la vaste suite d’outils de test DevOps de SauceLab », a déclaré How.