Comment travaillons-nous avec nos clients et comment les intégrons-nous au processus créatif ? Comment partir d'une page blanche pour arriver à un produit qui répond aux besoins clients et qui séduit les utilisateurs ?

Voilà les questions auxquelles je vais essayer de répondre aujourd'hui. Let's go! 🔥

L'immersion

Comme souvent, pour qu'un projet se déroule bien, la première étape consiste tout simplement à se poser avec notre client pour discuter, échanger, et apprendre à se connaître du point de vue humain et des projets. Commencer à expliquer la manière dont nous travaillons et partager nos points de vue sur le produit à créer.

Il est important à cette étape de convier les bons interlocuteurs : les individus qui vont suivre le projet et travailler au quotidien à nos côtés sur les jours, les semaines, voire les mois à venir. Nous oeuvrons tous pour le même objectif : créer un produit top ! D'où l'importance d'être sur la même longueur d'onde dès le début 😊.

Ces échanges sont capitaux, car dans le design produit, c'est souvent une question de perspective et de confiance. Que tout le monde comprenne où on va, comment et pourquoi, est donc indispensable pour que les futurs échanges soient fluides et plus efficaces.

Pour faciliter cette étape, nous aimons poser diverses questions qui peuvent varier en fonction du projet. Voici quelques exemples :

• Qu'est-ce qui serait considéré comme un échec pour ce projet ?
• Qu'espérez-vous de ce projet ? Qu'est-ce qui serait considéré comme un succès ?
• Quels sont les objectifs du projet ?
• Qui sont les futurs utilisateurs ?
• Quel rôle cela va-t-il avoir dans votre business ?
• Qui sont les personnes qui vont prendre les décisions/valider les choix ?
• Qui sont vos concurrents ?
• Y a-t-il des entreprises qui vous inspirent ?
• Y a-t-il des choses que vous n'aimez pas du tout dans des projets similaires ? Que vous ne voulez pas voir ?
• Avez-vous une charte graphique ? Des éléments existants sur lesquels il faut se baser ?
• Quelles sont les ressources dont vous disposez actuellement ?

L'objectif de ce point est d'aligner tous les participants sur une vision commune du projet et de les éclairer sur les étapes à venir.

L'exploration

À cette étape, on connait le produit, les objectifs à atteindre et les contraintes et on a peut-être même commencé à se faire de nouveaux amis, yay 😃! Mais le produit pourrait toujours ressembler à n'importe quoi... En effet, même en connaissance de toutes ces informations, le champ des possibles est toujours très vaste.

Imaginons que nous sommes architectes et qu'une famille nous demande de construire une maison pour 5 personnes avec 4 chambres et 2 salles de bain 🏠. Sachant ça, la maison pourrait tout à fait être grande, petite, large, haute, sur un étage comme sur 3 étages, blanche, bleue... Tout est encore possible et c'est pour ça qu'il faut commencer à réfléchir à différentes pistes et collaborer pour trouver la plus adaptée !

Nous aimons donc à cette étape travailler sur différentes planches visuelles, on peut parler ici de moodboard. Chaque planche représente une piste et contient des éléments tels que :

• les couleurs
• la typographie
• le type d'imagerie : photos, illustration, visuels 3D...
• la structure des informations,
• des éléments d'interfaces : boutons, animations...

Chaque moodboard doit être assez distinct des autres pour permettre d'identifier une tendance, une direction, un ton. Cela n'est pas représentatif du rendu final du design, mais est un guide pour la réalisation des futures maquettes. Le but est ici de commencer à s'orienter vers une piste plutôt qu'une autre, sans que quoi que ce soit encore complètement défini et gravé dans le marbre. Cela doit donner une idée de la future ambiance du produit, sans rentrer dans des détails superflus ou des considérations trop spécifiques.

En fonction des retours sur les différentes pistes, nous travaillons sur une version plus aboutie en prenant en compte les retours de notre client. C'est un document vivant, sur lequel on doit pouvoir itérer et revenir en cas de problème.

La conception visuelle

Maintenant que l'on a une direction sur laquelle se baser, on commence à appliquer tout ça sur de premières maquettes du produit. Le but ici est de travailler sur des vues clés, assez représentatives en terme de contenu et de composants visuels et d'interface du produit.

L'important à cette étape est encore une fois de ne pas se mettre trop de contraintes et de rester créatif ! En effet, même en ayant défini un style de typographie, une palette de couleurs et un style d'imagerie à l'étape précédente, l'interface peut encore ressembler à n'importe quoi ! Alors on essaie, on teste, on jette notre copie et on recommence jusqu'à obtenir quelques pistes intéressantes qui pourraient fonctionner.

C'est ici encore une fois un travail collaboratif entre nous et notre client. On crée une version, on la présente, on corrige, on itère, on recommence si besoin et on avance !

Et si on a un doute, on peut toujours se replonger dans tout le travail et les informations apportées par l'étape d'immersion. Il faut toujours que tout le monde garde en tête pour qui nous faisons notre produit et pour quel(s) objectif(s).

Quelques éléments une conception visuelle réussie :

• ✒️ Utiliser dès que possible un maximum de vrais contenus : exit le lorem ipsum, on veut travailler avec de vrais textes, pour créer une interface qui s'adapte au mieux au futur contenu. Quand on parle de site vitrine, le contenu représente une grande partie du succès du site et il est donc même nécessaire de le concevoir et de le rédiger en amont, car la ligne éditoriale est une part entière du branding de la marque.
• 🏠 Ne pas forcément commencer par la page d'accueil : lorsqu'on travaille sur un site, on a souvent tendance à vouloir commencer à designer la page d'accueil. Mais la page d'accueil étant souvent un hub permettant de rediriger vers les pages intérieures du site, il est parfois plus pertinent de commencer par une page produit, une page expertise ou autre avant de s'attaquer à la page d'accueil !

La déclinaison

Une fois qu'une direction a été validée, on est dans le concret. On a une base solide, reste à l'étendre à toutes les vues à réaliser. La plus grande complexité selon moi à cette étape est d'arriver à trouver l'équilibre la rigueur et la créativité.

En effet, il faut réussir à ce que toutes les pages aient une cohérence.Et retrouver une ligne directrice dans la navigation et l'enchaînement des vues. Mais il faut également que chaque page soit unique, et apporte ses propres éléments, le but n'étant pas que chaque page soit un copier-coller de la précédente avec un nouveau titre et des photos différentes.

Tout le travail du designer va être de réussir à créer des règles et des composants d'interfaces que l'on va retrouver sur l'ensemble du produit. Nous créons par exemple une palette de toutes les couleurs qui vont être utilisées ainsi que leurs nuances, des règles typographiques et de structures de page ou encore d'iconographie... Si vous souhaitez en apprendre plus à ce sujet et acquérir une réelle méthode efficace de travail, je vous recommande chaudement la lecture de Refactoring UI de Steve Schoger et Adam Wathan. Je ne m'étendrai pas ici sur le sujet des Design Systems car c'est un sujet trop vaste, mais peut-être une prochaine fois ? 😊

Faire tout ça, c'est bien. Mais il ne faut pas oublier de garder chaque page unique et intéressante. Si on reprend l'exemple de notre maison : chaque pièce a une utilité. C'est pareil pour notre produit : chaque vue à un objectif. À nous de réussir à l'atteindre en expliquant clairement à l'utilisateur ce que l'on veut lui dire et à le guider pour qu'il atteigne cet objectif.

💡 Petit conseil en passant : si le produit semble trop massif, il peut être judicieux de travailler sur plusieurs petits lots plutôt que d'essayer de tout faire d'un coup. Nous essayons toujours d'identifier quelques fonctionnalités importantes, de les traiter, puis de travailler sur d'autres lots au fur et à mesure. Se concentrer sur un spectre restreint permet de ne pas se perdre et d'être submergé par quelque chose qui serait trop complexe.

Et bien sûr, nous n'oublions pas de décliner chaque support : desktop, tablette, smartphone... Tout y passe. En fonction du projet, il peut être intéressant de travailler sur les vues mobile en premier, c'est ce qu'on appelle le Mobile First, mais nous n'épiloguerons pas sur ce sujet aujourd'hui !

Et enfin, on transforme si possible tout ça en prototypes interactifs. C'est toujours mieux pour pouvoir se projeter de pouvoir naviguer et interagir avec son produit que de voir de simples captures d'écran en JPEG.

Pour conclure

Vous l'aurez compris (je l'espère 🤞🏻), le processus créatif passe par plusieurs étapes qui permettent d'avancer pas à pas, ensemble, vers un résultat idéal. C'est ici un processus "type" que j'ai essayé de vous détailler, mais il n'y a pas de méthode miracle pour réussir le design d'un site ou d'une application. Il faut savoir rester flexible et adapter sa méthode.

Chaque projet est différent. Certains permettent une grande liberté créative quand d'autres sont beaucoup plus cadrés par des chartes graphiques ou des contraintes techniques importantes. Certains invitent à un travail de branding qui va au-delà d'un simple processus créatif et invite à une réflexion plus aboutie et plus profonde sur la marque, ses enjeux et sa communication.

Chez Uxer, nous travaillons également avec l'utilisateur au centre de nos projets. Cela implique un gros travail d'UX tout au long du projet qui s'imbrique au processus créatif. UX et UI Designer travaillent donc ensemble pour arriver à un résultat efficace et qui, on l'espère, ravit vos équipes et vos utilisateurs. 😍

Pour finir, si ce dernier point vous intéresse, notre UX Designer Romain nous parlait il y a quelques semaines de la raison pour laquelle il est important d'intégrer vos utilisateurs au processus de conception et de design.