Pour chacun de nos projets, nous prenons le temps de créer un prototype que nous rendons disponible à nos clients pour qu'il soit testé et que les produits soient éprouvés. C'est une phase de travail capitale qui permet plusieurs choses :

Permettre au client de mieux se projeter dans le rendu final de son produit

Faire tester le produit aux futurs utilisateurs avant de le développer

Tester et faire valider des interactions et animations complexes

Que ce soit un prototype tout simple permettant de passer d'une page à une autre ou un plus complexe pour simuler une application avec de vraies données, nos méthodes et nos outils ne sont pas les mêmes. On vous parle de tout ça.

Prototypage basique et interactif avec Figma

Pour tout notre travail de création d'interface, nous travaillons avec Figma. Cet outil puissant et collaboratif nous permet de concevoir et de créer des interfaces de sites, d'applications mobiles ou métier.

Et une des fonctionnalités clés de l'outil est de pouvoir lier et connecter des écrans statiques pour en faire un prototype interactif. Ce qui permet de simuler en quelques clics un parcours utilisateur complet avec les enchaînements de pages, les boutons d'interactions, le menu, etc. Et évidemment, de partager tout ça à l'aide d'un simple lien pour que chacun puisse tester son futur produit dans des conditions proches du réel.

Une remarque ? Un détail qui ne colle pas ? L'outil permet également de commenter très simplement chaque vue pour itérer rapidement et efficacement sans se perdre dans une montagne de notes ou d'emails.

Un des gros avantages de ce type de prototypage est qu'il peut intervenir à tout moment dans la vie d'un projet. En effet, nous travaillons sur Figma dès la phase de wireframing ce qui nous permet de faire tester un prototype interactif très tôt dans la vie d'un projet.

Enfin, il est possible grâce à une application mobile de tester des vues mobiles directement sur son téléphone, pour un rendu un peu plus réaliste.

Animations complexes et micro-interactions avec After Effects

Vous est-il déjà arrivé d'imaginer une animation extrêmement poussée dans votre tête, sans réussir à la décrire à votre audience ? "Le bloc de titre arriverait par le haut... et là BOOM il disparaît et laisse place au bloc n°2 qui ferait une rotation à 194° pour venir se caler au milieu de l'écran !" Compliqué n'est-ce pas ? C'est là qu'Adobe After Effects intervient.

Nous utilisons cet outil lorsque nous souhaitons tester et itérer sur des animations plus complexes et simuler le comportement de l'utilisateur et de ses interactions, que ce soit sur des vues complètes ou sur des éléments précis : un bouton par exemple. On parle alors de micro-interactions.

Cela permet d'avoir un rendu plus réaliste, dynamique et immersif, mais qui ne permet pas d'interaction utilisateur, le rendu étant un simple fichier vidéo.

Interactions et données réelles avec Origami Studio

Prototyper avec des vues statiques ou avec une vidéo, c'est bien. Cela comporte plein d'avantages et permet d'avoir rapidement un rendu s'approchant du rendu final, tout au long du projet. Mais comment faire lorsqu'on souhaite tester son application sur un vrai téléphone, avec de vraies données dynamiques ?

C'est là qu'entre en jeu Origami Studio. Développé par les équipes de Facebook, cet outil permet de créer des prototypes complètement interactifs, et c'est très puissant, notamment pour tester des produits mobiles sur son téléphone.

Fonctionnant dans une logique similaire à la programmation, une des forces d'Origami Studio est de permettre d'utiliser des fonctionnalités matérielles de votre téléphone dans vos prototypes. Vous pourrez donc simuler l'utilisation de la caméra de votre téléphone, de son micro, de son gyroscope, etc.

L'outil permet également d'intégrer des données réelles dans votre prototype, issues d'une API par exemple. Ce qui permet d'avoir des données dynamiques et un prototype qui se rapproche au plus près du produit final.

Quel est le meilleur outil de prototypage ?

Je ne crois pas qu'il y ait une méthode de prototypage meilleure que les autres. Chaque outil apporte des avantages différents et peut être utilisé pour besoins variés, à différents moments de la vie d'un produit. Certains vont s'intégrer de manière très transparente à la conception de votre produit quand d'autres vont demander un travail et une réflexion plus poussée. Il m'arrive d'ailleurs de combiner plusieurs méthodes de prototypage dans un même projet pour différents cas d'utilisation !

Il existe également d'autres outils vous permettant de donner vie à vos produits : Adobe XD, ProtoPie... et bien d'autres. D'après moi, l'idée est avant tout de savoir ce qu'on veut dans notre prototype et quel outil est le plus adapté pour y arriver.

D'ailleurs, notre UX Designer Romain utilise énormément les prototypes dans les tests utilisateurs qu'il organise à chaque projet. Et avec les bons outils, il arrive à récupérer un grand nombre d'informations essentielles pour analyser le comportement des utilisateurs et créer le produit parfait (ou presque). Je vous conseille donc son article : Ma boite à outils UX.

Et si vous souhaitez découvrir des exemples de prototypes et d'animations, rendez-vous sur le compte Dribbble de l'agence ! ✌️

Nos méthodes pour donner vie à vos produits avant de les développer !

Les différentes méthodes de prototypage pour tester, itérer et valider nos produits digitaux

Comment est-ce que l'on prototype nos produits ?

Je vais donc vous parler de tout ce que nous avons mis en place pour faire en sorte que cette curieuse période se passe du mieux possible.

Avant toute  chose, après un temps de latence qui a été observé chez nous et tous nos clients afin de digérer l'information de ce premier confinement, nous avons pris la décision de nous réunir autour d'une table et d'un café (le dernier en présentiel avant quelques temps) afin de réfléchir ensemble à une organisation de travail répondant à ces contraintes de confinement. Dialogue et échange étaient de mises 💬.

En effet, chaque personne a un ressenti personnel concernant cette pandémie, a une situation familiale et personnelle unique, ou encore un mode de transport qui était perturbé  (tram, bus, train).

Ainsi, l'enjeu, afin de proposer un plan d'action ou une nouvelle organisation de travail qui soit réaliste et confort pour tout le monde, était de connaître le ressenti, l'opinion et les conditions de travail de chacun.

Étant une équipe de 6 personnes il a été assez simple de récolter toutes ces informations et ces avis, et à la fin, nous avons donc, tous ensemble, réfléchi à la manière dont on voulait travailler pour les quelques mois à venir (on ne savait pas encore que cela durerait plus d'un an).

Step 2 : application de SCRUM à domicile

Bye bye notre tableau grandeur nature avec nos post-it de tâches à réaliser sur un sprint et surtout bye-bye la pause café entre collègues 😢

Pour ce qui est de notre organisation de travail, nous avions déjà toute notre méthode de travail Scrum (redirection vers article Scrum) accessible en numérique, donc notre organisation déjà solide et éprouvée allait faire ses preuves une nouvelle fois 🙂 Voici les outils qui nous ont permis de rester connectés et de continuer à travailler comme si de rien n'était 🙃

Scumpy : notre outil de gestion et suivi de production

Slack : notre outil de papotage favoris 😉

Mana : notre outil interne développé par nos soins qui nous permet de timer notre production et faire des comptes-rendus précis à nos clients

Google Meet : notre outil de visioconférence préféré

Gmail : notre outil pour communiquer les livrables, planning ou autres informations à nos clients

Notion : notre outil de d'organisation et prises de notes fétiche

Avec ces quelques outils, nous pouvions : planifier, suivre et donc assurer notre production, faire un retour à nos clients sur celle-ci et échanger entre nous, le B-A-BA.

En amont, nous nous sommes cependant assurés que chacun ait un poste de travail confortable à son domicile, une connexion internet décente, et une situation personnelle permettant d'avancer dans des conditions sereines (travailler avec 3 enfants en bas âge et un chat qui miaule 20h/24h, ce n'est pas l'idéal qu'on se le dise 😉).

Également, pour les personnes qui préféraient travailler à l'agence, chacun avait un jeu de clé et la machine à café à dispo avec des capsules ;), aucun interdit de ce côté-là !

L'ajustement principal fut l'adaptation de notre point quotidien (le daily ⏲). Après discussion, nous l'avons déplacé du midi au matin, il deviendrait ainsi notre premier rendez-vous de la journée, ce qui nous permettrait de :

Nous dire bonjour et prendre des nouvelles des uns et des autres quotidiennement (nous n'étions cependant pas prêt à entendre Manu nous dire "C'est la fatiiiigue 🥱" tous les jours ou à écouter Romain pousser la chansonnette car il est très matinal)

Savoir ce qui avait été fait la veille, ce qui allait être fait dans la journée et s'il y avait des points de blocage, et ce pour chacun d'entre nous

En effet, le challenge n'était finalement pas de travailler et de tenir nos délais avec le télétravail (aspect sur lequel nous étions assez confiants), mais surtout de garantir une bonne communication entre chacun et maintenir la fluidité que nous offrait le travail en présentiel.

Bref, c'était parti, nous allions donc travailler de chez nous, une nouvelle méthode de travail à apprivoiser ! 🙂

Après 7 semaines non stop de télétravail, nous nous manquions 🙂, et surtout nous avions eu quelques loupés en termes de communication (rien de dramatique),mais les débuts de sprint et fin de sprint étaient moins efficaces et moins clairs pour chacun.

Difficile de maintenir un point de 2h00 non-stop avec toute une équipe, en gardant notre concentration, écoute et compréhension, ce qui a forcément engendré quelques loupés !

Nous sommes donc tombés d'accord afin de revenir à l'agence tous les lundis de début de sprint et tous les vendredis de fin de sprint afin de bien organiser nos sprints.

Puis nous étions contents de nous voir 🙂 mais attention, qui dit présentiel, dit précautions : masque obligatoire, gel hydroalcoolique et ménage hebdomadaire maintenu.

1 an et demi après, nous avons toujours ce rythme et cela nous convient parfaitement. Notre rythme est trouvé ! 🎉

On s'est découvert des ressources insoupçonnées (oui, oui, tout ça) : des facilités d'adaptation, de flexibilité et de communication même à distance 😊

On a fait une de nos meilleures années d'agence en termes de chiffre d'affaires, malgré tout

Cela nous a permis de valider et confirmer notre organisation de travail Scrum (pratique agile), et les outils utilisés au quotidien

Mais chuuut 🤫, je vais vous dévoiler un secret : on se manque quand même un peu, et on préfère se voir en vrai, notamment pour Banger le midi.

On a survécu à 2012, à Trump et à la mode des Crocs, c'est pas pour s'arrêter à cause du COVID.

Je ne vous apprends rien si je vous dis que depuis 2019, nous subissons une pandémie mondiale #COVID, et comme toute agence, nous avons du nous adapter et nous organiser afin de garantir la continuité de nos projets et la pérennité de notre petite (mais costaud) agence.

Comment une agence digitale fait pour rester agile pendant la pandemie COVID-19 ?

Rester agile pendant une pandémie mondiale

La typographie est un élément clé d'une identité visuelle réussie en terme de construction d'une image de marque, un investissement à côté duquel vous ne devriez pas passer.

L'identité visuelle d'une marque est composée de 3 piliers : les couleurs, le logo et la typographie. Ce ne sont bien sûr pas les seuls éléments à prendre en compte : l'imagerie (photographies, illustrations...) ou la pictographie sont également clés. Mais cette trinité - couleurs, logo et typo - est réellement ce qui permet de créer un système de design holistique qui différencie une marque d'une autre.

N'attendez pas avant de choisir votre typographie

Le choix d'une typographie est trop souvent négligé. Pourtant, cela devrait être prioritaire et pas juste un petit détail que l'on vient traiter quand toutes les autres briques du design ont été définies.

La typographie est le langage visuel qui véhicule le discours et le ton de votre marque. Elle permet de communiquer votre voix, votre message et vos valeurs au monde, de montrer ce qui se cache sous votre nom de marque et votre offre.

Si vous comptez créer ou repenser une identité visuelle, il est donc capital de prévoir et d'allouer un budget pour l'acquisition de licences typographiques.

"Nous n'avons pas de budget à allouer à l'achat d'une typo, utilisez-en une gratuite !"

Pourquoi donc ne pas choisir une typographie gratuite ? Après tout, il en existe des tonnes et beaucoup fonctionnent même très bien. La preuve : elles sont utilisées partout sur internet, et pour cause ! Les typographies gratuites sont souvent conçues pour plaire au plus grand nombre et ainsi être utilisées le plus souvent possible : elles sont simples, propres et souvent passe-partout.

Lorsque l'on travaille sur une identité de marque, il est important de se démarquer de ses concurrents : visuellement, mais également dans le message et la manière dont ce message va être perçu. Le choix d'une typographie adaptée devient donc un élément clé.

Bien entendu, il existe des typographies gratuites, très qualitatives et qui remplissent parfaitement leur job. Nous en utilisons d'ailleurs un grand nombre dans nos projets. Inter est par exemple une famille de typographie conçue pour le travail d'interface et l'affichage de données qui fonctionne parfaitement !

Et vous pouvez complètement faire le choix d'utiliser une des nombreuses typographies gratuites à disposition de tous sur internet. Mais vous prenez le risque que demain, le nouveau food-truck à la mode de votre ville utilise la même typographie pour son logo et les mêmes couleurs que votre entreprise, s'appropriant ainsi une grande partie de ce qui constitue votre identité de marque.

Petit interlude confession : vous l'avez peut-être remarqué si vous avez l'oeil affuté, la typographie utilisée pour les titres de notre site est Roboto Slab... Une typographie gratuite 😱. Je pourrai vous ressortir l'expression classique "les cordonniers sont toujours les plus mal chaussés" mais il y a une logique à ce choix. En effet, nous avons sélectionné cette famille typographique pour son style qui colle parfaitement à ce que l'on souhaite exprimer dans notre discours.

Lorsque l'on souhaite créer et développer une image de marque unique et véhiculer des valeurs et des émotions spécifiques, il est important d'avoir ce petit quelque chose, cette touche personnelle, ce détail qui différenciera votre marque et permettra à votre voix de ne pas se confondre avec d'autres.

Et ce petit quelque chose, il est vrai, a un prix. Prix très variable en fonction des typos, des studios ou des licences que l'on souhaite acheter. Une famille typographique peut s'acheter pour des prix allant de 10 ou 50 € et monter jusqu'à plusieurs milliers d'euros.

Mais l'important n'est pas le prix, car c'est un investissement. Un investissement dans votre identité de marque, dans le fait que votre marque devienne reconnaissable et identifiable dans la marée de marques auxquelles nous sommes tous confrontés chaque jour.

Le but n'est pas non plus d'acheter la typographie la plus chère pour espérer le meilleur résultat. L'objectif est de trouver la bonne typographie, qui aligne au mieux votre discours, votre ton et votre voix. La typographie qui transmettra le mieux votre message et qui créera le système de design le plus efficace.

Et pour une typographie qui vous est vraiment propre, il est même possible de travailler avec un studio pour créer une typographie propriétaire que seule votre marque utilisera et qui véhiculera de la meilleure manière votre message.

Pourquoi payer pour une typographie est un investissement à côté duquel vous ne devriez pas passer.

Pour se démarquer de la concurrence et garder le monopole acquis grâce à une expérience de plus de 30 ans, Ayming a souhaité offrir à ses clients de nouvelles fonctionnalités ainsi qu'une application web retravaillée, attirante et ludique adaptée aux besoins et attentes de ses utilisateurs finaux. 🔥

Ayming a donc fait appel à nos services afin de :

Repenser l'expérience utilisateur de leur solution avec l'intégration d'un nouveau module et donc de nouvelles fonctionnalités.

Les accompagner dans la refonte UI complète de leur application en retravaillant l'interface et ses éléments.


Dans cet article, nous allons faire un focus sur la Stratégie UX mise en place pour ce client, sachant que la contrainte principale pour ce projet était le délai relativement court que nous avions à respecter.

Nous nous sommes orientés vers le Lean UX, une approche rapide et efficace dans laquelle "vitesse" et "itération" sont les maîtres mots. Nous avons couplé cette méthodologie à de la recherche utilisateur, pour appuyer nos décisions sur de solides insights qualitatifs. 

Pourquoi avons-nous proposé ce process à Ayming ?

On peut voir certains avantages à travailler en Lean UX. C'est une méthode qui reste rapide, même couplée à de la recherche utilisateur. On va vite car on se base en partie sur des hypothèses issues de feed-backs potentiels, d'observation ou d'expérience. Je pense que les deux plus gros avantages sont le fait de rapidement arriver à un prototype final, prêt à être testé avec des utilisateurs finaux et donc de rapidement pouvoir le faire évoluer. L'avantage de ce cycle est également que toute l'équipe de conception peut avancer sans être dépendante d'une autre. Il faut imaginer qu'on vous livre quotidiennement plusieurs petits morceaux au lieu de vous en fournir un seul après des mois de conception. 

👉  Le lean UX n'est pas un ensemble de règles, mais une approche à adopter.

Le Lean UX est un processus de conception collaboratif et itératif permettant d'intégrer le design d'expérience utilisateur avec des approches de développement Lean et Agiles. Il permet par exemple de rapidement créer un MVP (Minimum Viable Product) sur la base d'hypothèses, puis de le mettre sur le marché pour évaluer sa pertinence et la valeur apportée aux utilisateurs.

Chez Ayming, les équipes étaient disponibles sur plusieurs jours, l'idéal pour organiser des sessions d'ateliers collaboratifs 🚀. L'équipe était formée d'experts dans divers domaines : directeur de produit, directeur commercial, consultants, développeur, cheffe de projet, designer UI et moi-même, designer UX en tant que facilitateur. Le lieu de passation était à l'agence, dans nos locaux, que nous avions agréablement aménagés afin que tout le monde se sente un maximum à son aise et se sente prêt à libérer sa créativité et ses idées. 

Avant de commencer, nous avons réalisé une session d'échange, de prise de connaissance approfondie de l'existant, de compréhension du métier et des travaux déjà menés en recherche utilisateur (Diagramme d'affinité & personas). 

Nous avons échangé sur le savoir de chacun, des potentielles idées de certains, des contraintes techniques à prendre en compte et la vision à long terme de tous. Il s'agissait d'une discussion ouverte où tout le monde était invité à parler, un icebreaker efficace autour d'un café croissant qui nous as mis en conditions ! 🍫

Aligner l'équipe sur une vision commune : L'énoncé de problème

Avant de débuter les ateliers et suite aux retours de la recherche utilisateur, il est important de définir la problématique principale à résoudre. Pour cela nous avons créé ce que l'on appelle l'énoncé de problème.

Ce dernier permet de mettre le produit en face de ses objectifs, de voir les objectifs non atteints et les potentiels effets négatifs que cela peut apporter à l'entreprise. Pour arriver à un énoncé de problème efficace, nous devons nous poser la question suivante :  comment résoudre ces problèmes de telle sorte que les utilisateurs soient plus performants sur des critères que l'on pourra mesurer ? 🤔

Ce premier atelier consistait à créer des suppositions dans le but de répondre à l'énoncé de problème définit précédemment. Pour information il en existe 4 types : 

Outcomes commerciaux : Quels résultats & conséquences attendons-nous pour l'entreprise ?

Utilisateurs : Qui sont nos utilisateurs ?

Outcomes utilisateurs : Quels résultats et objectifs veulent atteindre nos utilisateurs ?

Fonctionnalités: Avec quelles fonctionnalités les utilisateurs parviendront-ils à réaliser leurs outcomes ?

Ces suppositions ont été créées par de courtes sessions de brainstorming, dans lesquelles on partage des idées et on confronte certaines phases de divergence en convergentes. Le résultat final est un mur de suppositions. Nous en avons profité pour y ajouter nos données issues de la recherche utilisateur afin d'amené des données réelles et qualitatives aux données supposées par les équipes et déjà avoir une vision plus fidèle de la réalité de nos suppositions. Avant de passer à la phase d'assemblage des suppositions, nous avons priorisé les outcomes commerciaux et classé les outcomes utilisateurs par thématiques en équipe. 

Le Lean UX permet donc de créer des suppositions assez rapidement. L'intérêt de ces suppositions et qu'elles vont être le socle de construction de nos hypothèses.  

Lorsque les outcomes commerciaux sont priorisés, on les place dans un tableau d'hypothèse. Ce tableau d'hypothèse va nous permettre d'identifier et de formaliser les hypothèses de manière ludique et visuelle, sans trop se compliqué la tâche, assez naturellement. 📊

Création et priorisation des hypothèses

Après avoir rempli notre tableau d'hypothèses, il était très facile de les identifier et de formaliser sur des post-its. Pour les assembler, rien de plus simple. Il faut savoir qu'une hypothèse ne peut contenir qu'un seul outcome commercial, un ou plusieurs utilisateurs, un seul outcome utilisateur pour une seule fonctionnalité.  

Une hypothèse prend la forme suivante "Nous allons obtenir [outcome commercial] si l'utilisateur [utilisateur] peut obtenir [outcome utilisateur] avec cette fonctionnalité [fonctionnalité]. 

Sur 2 ateliers de plusieurs heures, nous avons formalisé 40 hypothèses ! 💣  C'est donc 40 fonctionnalités supposées répondre à la problématique. Nous avions donc 40 hypothèses à traiter afin de concevoir le nouveau module dans son ensemble. Hors, ce n'est pas l'objectif attendu, nous devions classer par priorités ces hypothèses afin de déterminer lesquelles étaient les plus importantes et intégreraient en premier lieu le MVP. 

Pour prioriser ces hypothèses, nous avons utilisé une matrice de priorisation des risques. Il s'agit d'une matrice comme il en existe une nombreuse ! Nous avons identifié les objectifs les plus important, en choisissant de prioriser les hypothèse en fonction de leur risque (combien cela peut-il nous coûter si nous nous trompons sur cette hypothèse ?) et leur valeur potentielle pour l'utilisateur et l'entreprise. Plus les hypothèses sont risquées et amènent potentiellement de la valeur, plus il faut les tester en priorité afin de rapidement apprendre et les valider. Les hypothèses non définies comme prioritaires seront intégrées plus tard dans le mvp et sont priorisées dans un backlog.

Ces ateliers réalisés dans un processus Lean UX nous ont permis de déterminer des hypothèses de fonctionnalités permettant l'intégration du module de gestion des actions et plan d'actions priorisé très rapidement. 

Le processus nous a permis d'économiser des mois de réflexion en créant un MVP que l'on peut directement tester. Après livraison du design UI et le développement effectué, nous pourrons mesurer le succès en testant notre MVP auprès d'un panel d'utilisateurs pour apprendre de chaque hypothèse et valider les étapes futures. 

Concevoir rapidement, tester et itérer, comment le Lean UX s'adapte aux contraintes et permet de rapidement développer son produit ?

Ayming nous a contacté pour les accompagner dans la refonte et l'évolution de leur application mobile de pilotage des risques professionnels, de la sécurité & de la santé au travail. Comment le Lean UX nous a-t-il aidé à concevoir rapidement, tester et itérer pour développer rapidement leur produit ?

Comment adapter une stratégie de conception centrée sur l'utilisateur en respectant des contraintes de temps et des besoins très rapide d'évolution du produit ? Le Lean UX y répond parfaitement et on s'en est inspiré !

Conception, tests & itérations : ce que le Lean UX nous a apporté 

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! 🔥

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 ?

Quel rôle cela va-t-il avoir dans votre business ?

Qui sont les personnes qui vont prendre les décisions/valider les choix ?

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. 

À 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 :

le type d'imagerie : photos, illustration, visuels 3D...

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.

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 !

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.

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.

Ou comment arriver à un résultat qui vous donnera envie de crier "Wahou !"

Comment faire pour que votre site ou application réponse parfaitement à vos besoins et à ceux de vos utilisateurs ?

Design, code & vied’une agence bordelaise