Rebrand Tuta : Ouvrir la source de notre nouvel univers visuel
Activez la protection de la vie privée. C'est ce que nous proposons depuis le premier jour de Tuta(nota). Aujourd'hui, l'architecture de notre marque reflète cela dans un nouvel écosystème d'applications.
Une métaphore et son potentiel de narration
Combien de fois avez-vous appuyé sur un interrupteur aujourd’hui ?
Chez Tuta, nous avons pour mission non seulement de proposer des applications, mais aussi de sensibiliser à la sécurité et à la protection de la vie privée sur le web. À cette fin, la narration avec des associations figuratives est un outil puissant pour éveiller les gens au-delà d’une explication technique et rationnelle.
Vous actionnez probablement des interrupteurs tellement de fois par jour que vous ne pouvez même pas dire avec certitude combien de fois, n’est-ce pas ? Nous le faisons si automatiquement que nous ne nous en rendons même plus compte. Il en va de même pour le web. Nous n’y pensons tout simplement pas, mais nous attendons des entreprises numériques qu’elles assurent la sécurité de nos données, par exemple grâce au cryptage. C’est ce que nous faisons chez Tuta et ce que nous promettons à tous nos utilisateurs : Un contrôle total, entre vos mains.
C’est exactement ce que reflète notre identité de marque entièrement remaniée. Avec un symbole minimaliste, plein de potentiel pour la narration, utilisant des couleurs plus vibrantes, nous avons donné à la marque Tuta un look moderne, chaleureux et énergique.
Étape par étape, vous avez pu voir la transition de Tuta vers une nouvelle direction créative. Nous avons d’abord lancé le logo - le changement - dans l’application et sur notre ancien site web. Plus récemment, nous avons lancé notre nouveau site web avec le nouveau slogan : “Turn ON Privacy”. De cette manière, notre narration visuelle sera liée à la fonction de base de ce dispositif : allumer quelque chose facilement. Avec les dernières mises à jour, nous avons achevé une partie importante de notre changement de marque. Les prochaines étapes consisteront à développer la nouvelle marque directement dans le produit.
Lisez la suite pour en savoir plus sur notre processus créatif, les concepts qui ont guidé chaque décision et, surtout, comment cela apportera de la valeur à l’UX et à l’UI de nos produits Tuta Mail et Tuta Calendar.
Nouvelle marque, nouvelles analogies
La conception est un processus, ce qui signifie beaucoup d’itérations et de changements d’itinéraires. Nous avons donc emprunté un chemin sinueux - aussi sinueux que l’ancien logo - pour arriver au nouveau symbole. Sur ce chemin, nous sommes passés par différents concepts, des clichés visuels de la cryptographie (clés, cadenas, bouclier, personnages, etc.), et même des animaux comme mascottes. Dans toutes ces options, il manquait toujours quelque chose. Puis, soudain, il y a eu un “clic
Depuis Platon - ou même avant - les allégories sur l’ombre et la lumière font partie de la philosophie et de la littérature, le mythe de la caverne de Platon n’étant que l’une d’entre elles.
L’interrupteur que l’on utilise tous les jours est porteur d’un grand potentiel. Il s’agit d’un symbole riche en histoires, qui explore la transition entre les espaces publics et privés par le biais de l’ombre et de la lumière. Cette relation n’est pas nouvelle et, dans notre processus, elle a été inspirée par les idées d’Hannah Arendt - qui, comme Tuta, est née à Hanovre. Arendt a longtemps réfléchi sur les sphères privée et publique, considérant la première comme l’ombre douillette des murs de la maison - nécessaire pour nous remettre sur pied en tant qu’individus - et la seconde comme la lumière du jour qui prouve que nous pouvons vivre en communauté, l’espace public où nous pouvons développer notre potentiel. Pour elle, ces deux espaces sont fondamentaux pour une vie épanouie.
Une vie passée entièrement en public, en présence des autres, devient, comme nous le dirions, superficielle. Tout en conservant sa visibilité, elle perd sa qualité de s’élever à la vue à partir d’un terrain plus sombre qui doit rester caché si elle ne veut pas perdre sa profondeur dans un sens très réel et non subjectif.
Hannah Arendt, La condition humaine.
Il a également été constaté que la métaphore du symbole précédent - un chemin vers une sensation de détente grâce au cryptage - était devenue trop subliminale pour notre positionnement actuel. Avec la nouvelle métaphore, nous conservons le credo du droit à la vie privée, mais d’une manière plus objective/matérielle : l’utilisateur a le plein contrôle. Tuta n’ouvre pas seulement la voie à la vie privée, mais c’est aussi un dispositif de protection de la vie privée de tous les jours, simple et facile à utiliser.
Au cours du processus d’audit de l’ancienne marque, nous avons réalisé que la plupart des entreprises technologiques - en particulier dans le domaine du cryptage et de la protection de la vie privée - traitent le sujet avec neutralité et froideur, et que nous pourrions apporter plus d’énergie et de sentiments humains à la nouvelle identité.
Le nouveau look devrait également mieux correspondre à la voix de notre marque, qui a toujours reflété une forte personnalité. Cela signifie que nous ne renonçons jamais à une sécurité maximale, même si cela présente un avantage commercial. Dans cette optique, la nouvelle direction créative a cherché à humaniser et à ajouter de la chaleur à la communication d’un combat pour ce droit fondamental : la possibilité de choisir sa vie privée.
Le sigle : une métaphore visuelle puissante (et pas évidente)
Un espace pour raconter des histoires. Les associations créatives avec la cryptographie permettent de sensibiliser différents publics.
En 2023, nous avons changé notre nom de Tutanota en Tuta. Le nom plus court a également donné un ton minimaliste aux visuels, et nous avons donc cherché une simplicité formelle qui traduirait la mission de Tuta : l’accès à la vie privée pour tous. C’est en partant de ce principe que, après des recherches intensives sur le marketing et la stratégie de marque, nous avons imaginé une représentation graphique de cet objet si présent dans notre vie quotidienne.
D’un point de vue stylistique, le commutateur Tuta ne se veut pas illustratif, et encore moins une représentation réaliste de cet objet. Il s’agit plutôt d’une abstraction minimaliste qui isole certaines propriétés et certains comportements de cet appareil.
Représentation isométrique d’un interrupteur à bascule. La grille de construction de la nouvelle chevalière Tuta utilise une base de rectangles carrés dorés, divisés selon la séquence de Fibonacci (Φ = 1 618).
Bien que minimaliste et isométrique, cette représentation sous forme de logo a cherché à préserver géométriquement le fonctionnement physique de l’interrupteur - d’une manière qui reste suffisamment reconnaissable pour jouer parfois avec la narration dans des animations des positions ON / OFF, ou “Turn ON Privacy” / “Turn OFF Surveillance”, en inversant verticalement la position de la forme originale.
Comme les logos ne prétendent pas être des illustrations réalistes, il y a toujours une place pour la subjectivité et l’interprétation de celui qui regarde. Parfois, nous sommes même surpris de découvrir qu’un logo que nous aimons représente quelque chose que nous n’aurions jamais imaginé. C’est pourquoi nous aimons parfois les logos sans être sûrs de ce qu’ils représentent exactement - leur forme, leur composition ou l’émotion qu’ils véhiculent peuvent suffire à gagner notre sympathie.
Le nouveau symbole ne devait pas être confondu avec quelque chose de négatif ou avec lequel nous n’aimerions pas être associés. Lors des tests de perception effectués auprès du public, aucune association indésirable n’a été identifiée.
La facilité d’utilisation est une qualité qui est toujours recherchée chez Tuta. Quel objet pourrait mieux porter cette notion de choix de la sphère privée avec une telle facilité d’utilisation ? L’objectif d’élargir le public et de permettre à chacun d’accéder à la vie privée a également été pris en compte lors du choix de ce symbole universel. L’animation qui inverse la nouvelle chevalière de Tuta joue sur le storytelling du slogan de la marque, “Turn on Privacy”.
Mot-symbole : caractères minuscules sur mesure
Une fois la conception du symbole finalisée, le défi consistait à trouver le meilleur moyen de créer des lettres typographiquement harmonieuses pour le commutateur, complétant ainsi la conception du nouveau logo. L’utilisation de minuscules, ainsi que de caractères inspirés de la cursive, était une façon de transmettre l’informalité, une façon plus conviviale de présenter ce petit mot avec une grande signification : sécurité.
Notre symbole étant géométrique, nous l’avons équilibré en concevant une typographie qui apporte un contraste à la composition, en proposant des formes plus organiques et expressives, comme le “a”, inspiré de la lettre “a” écrite à la main. Les angles diagonaux de l’interrupteur ont naturellement conduit le caractère vers l’axe italique. Le mot-symbole Tuta a été personnalisé pour notre symbole, de sorte que les diagonales ont directement influencé non seulement l’axe des lettres, mais aussi la découpe des sommets et des extrémités de la lettre “t”. Pour cette mission, nous nous sommes appuyés sur les talents du dessinateur de caractères Fabio Haag, qui a fait un excellent travail.
Couleurs et polices : plus de nuances et de contrastes
La lutte contre les géants de la technologie, la mission de déGoogle, n’est pas une sinécure, et notre approche de ce défi est loin d’être tiède. Pour obtenir l’énergie nécessaire à cette mission, nous avons élargi notre palette de couleurs.
De Tutanota à Tuta. Auparavant froid et monotone (à gauche), aujourd’hui chaud et dynamique (à droite).
L’ancien symbole souffrait d’un problème technique : en petite taille, la fin du chemin disparaissait optiquement, le détail de la dernière courbe devenant trop petit pour être lisible. Le minimalisme du nouveau symbole et les écarts plus généreux et rectilignes rendent le nouveau logo facile à lire en très petite taille sans souffrir de la distorsion des pixels.
La lecture du mot-symbole “tuta” a considérablement gagné en présence et en cohérence, par rapport à la typographie qui était auparavant moins liée au symbole et dont la lecture était plus fragmentée, car elle mélangeait deux graisses de police différentes.
Notre ancienne palette de couleurs était froide et monotone, n’utilisant qu’une seule nuance de rouge, soutenue par des fonds blancs et gris. Avec une gamme plus dynamique, nous nous appuyons davantage sur l’énergie des couleurs pour mener notre combat en faveur de la protection de la vie privée.
La couleur rouge vin classique a été conservée et un nouveau noir chargé de rouge a été mis à jour pour remplacer l’ancien noir à 100 %. Nous avons également ajouté d’autres couches d’intensité à la couleur vin originale, en y ajoutant des nuances secondaires de rouge, de magenta et de rosa. Les couleurs saturées, comme le rouge vibrant baptisé “Fighter”, sont combinées à l’ambiance ensoleillée de l’orange et du jaune, ainsi qu’à la sensation de confort des tons beige et pêche. C’est en gardant à l’esprit cette “ambiance conviviale” que nous avons cherché à contrer l’impersonnalité qui planait sur le blanc et le gris en tant que couleurs d’arrière-plan. Cette décision est conforme à la manière dont nous concevons notre mission, qui est de nature très humaine. Car pour nous, la protection de la vie privée concerne en réalité les personnes et leurs droits fondamentaux.
Nous avons également fait le premier pas vers une meilleure typographie d’entreprise. Notre ancienne police de caractères était un système sans empattement. Pour maintenir l’universalité et la performance, mais apporter un peu plus de contraste typographique, nous avons opté pour le Noto dans les variations Sans et Serif SC. C’est le premier pas vers un système typographique pensé, en particulier pour la nouvelle marque. Et sur le nouveau site web, il est possible de réaliser une hiérarchie typographique plus intéressante.
Imagerie : l’underground monochrome rencontre la pop chaleureuse
Auparavant (à gauche), les images étaient sombres et lourdes, travaillées en appliquant des effets monochromes dans un logiciel. Désormais, la couleur est planifiée avec la lumière, sous la direction créative du photographe Alireza Husseini.
Visuellement, nos décisions créatives reflètent une certaine préservation de notre look punk-hackish, apportant des notes pop au “groupe”, par exemple dans les nouvelles couleurs et illustrations. Notre marque possède désormais une imagerie authentique et nous éviterons autant que possible les bases de données d’images génériques. Notre équipe est celle qui illustre nos valeurs, et pour cela nous travaillons avec des photographes locaux, comme Alireza Husseini, qui a pris les photos de l’équipe pour le nouveau site web. Les illustrations et l’iconographie suivront la même ligne d’auteur, nous travaillons avec des illustrateurs locaux, comme Mel Wilken de Hanovre, et internationaux, comme Feu qui vient du Brésil.
Tuta s’est toujours distinguée comme une marque plus humaine parmi les entreprises technologiques. Tant par ses valeurs moins commerciales que par son aspect plus amical, reflété par le fait qu’il s’agit d’un petit collectif de personnes dont la mission audacieuse défie la logique des grandes entreprises technologiques.
Il s’agissait de choisir entre Tuta et les autres. J’ai parcouru chaque site web pour me faire une idée ; j’ai préféré la convivialité de Tuta et sa culture axée sur le partage des connaissances à celle de l’autre, qui semblait plus commerciale. C’est le côté humain de Tuta qui m’a fait choisir cette voie - l’humanité plutôt que le sentiment de profit - et je n’ai pas été déçu.”
cdrc @cdrc@tux.social, 10 mars 2024
L’aspect pochoir, présent depuis l’ancienne marque, apporte sans aucun doute une valeur underground qui correspond au positionnement de Tuta en matière de révolution de la vie privée.
Dans cette position de protestation punk envers le marché, nous avons essayé de préserver l’essence de ce look underground, comme les illustrations au pochoir de l’équipe, parce qu’elles reflètent la position toujours underground de la lutte contre les géants de l’industrie. Nous aimons être une petite entreprise, nous aimons être alternatifs, nous aimons l’underground, mais cela ne veut pas dire que nous voulons limiter nos solutions à une niche, mais plutôt étendre notre portée en sensibilisant les gens et en favorisant la protection de la vie privée sur le web.
À gauche, quelques-unes des illustrations que Mel Wilken a réalisées pour l’interface de feedback des utilisateurs, et à droite, les illustrations de Feu pour l’interface d’accueil de notre application.
Nos nouvelles illustrations s’appuient sur le concept de contraste entre l’ombre et la lumière / le public et le privé, grâce à des ombres réalisées avec la technique du pointillisme (concentration de points sombres pour créer des ombres). Elles utilisent également notre nouvelle palette de couleurs, plus dynamique.
Phases de rebranding et produits futurs
L’importance de l’image de marque d’une icône d’application est relative et peut dépendre de différents facteurs, allant de la stratégie à la forme. Il est possible d’apporter une cohérence visuelle entre une marque et ses produits de différentes manières, par exemple par le biais des couleurs, du style d’illustration et de la typographie. Au cours de notre processus de rebranding, nous nous sommes rendu compte que nous voulions également intégrer notre marque aux produits au niveau de la forme. C’est pourquoi les icônes des produits Tuta sont dérivées de la grille du sigle de la marque et ont en partie la même structure. La famille d’applications Tuta se distingue par son système de couleurs et ses premiers caractères, tels que “M” pour mail et “31” pour calendrier.
Un logo conçu pour l’architecture de la marque et ses icônes de produits.
Nous sommes actuellement dans la phase 3 de notre rebranding, appelée Développement de la marque. Notre processus a été divisé en quatre phases que nous avons nommées comme suit :
- Audit de la marque (analyse de l’ancienne marque)
- Création de la marque (création du nouveau logo : symbole, mot-symbole et couleurs)
- Développement de la marque (extension de la nouvelle orientation créative à tous les actifs et produits de la marque)
- Mise en œuvre de la marque (adoption d’un système de conception cohérent)
Le processus de rebranding a nécessité la participation de l’ensemble de l’équipe à plusieurs ateliers, à toutes les phases, mais surtout à la phase d’audit de la marque.
Sous la devise encryptage de tout et pour tous, de nombreuses nouvelles fonctionnalités sont à venir avec le nouvel écosystème de produits de Tuta. Inauguration de la famille avec Tuta Mail et Tuta Calendar.
Comme prochaine étape principale de rebranding, nous commencerons à travailler encore plus directement sur l’UX/UI du produit, c’est-à-dire en alignant nos applications avec notre nouvelle direction créative.
Ici, à Tuta, nous sommes tous enthousiasmés par la croissance de nos produits de l’écosystème crypté, répondant aux demandes de différentes personnes et groupes, tels que les entreprises, les cliniques médicales, les activistes et les journalistes. Dans les prochains articles sur le design, nous entrerons plus en détail dans les versions à venir, en montrant comment elles influencent positivement votre expérience avec les solutions cryptées de Tuta.