Ateliers de conception UX (UX design workshops)

Expérience utilisateur pour le développement de produits numériques

Ateliers de conception UX (UX design workshops)

Un UX Workshop est la rencontre d’analystes, de designers et de parties prenantes qui ont une expertise et des expériences dans l’UX et le marché ciblé. C’est la première phase pour partager des idées sur les besoins des utilisateurs, la connaissance du marché et essayer de trouver ensemble des solutions efficaces dans un court laps de temps.
Nous organisons plusieurs types d’ateliers, en fonction des exigences du projet, ils peuvent être assez différents que l’objectif soit par exemple de créer une interface utilisateur d’application mobile, un site Web ou un logiciel B2B. En général, ces ateliers sont particulièrement nécessaires pour tous les projets qui impliquent des interfaces utilisateur visant à vendre ou à faciliter les flux de travail.

Choisir Outsourcify comme agence UX

Nous sommes une équipe de développement de produits digitaux avec un service complet et, à ce titre, nous considérons comme l’une des agences UX les plus compétentes de Bangkok. Notre équipe UX a aidé des dizaines de nos clients à travers des ateliers (workshops) pour

Nous fournissons :

  • Recherche UX: nous proposons des recherches sur les utilisateurs, l’évaluation des concurrents, découvertes des clients, des personas et une stratégie UX, au travers d’exercices planifiés,
  • CX (expérience client): nous recherchons et exécutons des expériences utilisateur sur tous les points de contact pour comprendre le parcours holistique de vos utilisateurs,
  • Wireframing de l’interface utilisateur: nous travaillons dans un processus agile et procédons avec un processus itératif pour préciser l’expérience utilisateur de tous les écrans de votre produit digital,
  • Prototypage: nous concevons un prototype dynamique cliquable à partir des wireframes qui peut être testé avec les utilisateurs tests et les parties prenantes.
Img 3615

Qu'est-ce qu'un atelier (workshop) UX?

Les ateliers UX visent à rassembler les designers et les parties prenantes pour discuter du parcours utilisateur actuel de l’application, partager leur compréhension de l’existence de problèmes majeurs pour l’utilisateur et trouver la solution efficace pour une meilleure expérience utilisateur en définissant les bonnes mises en page des écrans pour préparer ensuite la conception visuelle.

Nous menons des activités telles qu’une cartographie de l’empathie, cartographie du parcours des utilisateurs et la création de personas pour encourager les participants à l’atelier à réfléchir efficacement aux besoins des utilisateurs. Une fois les idées et les solutions efficaces regroupées, nous travaillons sur le prototype (wireframe) basé sur celles-ci.

Kannika-Wireframe-2

Exemples d'activités

Nous menons des activités telles qu’une cartographie de l’empathie, cartographie du parcours des utilisateurs et la création de personas pour encourager les participants à l’atelier à réfléchir efficacement aux besoins des utilisateurs. Une fois les idées et les solutions efficaces regroupées, nous travaillons sur le prototype (wireframe) basé sur celles-ci.

Cartographie d’empathie: nous avons rassemblé toutes les parties prenantes et web designers nécessaires pour aider à trouver les pensées et les sentiments des utilisateurs lorsqu’ils utilisent leurs produits et applications.
Cartographie du parcours utilisateur: Nous appliquons des cartes de parcours utilisateur pour comprendre et améliorer le flux d’utilisateurs ou créer une nouvelle expérience pour les utilisateurs cibles. Nous choisissons de créer un personnage pour soutenir cette carte. Au cours de la cartographie du parcours utilisateur, les parties prenantes dessinent des fonctionnalités, des idées ou mettent en évidence des fonctionnalités spécifiques et laissent des commentaires.

1_9ZLV40jLvHN-s0sm0BFstw

Comment nous gérons un atelier de conception productif:

Phase 1: Initiation

En fonction de la portée du projet, c’est-à-dire selon sa taille et si il nécessite un seul ou plusieurs workshops de découverte ou de design, nous aimons diviser les workshops en plusieurs réunions courtes; première réunion d’environ 3 à 4h puis plusieurs de 1h 30 à 2h max plus tard dans le processus.

Phase 2: Planification d’un workshop

Pour bien procéder, nous nous préparons au préalable toutes les tâches que nous devrons effectuer lors de l’atelier. En particulier, nous préparons des briefs pour les parties prenantes, des invitations aux participants et pour animer la réunion, des éléments à présenter, un pitch d’introduction, etc.

Phase 3: définir le défi et les objectifs

Nous articulons clairement l’objectif du workshop UX aux participants. Dans l’atelier, nous essayons de comprendre le produit et l’entreprise en interne, en externe et ses besoins à travers des interactions et des activités telles que l’interview de clients types en notant leurs idées.

Phase 4: Exercice de réflexion (carte d’empathie)

Généralement, nous utilisons des exercices de réflexion pour des ateliers de découverte et de design plutôt que pour des ateliers techniques. C’est un processus basé sur l’outil Empathy Map Canvas qui consiste à expliquer, exécuter et examiner un besoin, nous développons une compréhension et une empathie profondes et partagées pour les utilisateurs. Nous l’utilisons pour nous aider à améliorer l’expérience client et à concevoir de meilleurs environnements de travail. En outre, nous effectuons un exercice d’évaluation comparative des concurrents en mettant l’accent sur la fonctionnalité, l’apparence et la convivialité en examinant les concurrents pour comprendre les fonctionnalités que le design devra comporter.

Les personas sont des personnages fictifs qui incarnent des caractéristiques clés spécifiques des groupes d’utilisateurs cibles et / ou actuels et se rapprochent ainsi d’eux. Ils représentent les différents types d’utilisateurs susceptibles d’utiliser un site Web ou une application.

Ces personas sont tirées des données d’analyse des utilisateurs de l’entreprise existante ou de la connaissance que les parties prenantes ont de leur groupe cible (généralement en menant des entretiens avec leurs utilisateurs potentiels).

Comment créer des personas?

Nous créons des personas d’utilisateurs au début du travail afin d’avoir les utilisateurs à l’esprit tout au long du processus de conception, pour pouvoir nous mettre à leur place.

  1. Soyez conscient des connaissances préalables de l’utilisateur sur le domaine donné: à qui est destiné le produit. Que savent les utilisateurs des produits similaires? Quelles attentes ont-ils? Tous ces éléments doivent être pris en compte lors de la conception des applications.
  2. Définissez le personnage en commençant par des données de base et en formulant plus de détails pour compléter une image de ce personnage. Les données de base pour commencer sont:
    • Nom
    • Âge
    • Occupation
    • Comportement
  3. Répertoriez les besoins et les fonctionnalités des utilisateurs avec Experience Map. La carte d’expérience est créée à partir de recherches recueillies grâce aux entretiens avec les parties prenantes et à l’analyse Web. La carte Expérience affiche cette recherche à travers la narration et la visualisation. Il présente une perspective pour montrer la véritable expérience d’un utilisateur.

Phase 6: création de plans de site et de wireframes

Nous commençons toujours des projets de conception Web / d’application avec une structure et un processus de planification basés sur les idées convenues lors des ateliers. Nous ne commençons pas le travail de conception visuelle (UI) tant que le plan du site, les wireframes et l’architecture de l’information n’ont pas été examinés, discutés, modifiés et approuvés par l’équipe et les clients.

Qu’est-ce qu’un sitemap?

Un sitempa est une liste de toutes les pages qui seront visualisable sur un produit digital qu’on présente la plupart du temps sous forme d’organigramme en forme d’arbre. Un plan du site permet de hiérarchiser le contenu et les pages les plus importantes. Sans sitempa, le site Web ne pourra pas etre organisé correctement.

Qu’est-ce qu’un wireframe?

Les wireframes sont utilisés tôt pour établir la structure de base d’une page avant l’ajout de la conception graphique visuelle et du contenu. C’est fondamentalement le squelette du projet – comme un plan d’architecture vient avant de commencer le design intérieur proprement dit. Les wireframes nous permettent de créer des concepts réalistes et cliquables qui permettent aux utilisateurs d’avoir une idée de ce que nous construisons et interagir dessus.

Il s’agit ici de définir l’architecture de l’information (IA) qui

Qu’est-ce que l’architecture de l’information?

Comme elle s’explique d’elle-même, l’architecture de l’information est la structure du contenu lui-même.

En d’autres termes, la définition IA est la réponse à une question: « quel contenu placer et où? » . Bien sûr, cela devient plus complexe que cela car nous devons ici considérer toutes les recherches précédentes sur l’expérience utilisateur, les personas, les voyages, etc.

Cette IA définit la hiérarchie du contenu, il est répondu en passant par de nombreux questionnements tels que – « Suite à ce personnage et à ce parcours d’utilisateur, tel ou tel titre serait plus intéressant à placer ici ou là » etc.

Comment créer les wireframes d’un site Web?

Il existe un certain nombre d’outils de wireframing pour créer des wireframes rapidement et facilement tels que Adobe Xd, Figma, Sketch, Invision, etc. Notre équipe de conception utilise normalement Adobe Xd lorsque nous travaillons sur les wireframes.

Comment nous fabriquons des wireframes:
  1. Concentrez-vous sur l’UX. Un wireframe n’est pas un design d’interface utilisateur.
    Lorsque nous sommes en phase wireframing, nous essayons de garder à l’esprit que le wireframe ne consiste pas à remplir chaque page ou à charger l’écran avec tous les composants visuels mais plutot à nous concentrer sur l’expérience utilisateur. Il s’agit de savoir «qui sont les principaux utilisateurs et comment pouvons-nous rendre l’expérience d’utilisation d’un site Web aussi fluide que possible pour eux?».
  2. Faites simple.
    Le wireframe n’est qu’une ébauche, la première étape avant la conception visuelle. Nous créons des wireframes qui restent simples visuellement et montrent comment les éléments sont disposés sur la page et comment la navigation sur le site doit fonctionner en utilisant de simples rectangles et des couleurs en niveaux de gris.
  3. Résumé des directives que nous gardons à l’esprit lorsque nous travaillons sur des wireframes:
    • Gardez les couleurs en niveaux de gris: blanc, noir et gris.
    • Utilisez au maximum deux polices génériques.
    • Évitez les graphiques (images, arrière-plans, etc.). Essayez d’utiliser de simples rectangles et carrés comme espaces réservés avec un «x».
    • Évitez d’utiliser le branding (logo, slogan, thèmes d’entreprise, etc.)

Vous cherchez une agence web?
Discutez avec notre équipe!

Contactez-nous
Vous cherchez une agence web?
Discutez avec notre équipe!