Structurer le Design System et fluidifier l’achat B2B

Remma est une marketplace européenne spécialisée dans le matériel médical d'occasion et reconditionné (dispositifs médicaux, équipements d'exploration et de laboratoire). La plateforme connecte acheteurs et vendeurs professionnels autour d'équipements à fort panier sur une application web sur-mesure (Laravel Livewire).

‍

La Merkanterie a été mobilisée pour refondre le Design System web, mettre en conformité l'accessibilité visuelle et concevoir des maquettes UX/UI sur-mesure directement exploitables par l'équipe technique du client.

Nous contacter

Client

Remma

Secteur d'activité

Equipements médicaux d'occasion et reconditionnés

La mission en quelques chiffres

100 % WCAG

Palette accessible et mappée Tailwind

21 planches

De charte web-first documentée

4 pages

Refondues et intégrées en HTML

Transformer une charte print en un Design System web-first

La plateforme Remma souffrait d'un décalage entre ses enjeux de conversion B2B et ses fondations graphiques : la charte existante, pensée pour le print, proposait des couleurs non conformes aux normes d'accessibilité et manquait de règles pour le responsive, les grilles et les états d'interaction.

Notre rôle a été de concevoir une charte graphique web-first, d'assainir l'ergonomie des pages clés et de fournir aux développeurs un cadre design clair et directement utilisable.

‍

Le défi : Rassurer, crédibiliser et fluidifier la conversion sur fort panier

L'enjeu UX/UI résidait dans la capacité à créer un environnement visuel moderne et rigoureux, adapté à des transactions médicales exigeantes. Il fallait harmoniser les composants fondamentaux tout en optimisant le tunnel de vente (fiche produit, panier, checkout).

Nous avons mené la refonte design globale : audit UX ergonomique, création de la charte web 100 % accessible, conception des composants UI et intégration HTML des gabarits stratégiques.

Notre approche : Accessibilité, composants Tailwind et refonte des parcours

Notre méthodologie a reposé sur l'immersion dans les besoins techniques et l'optimisation minutieuse des parcours utilisateurs sur Figma.

En traduisant la charte en règles de design strictes (palette mappée sur Tailwind, système typographique responsive, règles d'usage 60/30/10), nous avons structuré une interface B2B lisible et performante.

Comment nous fonctionnons ?

Notre démarche s'appuie sur une méthode rigoureuse pour concilier vision artistique et faisabilité technique.

Audit UX et cartographie des recommandations

Analyse ergonomique du site existant et formulation de 18 recommandations UX priorisées en 3 phases (fondations, composants, parcours).

Création du Design System web-first

Restructuration de la palette visuelle (vert principal, bleu Sky, zinc, couleurs système), définition du système typographique Barlow, des radius et des états d'interaction (boutons, inputs, alertes).

Livrables de charte et règles d'usage

Conception d'un guide de marque web de 21 planches incluant des règles de proportion et des wireframes illustrés pour guider les intégrations futures.

Maquettage UX/UI et intégration HTML

Refonte des 4 pages stratégiques (homepage, fiche produit, panier et checkout) sous Figma, puis livraison de quick-wins et de gabarits HTML/Tailwind CSS directement exploitables.

Une interface accessible et une intégration technique simplifiée

Un design web réussi doit être simple à maintenir pour les développeurs et agréable à naviguer pour l'utilisateur. La mise en conformité WCAG de la charte a permis de renforcer l'ergonomie globale du site.

Cette base UI saine garantit une cohérence visuelle durable sur l'ensemble du site multilingue de Remma.

Un cadre design solide taillé pour la conversion

Le résultat de cette mission est un Design System complet, une expérience utilisateur fluidifiée et des maquettes d'interfaces conçues pour soutenir la conversion sur des produits à forte valeur.

Remma dispose aujourd'hui d'un écosystème UX/UI sur-mesure pour offrir une expérience d'achat B2B fluide et rassurante.

Les logiciels utilisés

Nos réalisations clients

A La Merkanterie, chaque mission part d’un besoin réel, d’un objectif clair. Nous concevons des solutions qui fonctionnent, avec nos clients, pour leurs utilisateurs.

Ces histoires racontent ce qu’on a réellement construit ensemble, avec méthode et engagement.

Découvrez ces projets qui parlent d’eux-mêmes.