Taskly

Pour nous assurer d’être sur la même longueur d’onde que l’équipe Taskly, nous avons commencé par repenser quelques écrans importants. Nous avons ensuite présenté ces refontes pour recueillir des commentaires, ce qui nous a permis de cerner les préférences de Taskly et de nous aligner sur la direction du projet. Examinons de plus près nos décisions de conception clés et leur impact.

Une structure de navigation bien définie sert de feuille de route, guidant les utilisateurs à travers les fonctionnalités et le contenu de l’application. Elle a un impact direct sur la capacité des utilisateurs à trouver ce qu’ils recherchent, réduisant ainsi la charge cognitive et la frustration. Une navigation claire et logique encourage les utilisateurs à explorer davantage de contenu et à s’engager plus profondément avec l’application.

Nous avons simplifié la navigation, la rendant plus intuitive. Cela a réduit le temps passé par les utilisateurs à rechercher les fonctions nécessaires et a amélioré leur expérience globale de l’application.

L’architecture de l’information (AI) est fondamentale pour créer une expérience numérique conviviale et efficace. Une AI solide permet aux utilisateurs de trouver sans effort les informations qu’ils recherchent. Lorsque l’AI est bien conçue, les utilisateurs peuvent naviguer fluidement dans les fonctionnalités de l’application et atteindre leurs objectifs plus rapidement.

Nous avons réorganisé la présentation de l’information, divisé le contenu en blocs logiques et mis en évidence les éléments clés. Cela a permis aux utilisateurs de percevoir rapidement l’information, en particulier dans les flux cruciaux.

Nous avons entièrement repensé l’expérience utilisateur pour la création et l’acceptation des tâches, rendant ces flux principaux plus intuitifs et efficaces.

Le premier problème était que l’ancienne conception ne montrait pas clairement l’étape dans laquelle se trouvait l’utilisateur. Était-il en train de créer une tâche ou d’en accepter une ? De plus, les boutons de contrôle étaient complètement non intuitifs : les boutons actifs ne se distinguaient pas des boutons inactifs, et l’élément de contrôle principal était confondu avec le contenu de la tâche (comme les descriptions ou les offres proposées).

Nous avons donc entièrement revu ces deux flux clés : l’élément de contrôle des tâches est devenu plus visible en le mettant en surbrillance comme un élément « sticky » (fixé lors du défilement). Cela permet désormais à l’utilisateur de comprendre rapidement les éléments qui constituent les fonctions principales pour interagir avec certaines tâches. Les boutons sont devenus plus grands et plus contrastés, améliorant l’accessibilité et simplifiant les interactions. Nous avons également revu et amélioré le texte UX, rendant les textes plus orientés vers l’action.

Nous avons établi un style visuel unifié sur tous les composants, créant ainsi une apparence professionnelle. Cela a impliqué de standardiser les designs des cartes et d’assurer la cohérence de la typographie, des couleurs et de l’espacement.

Nous avons analysé tous les types de cartes de l’application, tels que les tâches, les revues, les questions, l’historique des transactions, les offres, les chats et les notifications. Au cours de cette analyse, nous avons identifié un problème : les éléments des différentes cartes — photos, noms, textes, étiquettes — n’étaient pas visuellement alignés. Cela créait un sentiment de chaos, et les utilisateurs avaient du mal à naviguer dans l’interface. Nous avons résolu ce problème en unifiant les éléments en termes de structure, de style et de typographie. En standardisant les couleurs et les tailles, nous avons grandement amélioré l’harmonie visuelle et aidé les utilisateurs à reconnaître rapidement certains types d’informations.

Pour un accès facile, nous avons également créé une page de composants dédiée. Cette page regroupe tous les composants principaux : cartes, boutons, champs de texte, notifications, et plus encore. Grâce aux Variants et aux Propriétés de Composants Figma, chaque composant peut être facilement modifié. Par exemple, dans une carte, vous pouvez désormais activer ou désactiver une icône, ajouter du texte, et modifier l’arrière-plan ou l’étiquette en quelques clics seulement. Cela permet une adaptation rapide des éléments à divers cas d’utilisation sans créer de nouveaux composants, ce qui permet de gagner beaucoup de temps.

La création de composants réutilisables était nécessaire non seulement pour assurer la cohérence du design, mais aussi pour l’efficacité des coûts. Les modifications apportées à un composant étaient automatiquement mises à jour partout où il était utilisé, ce qui simplifiait la maintenance et réduisait les coûts futurs.

Nous avons ajouté des transitions animées entre les écrans pour fluidifier la navigation dans l’application. Ces animations aident les utilisateurs à mieux s’orienter dans le processus et à ressentir un lien entre les différentes étapes d’interaction au sein de l’application. Des transitions fluides réduisent les sauts entre les écrans et rendent l’expérience utilisateur plus agréable, ce qui est particulièrement important pour les utilisateurs sur appareils mobiles.

De plus, nous avons implémenté des micro-interactions pour améliorer l’interactivité et donner un sentiment d’achèvement pour les actions. Par exemple, après avoir créé une tâche avec succès, l’utilisateur voit une coche animée qui indique la réussite et confirme que l’action a été effectuée. Cela crée un moment de satisfaction et donne à l’utilisateur une confirmation explicite que la tâche a été créée avec succès.

Le prototypage permet de tester le flux des interactions utilisateur dès le début du processus, réduisant ainsi les refontes et itérations coûteuses pendant le développement. Il aide également les concepteurs à se mettre à la place des utilisateurs, leur permettant de mieux comprendre leurs besoins et comportements, ce qui conduit à une conception plus centrée sur l’utilisateur.

La création d’un prototype interactif nous aide à repérer les problèmes de navigation des utilisateurs dans le produit ou d’autres problèmes d’utilisabilité que nous pourrions autrement manquer.

Pour ce projet, nous avons construit un prototype qui décrivait les écrans principaux et secondaires afin de visualiser le parcours des utilisateurs dans l’application. Cela nous a aidés à obtenir une image claire de l’expérience utilisateur globale, en montrant comment les utilisateurs interagissent avec l’application à chaque étape. Cette approche a garanti que le produit final répondait réellement aux besoins et aux attentes des utilisateurs de Taskly.

Un fichier Figma bien organisé peut grandement améliorer l’expérience du développeur, minimiser les allers-retours et permettre une mise en œuvre immédiate. Nous avons organisé la conception dans Figma de manière à garantir un flux de travail fluide pour toutes les personnes impliquées. Nous voulions que Taskly puisse naviguer facilement dans le projet et suivre nos progrès.

Nous avons créé plusieurs catégories pour séparer clairement les conceptions en fonction de leur statut : écrans en cours de développement, écrans pour la revue client et écrans pour les versions finales approuvées. En plus de la conception principale, une page distincte a été créée pour les animations, où tous les éléments dynamiques et prototypes étaient soigneusement regroupés, prêts pour la transmission aux développeurs.

En rationalisant le processus de conception au développement, les organisations peuvent économiser du temps et de l’argent. Cette transmission efficace a profité à Taskly en accélérant leurs cycles de développement et en réduisant le temps de mise sur le marché.