Modjo : direction artistique, UX/UI design et site Webflow bilingue d'une plateforme d'IA pour les équipes commerciales

Direction artistique

Trois itérations pour passer d'un logiciel à une marque d'IA

L'ancien site parlait comme un logiciel parmi d'autres : un vert dominant, des captures d'interface partout, une typographie neutre. Modjo voulait l'inverse : affirmer un acteur européen de l'IA pour la vente, crédible face aux grands comptes, sans tomber dans les codes du genre (violets électriques, robots, effets gratuits).

Gemeos a avancé en trois itérations avec l'équipe de Modjo. La première opposait le produit en vitrine à une photographie chaleureuse. La deuxième a gardé la photographie et comparé trois traitements de titre. La troisième a fixé la typographie en capitales et joué le contraste entre sections claires et sombres. La version retenue réunit tout : des photos d'équipes commerciales au travail, des titres en capitales serrées et des mots clés en dégradé saumon.

La palette part de deux encres sombres (#181C27, #2B313D) pour les sections qui portent le produit, d'un lavande très clair (#F3F2F8) pour respirer, d'un saumon (#DA9492) et d'un rose poudré (#EAB9AB) pour les accents et les témoignages, et d'un bleu (#3E81F8) réservé aux boutons. Les titres sont composés en Anton, les textes et l'interface en Manrope ; des halos violet, orange et rose adoucissent les fonds sombres.

Web Design

Un parcours par métier, et la démo à portée de clic

Un commercial cherche du temps gagné, un manager un moyen de coacher, une direction commerciale de la visibilité sur le pipeline. Le site leur ouvre trois entrées : les fonctionnalités, les solutions par enjeu et par métier, et les preuves (témoignages chiffrés, notes G2 et Capterra). Chaque page se termine sur la demande de démo.

Gemeos a dessiné un UI kit complet (couleurs, typographies, boutons, champs) et des sections réutilisables : hero photographique, cartes de fonctionnalités sur fond sombre, frise du fonctionnement, carrousel de témoignages avec le résultat de chaque client, FAQ, bandeau d'appel à la démo. Chaque page est déclinée en mobile.

Product Design

Des écrans du produit qui montrent une seule chose à la fois

Une capture complète de Modjo, réduite à la taille d'une carte, ne se lit pas. Gemeos a redessiné les écrans du produit pour le site : chaque mockup isole une fonctionnalité (les champs CRM remplis par l'IA, la checklist BANT d'un premier appel, le tableau des deals de l'équipe).

Les mockups sont posés sur les dégradés saumon et lavande de la direction artistique. Ils portent les sections de fonctionnalités, la frise du fonctionnement et la carte « Spend more time selling » du site.

Dev Webflow

Un site bilingue que l'équipe marketing fait vivre seule

Le site est développé sur Webflow, en français et en anglais avec la localisation native : chaque page a son adresse traduite (/fr/comment-ca-marche, /en/how-does-it-work) et ses balises hreflang. Les articles, les cas clients, les webinaires, les e-books et les auteurs vivent dans des collections CMS servies par un gabarit unique : publier un cas client ou un article ne demande aucune mise en page.

À la mise en ligne, fin septembre 2024, les articles de l'ancien blog ont été repris dans le CMS et les anciennes adresses redirigées selon le plan préparé avec l'équipe SEO de Modjo. L'équipe a été formée à Webflow, et Gemeos a ensuite continué de l'accompagner sur les évolutions du site.

SEO

Deux langues, une adresse par page, et le blog repris sans perte

Une refonte met en jeu le trafic déjà acquis. La structure a été pensée pour garder les pages qui se positionnaient et en ouvrir de nouvelles sur les recherches des équipes commerciales, fonctionnalité par fonctionnalité et métier par métier.

Les pages de fonctionnalité se terminent par une FAQ qui répond aux questions concrètes des acheteurs (langues prises en charge, accès, coût), chaque article est rattaché à la page de son auteur, et le sitemap XML se met à jour à chaque publication.