Comment tonik a-t-il repensé le site Web de Voucherify ?

La croissance rapide est une malédiction et une bénédiction pour chaque startup à croissance rapide. Lorsque de nouvelles fonctionnalités sont lancées régulièrement et que le marché cible change, un site Web publié l'année précédente peut déjà être obsolète.

C'est un bon signe, mais c'est tout aussi ennuyeux lorsque vos visiteurs ne peuvent pas voir ce que vous faites. Si vous ne mettez pas à jour votre site Web, ils vous jugeront sur la base d'un argumentaire obsolète.

Début 2021, Voucherify était confronté à des problèmes similaires. Le site Web n'expliquait pas bien le produit, les animations étaient très abstraites et sans rapport avec le produit et le style et l'image de marque ne plaisaient pas à l'entreprise, type de client féru de technologie qu'ils essayaient d'atteindre. Les couleurs pastel, les illustrations abstraites et le personnage de dessin animé d'un mineur n'étaient pas suffisants pour faire rire les gens en costume.

Deuxièmement, le site Web semblait piraté plutôt que construit avec soin. Les incohérences mineures, les interactions douteuses et le manque de flux global ne semblaient pas être un gros problème lorsqu'ils étaient examinés séparément - mais ensemble, ils ont fait une mauvaise première impression.

Le défi

Voucherify nous a contactés pour les aider à repenser leur site Web - afin qu'il parle au groupe cible - et à créer un système de conception, pour permettre à l'équipe de lancer elle-même davantage de pages de destination. Mais attendez, qui sommes- nous ?

Nous sommes tonik, un studio de design numérique. La plupart du temps, nous travaillons avec des startups en démarrage pour les aider à lancer leurs MVP, mais cela ne signifie pas que nous ne collaborons pas avec des entreprises plus établies. Des clients comme Segment, Auth0 ou Chronosphere confirment notre capacité à nous fondre dans une équipe existante.

Pour ce projet, nous avons uni les forces de deux designers – Mikolaj Biernat & Mikolaj Szymkowiak – et Aga Kaczmarek, qui a géré les travaux en tant que chef de projet. Avec une affection saine pour l'agilité de la part des deux équipes, nous n'avons pas fixé d'échéances strictes mais souhaitions boucler le projet en quelques mois. Alors, par où avons-nous commencé?

Le processus de conception

Avant de nous salir les mains, nous avons décrit le processus de conception pour définir les méthodes de conception que nous utiliserons pour atteindre l'objectif. Cela nous a également aidés à estimer le calendrier du projet, le nombre d'itérations et la quantité de commentaires dont nous aurons besoin de la part du client à chaque étape. Voici ce que nous avons trouvé.

Création de l'architecture de l'information

Nous avons lancé les choses en créant une architecture de l'information (IA). C'est un diagramme qui montre la relation entre toutes les sous-pages (et parfois aussi leur contenu), ce qui permet d'imaginer facilement la navigation. Lorsque nous travaillons sur une refonte de site Web, nous utilisons l'IA pour comprendre son contenu et visualiser la portée d'un projet.

Créer la bonne humeur

Les clients ont souvent une vision de ce à quoi ils veulent que leur nouveau site Web ressemble. Le moment idéal pour le mettre en page est lorsque nous créons le moodboard du projet. C'est une collection de références visuelles que nous utilisons pour nous aligner sur l'apparence que nous recherchons. La meilleure chose à ce sujet est que nous ne perdons pas de temps à chercher les bons adjectifs - les captures d'écran des benchmarks fonctionnent des milliers de fois mieux.

Le plan

Outre la refonte purement visuelle, l'équipe de Voucherify a souhaité mettre à jour le contenu des pages clés. Ce que vous dites sur votre site Web est bien plus important que la façon dont il est présenté. C'est pourquoi nous avons d'abord travaillé avec des wireframes pour trouver la bonne mise en page du contenu. Vous pouvez les considérer comme le plan directeur du site Web. Ils n'utilisent pas de couleurs, de graphiques ou d'autres effets visuels, il est donc plus facile de se concentrer sur les bases.

Un concert rapide - mise à jour du logo

Lorsque nous avons commencé à itérer sur les wireframes avec les bonnes couleurs et polices, nous avons repéré une opportunité de gain rapide pour Voucherify en tant que marque. Leur logo – sa typographie, pour être précis – semblait déséquilibré. Nous l'avons légèrement modifié pour améliorer la lisibilité sans réinventer l'image de marque.

L' image complète - les conceptions finales

Enfin, grâce à toutes les évaluations que nous avons faites plus tôt, tout s'est mis en place. Le site Web de Voucherify a été repensé avec le nouveau langage visuel. Il convient de mentionner qu'au lieu de travailler sur les conceptions finales à huis clos, nous avons collaboré étroitement avec le développeur Webflow de Voucherify, Piotr, qui livrait chaque sous-page de manière itérative, au fur et à mesure que nous terminions sa conception. De cette façon, nous pouvions réagir à tous les problèmes que nous rencontrions en cours de route et lancer le projet plus rapidement, par rapport au travail en silo.

Construire les LEGO - préparer un système de conception

En parallèle de la refonte, nous travaillions sur le système de conception qui alimente le site Web. Le livrable contenait un ensemble de blocs de construction et des directives sur la façon de les utiliser afin que n'importe quel membre de l'équipe marketing de Voucherify puisse concevoir (construire à partir de composants prêts) une page de destination. Dans une réalité de start-up, les choses évoluent rapidement et vous avez besoin d'outils pour exécuter vos plans rapidement et efficacement - le système de conception devait s'adapter à cela.

Chaque élément de conception - des humbles jetons contenant des informations sur les couleurs, les polices et les ombres, aux sections entières - est soigneusement conçu pour être évolutif à une variété de contenus. Grâce à la puissance de Figma - notre outil de conception préféré (du moins au moment de la rédaction), tous les éléments sont disponibles dans un glisser-déposer sans effort.

Les livrables du projet

Avec quoi avons-nous fini?

Site Web propulsé par Webflow

Bien sûr, nous n'avons pas développé le site Web nous-mêmes - il a été réalisé par Piotr Gacek, le développeur front-end de Voucherify (excellent travail !) - mais il ne serait pas juste de répertorier un fichier de conception comme fruit de notre collaboration. Après tout, un site Web est une pièce interactive sur Internet, et non une image statique. Grâce à Webflow, l'équipe de Voucherify a pu le construire en un rien de temps.

Système de conception

Le système de conception que nous avons créé n'est pas seulement une bibliothèque de conception que nous avons utilisée pour accélérer le processus d'idéation. Pour assurer la cohérence entre les équipes, Piotr a répliqué les composants dans Webflow. De cette façon, Voucherify pourrait faciliter la création de plus de pages de destination à l'avenir. ‍

Actifs marketing

Nous mettons un accent particulier sur les visuels comme les illustrations ou les icônes afin qu'ils puissent fonctionner dans différents contextes. De cette façon, le nouveau langage visuel ne vit pas exclusivement sur le site Web. D'autres ressources marketing, comme les livres électroniques, tirent les éléments clés de la même bibliothèque de conception.

"J'étais le chef de projet du côté de Voucherify pour cette refonte. J'ai vraiment apprécié travailler avec tonik en tant qu'agence de design. Ils ont travaillé de manière agile et itérative, où nous pouvions intervenir à chaque étape de la conception, augmentant le l'efficacité de notre collaboration. Ils étaient toujours ouverts à la critique et ont préparé de nouvelles versions du design autant de fois que nous le leur avons demandé. Ils étaient généralement joignables et répondaient rapidement. Des réunions hebdomadaires et des résumés quotidiens envoyés sur Slack ainsi qu'un tableau de suivi m'a donné une image très claire de l'avancement des travaux et des délais prévus du projet. J'apprécie vraiment la transparence, la clarté et l'ouverture de leur équipe. Nous sommes très satisfaits de la conception finale du site Web. Le système de conception a déjà aidé nous avons créé quelques nouvelles pages de destination et créé près d'une centaine de maquettes promotionnelles. C'est vraiment facile à utiliser, même pour les non-développeurs." – Katarzyna Banasik, responsable marketing produit chez Voucherify.

Et après?

Un lancement réussi plus tard, nous avons entamé un partenariat avec Voucherify pour les aider, ainsi que leurs clients, dans tout ce qui concerne la conception numérique, en nous concentrant sur les produits et l'image de marque. Lisez l'annonce complète pour en savoir plus.