Design UI UX Web3 : de la première interaction à l'action

Le design commence au moment où votre produit doit être clair

Le design UI UX Web3 relie ce que votre produit fait à ce qu'une personne doit comprendre ensuite. Nous partons de la tâche utilisateur, puis nous façonnons un parcours et une interface autour d'elle.

Imaginez un responsable de programme d'ambassadeurs ouvrant un tableau de bord projet après un mois calme de publications. Il veut voir ce qui nécessite son attention, mais la prochaine étape n'est pas évidente. Nous examinerions la tâche qu'il est venu accomplir, cartographierions où la confusion commence et rendrions les choix importants plus faciles à suivre.

Cette même approche fonctionne pour une dApp, un wallet, un exchange ou un parcours d'atterrissage. Nous examinons le produit, ses utilisateurs prévus et tous les supports existants. La recherche et l'examen de la concurrence nous aident à repérer le contexte manquant et les étapes maladroites avant que les écrans détaillés ne soient dessinés.

Le point de départ dépend de ce que votre équipe sait déjà. Si le parcours est clair, nous pouvons nous concentrer sur le design d'interface et un prototype. Si ce n'est pas le cas, nous pouvons d'abord clarifier le flux. Lorsque le travail nécessite également un support visuel, nous pouvons le relier au design Web3 et visuels.

Comment une interface Web3 doit-elle guider quelqu'un lors d'une action wallet ?

Un flux wallet utile montre ce que quelqu'un peut faire, ce qui se passe ensuite et comment l'interface répond. Nous cartographions chaque action importante avant de peaufiner ses écrans.

Supposons qu'un nouvel utilisateur arrive sur une invite de connexion wallet et ne sache pas pourquoi elle est nécessaire. Nous examinerions quelles informations appartiennent avant l'invite et ce que l'utilisateur voit après la connexion. Nous cartographierions également où le flux doit expliquer une transaction ou une erreur. L'objectif est de rendre la prochaine décision compréhensible, pas de cacher l'étape technique.

Nous cartographions souvent 3 moments dans un parcours de transaction : connexion, examen et réponse. Les wireframes permettent à votre équipe de vérifier l'ordre et le langage avant que le design visuel ne commence. Le prototype rend ensuite les chemins sélectionnés plus faciles à discuter comme une expérience connectée.

Pour un premier examen utile, apportez la tâche principale, les exigences actuelles, les écrans existants et les états wallet ou transaction connus. Si le wording du produit nécessite sa propre attention, le copywriting Web3 peut aider à maintenir un langage d'interface cohérent. Un responsable produit doit confirmer toutes les règles que l'équipe de design ne peut pas déduire.

Les fichiers de travail que votre équipe produit peut examiner

Vous recevez un ensemble connecté de supports de design pour examiner le parcours utilisateur et préparer l'implémentation. Nous convenons des tâches et des écrans sur lesquels nous concentrer avant que le design détaillé ne commence.

Un ensemble de travail typique peut inclure :

• Notes de recherche et examen de la concurrence.
• Parcours utilisateur et wireframes pour les tâches prioritaires.
• Un système de design visuel et une bibliothèque de composants.
• Un prototype cliquable pour les chemins sélectionnés.
• Tests d'utilisabilité et remise développeur dans Figma.

Le flux et les wireframes montrent comment une tâche est structurée. Le système de design et les composants aident votre équipe à examiner le langage visuel sur tous les écrans. Un prototype cliquable rend le parcours sélectionné plus facile à parcourir. Les tests d'utilisabilité donnent à l'équipe l'occasion d'observer où les gens ont besoin de plus de contexte.

La remise finale organise le travail Figma convenu pour les développeurs. Si l'identité plus large du produit est encore en cours d'élaboration, alignez les décisions d'interface avec le branding pour projets crypto avant de fixer la direction visuelle. Votre équipe peut ensuite examiner le langage produit et le design ensemble.

Du premier examen à une remise Figma

Le travail passe du contexte produit aux flux, aux décisions d'interface, à un prototype et à la remise développeur. Nous définissons des points de révision pour que votre équipe puisse répondre avant que la couche suivante ne soit construite.

Chez Brand Community, nous utilisons une checklist de lancement pour rassembler l'audience, la tâche prioritaire, les fichiers de design existants, les exigences produit et les questions connues. Ensuite, nous convenons de qui peut répondre aux questions produit et qui examinera le travail. Deux points de révision peuvent aider à garder les retours clairs : un pour le flux et les wireframes, et un autre pour la direction visuelle et le prototype sélectionné.

Le calendrier suit le nombre et la complexité des parcours, le matériel déjà disponible et la rapidité des retours de décisions. Le travail peut également être connecté à la création de contenu crypto ou à l'équipe plus large réseaux sociaux et contenu via un langage produit partagé.

Apportez les décisions produit qui façonnent l'interface

L'examen du design est le plus utile lorsque votre équipe peut expliquer l'utilisateur, la tâche et les règles produit qui le sous-tendent. Nous pouvons rendre les questions sans réponse visibles dans un flux, mais nous ne devrions pas les combler en devinant.

Un prototype Figma peut montrer les états wallet et transaction prévus, mais il ne peut pas déterminer ce qu'un wallet connecté affiche. Il ne peut pas non plus déterminer si une transaction réseau se termine. Ces comportements et les règles produit qui les sous-tendent restent avec la plateforme et votre équipe produit.

Pour faire avancer le premier examen, préparez ces 3 éléments :

1. Un aperçu court du produit et des personnes que vous attendez.
2. Le parcours le plus important, plus tous fichiers Figma ou exigences actuels.
3. Une personne qui peut confirmer les décisions produit et rassembler les retours.

Vous n'avez pas besoin d'un brief parfait. Envoyez-nous ce que vous avez, y compris les écrans ou les questions qui semblent non résolus. Nous examinerons le matériel avec vous, conviendrons du premier parcours et des points de révision, et tracerons une route claire vers un prototype et une remise Figma.

Comment ça marche

1. Partagez la vision produitEnvoyez l'aperçu du produit, les utilisateurs prévus, la tâche prioritaire et tous fichiers de design ou exigences existants.
2. Convenez de ce qu'il faut examinerNous confirmons sur quel parcours nous concentrer, qui peut répondre aux questions produit et quand votre équipe examinera les décisions.
3. Cartographiez la tâche utilisateurNous préparons le flux et les wireframes convenus pour que votre équipe puisse vérifier la structure avant le design d'interface.
4. Concevez et testez les chemins sélectionnésNous créons le système visuel et les écrans, construisons un prototype cliquable et effectuons des tests d'utilisabilité comme convenu.
5. Préparez la remise FigmaNous organisons les fichiers de design approuvés pour les développeurs et accompagnons votre équipe dans les choix d'interface pertinents.