Agence UX UI pour sites web, boutiques en ligne et applications

Nous étudions la façon dont les gens utilisent réellement votre produit, structurons l’information, prototypons et testons avant la moindre ligne de code, puis livrons un design system que votre équipe pourra continuer à utiliser. Accessible selon le WCAG 2.2 AA dès la première esquisse, et développé par l’équipe qui l’a conçu.

Parlez-nous de votre produit Voir notre méthode

2-3 clics Pour acheter un billet sur le site du TNC
WCAG 2.2 AA Accessibilité dès la conception
Depuis 2009 Design et développement, une seule équipe

01 · Recherche Marque, public et concurrence
02 · Concept Une idée qui ordonne
03 · Système Typographie, couleur et composants
04 · Prototype Navigable et testé
05 · Tests Avec de vrais utilisateurs
06 · Livraison Votre équipe l’utilise dès le premier jour
Chaque test affine le système

Scroll

Définition

Qu’est-ce que le design UX/UI ?

Le design UX/UI consiste à définir comment fonctionne un produit numérique (UX, expérience utilisateur) et comment chaque écran se présente et s’utilise (UI, interface utilisateur). L’UX décide des parcours, de la structure et du contenu à partir des besoins des personnes ; l’UI les traduit en composants, typographie, couleurs et états compréhensibles du premier coup.

Concrètement, il comprend la recherche utilisateur, l’architecture de l’information, les wireframes et les prototypes cliquables, le design visuel, un design system avec ses composants et des tests d’utilisabilité. Il s’applique aux sites web, aux boutiques en ligne, aux applications mobiles et aux plateformes SaaS et, bien mené, réduit les erreurs, les demandes au support et le développement à refaire.

Résumé

Résumé exécutif

Ce que vous achetez avec le design UX/UI, et ce qu’il vous évite.

Le coût d’une mauvaise expérience n’apparaît sur aucune facture : il se cache dans les paniers abandonnés, les formulaires que personne ne termine, les appels au support pour une action qui devrait être évidente et les semaines de développement perdues quand un écran est repensé après avoir été codé. Le design UX/UI ramène ces décisions au début, quand les changer coûte un prototype et non un sprint.

Nous travaillons à partir de recherche et de données réelles (entretiens, analytics, cartes de chaleur, tests utilisateurs), pas d’opinions. Il en ressort la structure, puis des prototypes testés et enfin un design system avec composants, états et règles pour que votre produit grandisse sans perdre sa cohérence. L’accessibilité WCAG 2.2 AA est intégrée dès la première esquisse : contraste, focus, zones tactiles et ordre de lecture se conçoivent, ils ne se rapiècent pas.

Ce qui nous distingue : design et développement forment une seule équipe. Le design validé est celui qui est construit, et la personne qui l’a conçu vérifie qu’il est respecté. C’est ainsi que nous avons travaillé pour le Teatre Nacional de Catalunya : la refonte UX a ramené l’achat de billets à 2-3 clics et réduit le LCP mobile de 37 %.

-37 % LCP mobile après la refonte du TNC
+35 % Réservations directes au Tamarit Beach Resort
+200 % Dons en ligne chez Ampans

Ce qui est inclus

Ce que comprend le design UX/UI

Chaque phase laisse un livrable exploitable, même si un autre prestataire développe.

Recherche utilisateur : entretiens, analyse des données d’audience et des cartes de chaleur, regard sur la concurrence
Architecture de l’information : plan des contenus, navigation, taxonomies et parcours des tâches clés
Wireframes et prototypes cliquables sur Figma pour valider les parcours avant d’investir dans le visuel
Tests d’utilisabilité avec de vraies personnes sur le prototype, avec des constats hiérarchisés
Design d’interface fondé sur votre marque : typographie, couleurs, icônes, états et micro-interactions
Design system : composants, tokens et règles d’usage pour que votre équipe crée de nouveaux écrans cohérents
Accessibilité WCAG 2.2 AA dès la conception : contraste, focus visible, zones tactiles et ordre de lecture
Design responsive, mobile d’abord : chaque écran pensé pour mobile, tablette et ordinateur
Accompagnement du développement : spécifications, revue de ce qui est construit et ajustements fondés sur les données après la mise en ligne

Pourquoi

Design UX/UI, webdesign et branding : qui fait quoi

Trois services voisins, aux objectifs différents.

Le branding définit qui vous êtes : stratégie de marque, logo, identité visuelle et ton. Le webdesign est le projet d’un site vitrine qui porte cette marque et transforme les visites en contacts. Le design UX/UI va un cran plus loin : comment un produit fonctionne pour de vraies tâches, comme acheter, réserver, créer un compte, le gérer ou travailler chaque jour sur une plateforme. Vous en avez besoin quand le problème n’est pas l’image, mais que les gens n’arrivent pas à faire ce pour quoi ils sont venus. Si c’est la conversion d’un site qui fonctionne déjà qui pèche, commencez par le CRO.

design-system/bouton.json

// Un composant, toutes ses règles

"bouton-principal": {

"etats": ["normal", "survol", "focus", "desactive", "chargement"],

"contraste_min": "4.5:1",

"zone_tactile": "24x24 px minimum",

"focus": "visible, 3:1 sur le fond"

}

Avec états Composants
WCAG 2.2 AA Accessibilité
Testé Prototype

Points clés

Ce que nous concevons

Des produits dont l’usage dépend de l’expérience.

01
Sites aux tâches complexes

Programmations, moteurs de recherche, espaces privés, réservations ou billetterie. Pour le TNC, nous avons repensé la navigation dans la programmation avec des filtres et les fiches de spectacle avec une hiérarchie claire (dates, distribution, prix et bouton d’achat).
02
Boutiques en ligne et parcours de réservation

Fiches produit, collections, panier et tunnel de commande. Au Tamarit Beach Resort, l’UX mobile mène la réservation en 3 étapes, avec galerie et comparateur d’hébergements.
03
Applications mobiles

Parcours, navigation et composants pour iOS et Android, dans le respect des conventions de chaque système, avec des zones tactiles et des états pensés pour le pouce. Nous les développons dans notre offre de développement d’applications mobiles.
04
Produits numériques et SaaS

Tableaux de bord, longs formulaires, droits d’accès et usage quotidien intensif. Nous le faisons aussi pour nous : Nexo, notre propre plateforme de CRM, projets, facturation et suivi du temps, nous l’avons conçue et nous l’utilisons chaque jour.
05
Design systems

Bibliothèque de composants, tokens et documentation pour que plusieurs équipes ou prestataires conçoivent et développent avec les mêmes briques, sans réinventer chaque écran.
06
Audits UX et d’accessibilité

Revue heuristique, analyse des données et tests utilisateurs sur l’existant, avec une liste de changements hiérarchisée. S’il faut se conformer à la réglementation, notre service d’accessibilité web prend le relais.

Notre méthode

Comment se déroule un projet UX/UI

De ce que l’on sait de vos utilisateurs à un design testé, prêt à être développé.

01
Découverte et recherche

Entretiens avec votre équipe et avec des utilisateurs, analyse des données d’audience, des cartes de chaleur et des demandes au support. On en tire les objectifs, les tâches clés et les problèmes à résoudre.
Selon le périmètre
02
Architecture et parcours

Plan des contenus, navigation et parcours de chaque tâche clé. Nous décidons ce qui va sur chaque écran, et dans quel ordre, avant de le dessiner.
Selon le périmètre
03
Prototype et tests

Wireframes et prototype cliquable testés avec de vraies personnes. Ce qui n’est pas compris se corrige ici, quand cela coûte peu.
Itératif
04
Design d’interface et design system

Design visuel fondé sur votre marque, avec tous les états de chaque composant et les règles d’accessibilité WCAG 2.2 AA documentées.
Selon le périmètre
05
Développement et mesure

Nous accompagnons le développement (le nôtre ou le vôtre), vérifions que le résultat respecte le design et mesurons, données à l’appui, ce qui fonctionne après la mise en ligne.
En continu

Pour qui

Est-ce pour vous ?

Le design UX/UI est rentable quand des personnes ont des tâches à accomplir et que des données permettent de mesurer si elles y parviennent.

Pour qui

Entreprises dont le site ou la boutique égare les visiteurs, les fait abandonner ou les pousse à appeler pour une action qui devrait être simple.
Équipes qui vont construire une application ou un SaaS et veulent valider les parcours avant de coder.
Produits qui ont grandi à coups de rustines et ont besoin d’un design system pour retrouver leur cohérence.
Organisations soumises à des obligations d’accessibilité (WCAG 2.2 AA, European Accessibility Act, RGAA) qui préfèrent la concevoir dès le départ.
Équipes produit ou de développement internes qui ont besoin de designers dotés d’un regard technique.

À qui cela ne s'adresse pas

Si vous avez seulement besoin d’un site vitrine simple qui transmette votre marque : un projet de webdesign classique suffit.
Si c’est l’identité de marque elle-même qui manque (logo, couleurs, ton) : commencez par le branding.
Si vous cherchez de beaux écrans sans temps pour la recherche ni les tests utilisateurs : nous ne vous livrerions pas ce que nous vendons.

Livrables

Ce qui est inclus et ce qui ne l’est pas

Ce que vous recevez à la fin d’un projet de design UX/UI.

Inclus

Rapport de recherche avec les tâches clés, les problèmes relevés et leur priorité
Architecture de l’information et parcours des tâches clés
Prototype cliquable sur Figma et résultats des tests d’utilisabilité
Design de tous les écrans convenus, sur mobile, tablette et ordinateur
Design system : composants avec leurs états, tokens et règles d’accessibilité
Fichiers de design modifiables et propriété de tous les livrables

Non inclus

Développement et programmation (chiffrés à part, avec notre équipe ou la vôtre)
Création d’une marque et d’une identité visuelle à partir de zéro (c’est un projet de branding)

La preuve

Un design qui se mesure en résultats

Pour le Teatre Nacional de Catalunya, nous avons mené une refonte UX centrée sur les tâches : l’achat de billets se fait en 2-3 clics, le LCP mobile a baissé de 37 % (de 3,8 à 2,4 s), les pages par session ont augmenté de 18 % et le site est conforme WCAG AA. Au Tamarit Beach Resort, nous avons conçu une réservation mobile en 3 étapes sur son propre moteur de réservation, et les réservations directes ont progressé de 35 %. À la Fundació Ampans, un design inclusif conforme WCAG 2.1 AA a accompagné une hausse de 200 % des dons en ligne. Et chez TwoPoles, la refonte des fiches produit et des collections, mesurée par le CRO, a fait passer la conversion de 2,1 à 2,5 %.

2-3 Clics jusqu’à l’achat de billets (TNC)
3 Étapes de la réservation mobile (Tamarit)
+35 % Réservations directes (Tamarit)
5,0 Note sur Clutch

Pour le CTO

Résumé pour le CTO

Comment le design s’articule avec l’ingénierie.

Nous concevons en composants avec tous leurs états (normal, focus, erreur, vide, chargement, désactivé) et avec des tokens de couleur, de typographie et d’espacement qui passent tels quels dans le code. Le design system et la bibliothèque de composants parlent ainsi la même langue, et un changement de marque n’oblige pas à revoir chaque écran.

L’accessibilité est spécifiée dans le design : contraste de 4,5:1 pour le texte et de 3:1 pour les contrôles et le focus, zone tactile minimale, ordre de focus et sémantique de chaque composant. Elle est ensuite mesurée avec axe-core et des lecteurs d’écran, pas à l’œil. La performance se conçoit aussi : poids des images, polices et animations qui ne compromettent pas les Core Web Vitals, comme pour le TNC.

Technologies

Figma
Design tokens
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Des composants avec tous leurs états, pas seulement le cas idéal
Des design tokens qui passent dans le code sans réinterprétation
Accessibilité WCAG 2.2 AA spécifiée et mesurée avec axe-core
Performance prise en compte dès le design (images, polices, animation)
Revue de design de ce qui est construit avant la mise en ligne

Risques et comment nous les couvrons

Les risques que nous évitons

Ce qui tourne souvent mal dans un projet de design.

01
Concevoir selon l’avis de la personne la plus haut placée dans la réunion

Atténuation
Chaque décision importante s’appuie sur la recherche, les données d’usage ou des tests utilisateurs, et elle est documentée.
02
Un beau design impossible à construire, ou construit autrement

Atténuation
Design et développement forment une seule équipe : le design est validé avec un regard technique et nous revoyons le résultat avant la mise en ligne.
03
Une accessibilité ajoutée à la fin, à coups de rustines

Atténuation
Contraste, focus, zones tactiles et ordre de lecture sont définis dans le design system et mesurés avec axe-core.
04
Un produit qui perd sa cohérence à chaque nouvel écran

Atténuation
Un design system avec composants, tokens et règles d’usage que votre équipe peut continuer à utiliser sans nous.

Technologies

Outils

Ceux avec lesquels nous étudions, concevons et mesurons.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Design tokens

Questions fréquentes

Questions fréquentes sur le design UX/UI

Ce que l’on nous demande le plus avant de commencer.

Quelle différence entre UX et UI ?

L’UX (expérience utilisateur) décide du fonctionnement du produit : quelles tâches il résout, dans quel ordre, avec quelle structure et quel contenu. L’UI (interface utilisateur) décide de l’apparence et de l’usage de chaque écran : composants, typographie, couleurs, états. Une bonne UI sur une mauvaise UX reste difficile à utiliser ; c’est pourquoi nous travaillons les deux ensemble.

Que fait une agence UX UI ?

Elle étudie comment les gens utilisent votre produit, structure l’information, conçoit et teste des prototypes, crée l’interface et un design system, et accompagne le développement pour que le résultat respecte le design. Chez nous, la même équipe peut en plus le développer.

En quoi est-ce différent du webdesign ?

Le webdesign est le projet d’un site vitrine qui transmet votre marque et génère des contacts. Le design UX/UI se concentre sur des produits à tâches : boutiques, réservations, espaces privés, applications ou plateformes SaaS, avec recherche et tests utilisateurs. Beaucoup de projets de webdesign incluent de l’UX ; c’est la profondeur qui change.

Combien coûte un projet de design UX/UI ?

Cela dépend du nombre de parcours et d’écrans, du volume de recherche et du nombre de cycles de tests nécessaires, et du besoin ou non d’un design system complet. Nous ne publions pas de tarif unique : après une première séance de découverte, nous vous remettons un devis ferme par phase. Chez nous, un site vitrine commence à 4 500 €.

Combien de temps faut-il ?

Cela dépend du périmètre : l’audit UX d’un parcours n’a rien à voir avec le design d’un SaaS complet. Repère réel : la refonte complète du site du TNC, design et développement compris, a duré 8 mois. Après la découverte, nous vous donnons un calendrier avec des jalons.

Faites-vous des tests avec de vrais utilisateurs ?

Oui. Nous testons les prototypes avec des personnes proches de vos utilisateurs avant de coder, puis nous mesurons après la mise en ligne avec l’analytics et les cartes de chaleur. Ce qui n’est pas compris se corrige dans le prototype, là où cela coûte le moins.

Qu’est-ce qu’un design system, et en ai-je besoin ?

C’est la bibliothèque de composants (boutons, formulaires, cartes, tableaux) avec leurs états, leurs tokens et leurs règles d’usage. Il vous en faut un si votre produit compte beaucoup d’écrans, si plusieurs personnes ou prestataires conçoivent et développent dessus, ou s’il doit grandir. Pour un petit site, une charte graphique suffit.

Le design est-il conforme WCAG 2.2 AA ?

Oui, d’office. Contraste suffisant, focus visible, zones tactiles, ordre de lecture et textes alternatifs sont définis dans le design, puis mesurés avec axe-core et des lecteurs d’écran. Si vous avez besoin d’un audit formel ou de vous conformer à l’European Accessibility Act, nous le faisons via notre service d’accessibilité web.

Pouvez-vous concevoir et laisser mon équipe développer ?

Oui. Nous livrons des fichiers modifiables, le design system et les spécifications, et nous accompagnons votre équipe pendant le développement. Si vous préférez que nous le construisions, design et développement sont dans la même équipe, sans passage de relais.

Concevez-vous des applications mobiles ?

Oui : parcours, navigation et composants pour iOS et Android, dans le respect des conventions de chaque système. Si vous devez aussi la développer, consultez notre offre de développement d’applications mobiles.

Prochaine étape

Dites-nous ce que vos utilisateurs doivent accomplir

Une visioconférence de 30 minutes pour comprendre votre produit et là où les gens bloquent. Nous vous disons comment nous l’aborderions et quel périmètre cela représenterait.

Parler de mon produit