Accueil
PortfolioBlogLe studioContact

Notre processus
de conception UI/UX

Nous vous proposons une approche global
afin de proposer une expérience inoubliable à vos utilisateurs.

Notre premier objectif en tant qu'agence de design est d'acquérir de la compréhension et des connaissances sur vos utilisateurs. Nous ferons tout notre possible pour apprendre vous guider vers les meilleures solutions de conception.

Qu'est-ce que l'UX Design ?

En un mot, la conception UX est le processus utilisé pour concevoir des produits utiles, faciles à utiliser et qui répondent aux besoins de vos usagers.

La conception UX est importante car elle place l'utilisateur en premier. Le but de la conception UX est d'améliorer l'expérience utilisateur et d'assurer une interaction transparente entre le produit et l'utilisateur. Une expérience utilisateur positive encouragera les utilisateurs à rester fidèles à vos produit ou à votre marque.
La richesse de l'expérience utilisateur permet de définir plus précisément
le parcours client qui mène au succès votre l'entreprise.

Qu'est-ce que l'UI Design ?

L’UI design (User Interface design) concerne l’aspect visuel vos interfaces (logiciel, d’un site web ou d’une application). L’UI design se rapporte donc à l’environnement graphique dans lequel évolueront vos utilisateurs.
La mission de l’UI Design est importante, car elle va consister à créer une interface agréable et pratique, facile à prendre en main. Cela permettra également à donner
la meilleure expérience possible à vos utilisateurs, en s’attachant plus aux éléments perceptibles : éléments graphiques, boutons, navigation, typographie…

Phase 1

Audit UX

Objectif : Nous allons passez en revue vos produits, les besoins de vos utilisateurs et vos objectifs commerciaux.

Les utilisateurs finaux sont au centre de l’UX. Si un internaute parvient à trouver facilement les informations qu’il recherche, il aura atteint son objectif et reviendra.
C'est pour cette raison qu'il est important d'apprendre à connaître votre clientèle.
Il est donc naturel de vouloir de vous proposer un audit UX dans un premier temps.

  • Qui sont-ils?
  • Que font-ils?
  • Où vont-ils?
Qu'est-ce que l'audit UX?

Il s’agit d’une méthode d’inspection de l’utilisabilité d’une interface utilisateur.
Il consiste à évaluer l’ergonomie et la performance des fonctionnalités du système. Lors d’un audit UX, nous utilisons différentes méthodes et outils de mesures pour identifier les domaines dans lesquels un produit s’éloigne des normes ou des objectifs préétablis. Ces normes sont issues des recherches des spécialistes dans l’ergonomie d’interface, comme Nielsen, Bastien et Scapin ou Amélie Boucher, etc.

Objectifs et exigences de l'entreprise

Avant de commencer à analyser vos produits numériques, nous devons d’abord en savoir plus sur les objectifs commerciaux et les visions de votre entreprise. L’idée principale de cette phase est d’atteindre et de comprendre les objectifs et les résultats attendus. 

  •  Quels sont vos objectifs commerciaux à court et à long terme ? 
  • Qui sont vos utilisateurs ?
  • Quelles sont les valeurs de votre entreprise ? 
  • Quelles sont vos préoccupations concernant vos produits ? 
  • Qui sont vos principaux concurrents ? 
  • Quels sont vos canaux de vente les plus utilisés ?
  • Quelle est votre définition du succès d’un produit ?
Données analytiques

Une fois que nous avons une idée claire de vos objectifs, nous allons analyser vos produits en nous appuyant sur l’analyse des données afin de trouver des réponses à certaines questions telles que :

  •  Données démographiques des utilisateurs
  • Statistiques de conversion
  • Données de vente
  • Flux de trafic et engagement
  •  Cartes thermiques
  • Scrollmaps
  • Analyse de formulaire
  • Résultats du sondage/formulaire
  •  Résultats des tests utilisateurs

Nous utiliserons pour cela différents outils d’analyse, comme Google Analytics et Hotjar afin de transformer les données en informations précieuses sur :

  •  Que recherchent vos utilisateurs ? 
  • D’où viennent-ils ? 
  • À quel moment de l’entonnoir des ventes quittent-ils le navire ?
Évaluation heuristique

Nous allons réaliser une analyse de votre interface au travers d’un ensemble de principes de conception qui permettent d’identifier de nombreux types de problèmes liés à l’expérience utilisateur. Il existe de nombreux critères permettant d’évaluer un produit numérique. Nous utilisons les 10 heuristiques d’utilisabilité de Jacob Nielsen  ou une variante de ces heuristiques adaptées à votre projet :

  •  Visibilité de l’état du système
  • Correspondance entre le système et le monde réel
  • Liberté d’action de l’utilisateur
  •  Cohérence et normes
  • Prévention des erreurs
  • Erreurs explicites et aide à la réparation
  • Minimisation de la charge cognitive
  • Flexibilité d’usage / personnification
  • Esthétique et minimaliste
  • Aide et documentation

Vous recevrez un rapport documenté synthétisant les problèmes découverts pendant cette phase d’audit. Les informations seront triées par impact et gravité et nous vous ferons des suggestions d’amélioration.

Phase 2

Recherche UX

Objectif : Allons à la rencontre de vos utilisateurs pour éliminer l'incertitude.

Cette phase de recherche s'apparente à la phase 1 de la démarche de Design Thinking : l'empathie.
Avant de ce lancer dans la conception d'un produit,  la recherche utilisateur est la première chose à faire. Il est essentiel de bien connaître ses usagers et cibler les bonnes cibles clients. Effectivement, si un produit ne plaît pas à sa cible, c'est que la recherche utilisateur a été mal faite voire oublié au démarche d'un projet. Il est important de bien poser les fondations de vos projets. Nous vous proposons de mettre en œuvre diverses méthodes de recherche UX afin que votre projet puisse commencer sur des bases cohérentes :

  • Analyse concurrentielle (benchmark)
  • Enquêtes auprès des utilisateurs
  • Focus group
  • Enquête contextuelle
Analyse concurrentielle
Benchmark

Au lancement d''un produit, il est important de garder un œil sur nos concurrents, c'est à dire surveiller ce qu'ils font et ce qui fonctionne dans leurs méthodes.
L"analyse concurrentielle va vous permettre de vous comparer avec les leaders qui se positionnent sur votre marché. Notre travail va vous aider à analyser vos concurrents et leurs produits ou service afin de trouver de l’inspiration et des bonnes pratiques pour ensuite apporter une amélioration à votre processus et votre propre performance.

Ainsi, la réalisation du benchmark va profiter à votre l’entreprise de plusieurs manières :

  • L’optimisation de la communication
  • L’amélioration de la gestion de la relation client
  • Le perfectionnement des techniques de fidélisation des clients
  • Le maintien de sa compétitivité
  • La sécurisation de son positionnement sur le marché…
Enquêtes auprès des utilisateurs

Pour connaître l'avis et les besoins de vos utilisateurs, y a-t-il plus simple que les leur demander ?
Les enquêtes sont des méthodes fondamentales qui peuvent être utilisés à toutes les phases d'un processus de conception pour collecter un grand nombre de données sur vos utilisateurs. Ces enquêtes vont vous permettre d'accumuler des données quantitatives et / ou qualitatifs suivant l'objectif des recherches.

Les interviews et les sondages peuvent générer beaucoup de commentaires rapidement et efficacement, c'est une source d'information très enrichissante.
Le secret pour mener à bien cette  enquête est de savoir quelles questions poser, comment les formuler et s'appuyer sur les bons profils d'utilisateurs.

D'après notre expérience, les sondages les plus efficaces sont courts, spécifiques à un sujet et comporter une bonne combinaison de questions fermées et ouvertes.
Il est donc nécessaire de maîtriser toutes les ficelles de ces techniques!

Les personas

Analyser le comportement d'un client ou d'un prospect . Un persona représente les caractéristiques d'un groupe d'individus. Cette personne fictive se voit assigner une série d’attributs qui enrichissent son profil. Les fiches Personas contiennent généralement les informations suivantes :

  • Démographie
  • Besoins
  • Buts
  • Frustrations
  • Motivation

Le but des personas est de réussir à se mettre à sa place, de pouvoir s’en faire une représentation mentale et de s’imaginer sa manière de penser, de se comporter, et de trouver une solution à ses problèmes. C'est un outil essentiel pour le processus de conception UX et fournissent une compréhension plus approfondie du public cible et guident le processus d'idéation.

Les User Stories

Une user story est un scénario bref, une phrase simple, rédigée dans un langage courant, qui permet de décrire avec suffisamment de précision le contenu d’une fonctionnalité à développer. Une user story va vous permettre d'illustrer un besoin fonctionnel exprimé par les certaines typologies d’utilisateurs. Elle vise ainsi à assurer que l’on délivre bien de la valeur pour nos usagers.

Au commencement d’une story fonctionnelle se trouve un besoin. Qu’il soit exprimé directement par l’utilisateur du produit ou remonté par les parties prenantes, et formulé de manière plus ou moins précise, il convient de l’explorer davantage pour être en capacité de le traduire par la suite en fonctionnalité. cela constitue un moyen efficace d'organiser et de hiérarchiser les tâches de conception. Les user stories garantissent :

  • de toujours cibler la conception sur l'utilisateur.
  • de clarifier le processus de conception pour éviter la dérive des fonctionnalités.
User Flow

L'user flow est  la représentation graphique et documentée d’un de ces parcours qu’il est possible d’emprunter. Cette représentation commence d’un point d’entrée jusqu’à la dernière action qui peut être l’achat d’un produit par exemple. Chaque cas d'utilisation est donc écrit comme une séquence d'étapes décrivant comment le système doit se comporter lorsqu'il est déclenché par un utilisateur.

L' objectif est de définir la séquence correcte d'actions que les utilisateurs doivent effectuer pour accomplir la tâche à accomplir. Cette partie de la phase de recherche est particulièrement importante car elle explique aux parties prenantes comment le système fonctionnera et leur permet de réfléchir à des fonctionnalités supplémentaires ou de signaler d'éventuels problèmes.

À quel moment l’utiliser et pourquoi l’utiliser ?

  • Durant la phase de conception et d’idéation
  • Pour optimiser des plateformes existantes.
  • Pour fluidifier la communication
Carte d'expérience

Une carte d'expérience est un outil de conception utilisé pour observer l'expérience d'un utilisateur avec un produit ou un service. Elle permet de comprendre le comportement d’un utilisateur ou d’un client. Cette méthode aide à identifier les points critiques, à engager l’équipe autour d’un projet et à saisir les opportunités d’amélioration ou d’innovation d’un produit ou service. Elle prends la forme d'une visualisation d'une expérience complète qu'un utilisateur traverse pour atteindre un objectif. Vous serez plus apte à reconnaître les opportunités stratégiques, à faire face aux difficultés de vos utilisateurs avant qu'il ne soit trop tard

Storyboards

Vous connaissez peut-être déjà le concept de storyboards de films ou de bandes dessinées. Bien que le niveau de fidélité diffère selon les industries, les storyboards communiquent toujours une histoire à travers des images. Les storyboards sont l'un des outils  les plus efficaces pour diffuser l'information. Effectivement, c'est un outil puissant pour capturer,  connecter et explorer l'expérience pendant le processus de conception. c'est pour cette raison, nous pouvons être amené à intégrer un storyboard dans la phase de recherche. Il y a trois principaux éléments propre aux storyboards :

  • Les scénarios
  • Les visuels
  • Les légendes

Avoir un storyboard fournit un contexte supplémentaire à la fois à vos équipes de conception et à vos parties prenantes.

Phase 3

Conception UX

Objectif :  Organisons les parcours de vos interfaces en fonction des attentes de vos utilisateurs.

Pour arriver à notre objectif, nous utilisons diverses méthodologies qui façonnerons l'ensemble des éléments de conception .Nous mettons tout en oeuvre pour aligner la vision du produit sur la réalité. Voici comment nous procédons :

  • Architecture des informations
  • User Flow
  • Wireframes basse fidélité
  • Wireframes haute fidélité
  • Prototype interactif
  • Rapport de test utilisateur
Architecture des informations


En s'appuyant sur les données collectées pendant la phase de recherche, nous allons construire une architecture d'information pour votre produit. Grâce à une carte mentale, vous aurez une vue d'ensemble du système afin organiser les informations de manière claire et logique. En visualisant la structure globale du projet, il sera plus facile de définir les priorités des fonctionnalités. L'objectif ici est de s'assurer que les utilisateurs trouveront le produit plus utilisable et intuitif. De plus, cette cartographie conceptuelle est particulièrement efficace lorsqu'il est effectué en collaboration avec les parties prenantes.

User Flow

L'user fow est la représentation graphique et documentée d'un parcours qu'un utilisateur doit suivre pour effectuer une tâche spécifique. Cette représentation commence d’un point d’entrée jusqu’à la dernière action qui peut être l’achat d’un produit par exemple. Chaque cas d'utilisation est donc écrit comme une séquence d'étapes décrivant comment le système doit se comporter lorsqu'il est déclenché par un utilisateur. En même temps, il fournit aux développeurs une description de tous les flux d'utilisateurs, des parcours alternatifs et des erreurs possibles.

Il est important de continuer à mettre à mettre à jour ce document. Cela va vous permettre d'itérer plus efficacement sur les flux d'utilisateurs et d'identifier tout les problèmes.

Wireframes basse fidélité

Afin de proposer rapidement une représentation visuelle de la conception et des fonctionnalités du produit, nous nous proposons des wireframes en basse fidélité. L'intérêt de cette démarche est de pouvoir échanger sur une représentation minimaliste de l'interface utilisateur, de ses écrans suivant une l'architecture de l'information précédemment établie. Cette méthode va nous permettre d'apporter rapidement des modifications avant la  conception et le développement. Les wireframes Low-Fi aident à formaliser rapidement un concept de design en communiquant des idées visuellement aux personnes impliquées.

Wireframes haute fidélité

Arrivé à une étape avancée du processus, nous réalisons des wireframes haute fidélité de la conception. Sur la base de notre expérience, les wireframes haute fidélité sont utiles pour avoir une représentation plus précise de ce à quoi ressemblera le produit final avant qu'il ne soit finalisé et servir de support de validation.

Prototype interactif

afin de une visualisation encore plus réaliste du produit en cours, nous créons des prototypes interactifs. Nous le faisons à l'aide d'outils variés, selon que nous voulons tester des fonctionnalités plus simples ou plus complexes avec vos utilisateurs.
Un prototype interactif est bénéfique pour le processus de plusieurs manières, car il :

  • donne vie au design.
  • génère des commentaires avec les parties prenantes.
  • réduit le temps de développement global.
  • agit comme un outil de référence pour les développeurs.
  • permet de valider et teste les hypothèse.
  • Rapport de test utilisateur
Rapport de test utilisateur

Une fois des tests d'utilisabilité terminés, nous élaborons un rapport de test utilisateur qui contient un résumé de nos conclusions, ainsi que des suggestions pour améliorer la conception.

Phase 4

Conception visuelle et d'interface utilisateur

Objectif :  Donnons vie à l'interface graphique de votre produit.

En appliquant tout ce que nous avons appris des utilisateurs et des parties prenantes, nous commençons à développer l'interface graphique de votre produit.
Nous concevons des interfaces cohérentes et évolutives et documentons notre interventions dans un guide de style. Ce document standardise le système de grille, la mise en page, la palette de couleurs, la typographie, les icônes, les logos et les images.

Voici toutes les étapes que nous couvrons dans la phase de conception visuelle
et UI design :

  • Moodboards
  • Maquettes de conception visuelle
  • Animations de l'interface utilisateur
  • Système de conception et bibliothèque d'interface utilisateur
Moodboards

Nous donnons une âme à votre application grâce à son apparence visuelle et l'histoire qu'elle va communiquer à vos utilisateurs. Pour commencer notre recherche, nous commençons à compiler un Moodboard afin de recueillir les divers inspirations de conception autour de nous et vos envies. Nous vous proposons ainsi une planche de références inspirantes adaptée à votre discours de marque.

Maquettes de conception visuelle

Les maquettes de conception visuelle sont une représentation de l'apparence de l'interface utilisateur nous permettant d'expérimenter des schémas de couleurs, de la typographie et des styles pour voir ce qui est le mieux. Nous créons notre guide de style sur la base des directives de marque ou à partir de rien d'un Moodbard préparé précédemment. Elles peuvent être en basse ou en haute fidélité, statiques ou interactifs, mono ou multi-pages. Ces maquettes vont vous permettre d'être réactive rapidement et efficacement avant le développement.

Animations de l'interface utilisateur

Nous créons également de courtes animations dans le cadre de notre conception UX afin d'améliorer la présentation globale et l'interactivité de votre produit. Les animations de l'interface utilisateur montrent les principales interactions, transitions et flux de votre système. Ces animations font ressortir la conception et orientent les utilisateurs vers leur objectif ce qui améliore leurs expériences et l'attachement général avec votre produit.

Design System

Un design system est un ensemble de normes de conception et de code qui renforcent la cohérence de la conception. Nous utilisons une méthodologie atomique pour la conception de cette bibliothèque. Cette méthodologie est composée de cinq étapes qui fonctionnent ensemble pour créer des systèmes de conception d'interfaces de manière plus hiérarchique.

Les cinq étapes de la conception atomique sont :‍

  • Atomes : Éléments de base tels que les étiquettes de formulaire, les entrées et les boutons.
  • Molécules : Groupes simples d'éléments de conception qui fonctionnent ensemble comme une unité.
  • Organismes : Composants relativement complexes qui forment des sections distinctes d'une interface.
  • Modèles : Groupes d'organismes qui fonctionnent ensemble et illustrent la structure de contenu sous-jacente de la page.
  • Modèles : Pages : Le plus haut niveau de fidélité qui montre à quoi ressemblera l'interface avec un contenu représentatif réel en place.

L'un des plus grands avantages de la conception atomique est qu'elle permet une approche plus critique du processus de conception UX et nous permet d'examiner chaque composant séparément et comme faisant partie d'un ensemble plus vaste.
À son tour, cela encourage une conception plus cohérente et évolutive.

Avoir un document de système de conception est une boîte à outils puissante pour vos équipes. Cela leur permet de maintenir la cohérence et l'évolutivité lors de la création de nouvelles pages et de l'ajout de nouvelles fonctionnalités.

Vous avez
un projet ?

Réservez un appel gratuit
de 30 minutes pour échanger !
Réservez un rendez-vous