Tasked

Lifestyle app

UX DesignUI Design

Résumé

RôleUI Designer, UX Designer
Année2020

Tasked est un projet d’application « lifestyle » pour aider à la productivité. J’ai souvent du mal à former de nouvelles habitudes et à les coordonner avec mon emploi du temps, alors j’ai pensé une application pour pouvoir gérer tout cela facilement, un peu comme une check-list avancée.

Dans Tasked, l’utilisateur peut générer des tâches éphémères, ou récurrentes, qu’il peut compléter, ou marquer comme « non effectuées ». Il peut ensuite suivre ses statistiques et son progrès sur son profil. Il peut aussi définir des rappels personnalisables pour ne rien oublier.

Problématiques

La problématique de ce type d’application, ce n’est pas « comment faire comprendre le concept à l’utilisateur », car elles existent depuis des années sous différentes formes. Si on crée quelque chose qui existe déjà, c’est pour le faire mieux selon ses besoins, sa base d’utilisateur ou simplement pour que ce soit plus cohérent graphiquement. Les principales problématiques de Tasked étaient donc : Comment simplifier l’usage d’une application de productivité, comment appeler l’utilisateur à y revenir plus souvent et comment lui permettre de voir son progrès ?

J’ai donc commencé à imaginer l’application selon un process de design UX classique.

Process de design UX classique

Identification des utilisateurs
et de leurs besoins

Les besoins utilisateurs
Créer une nouvelle tâche, éphémère ou récurrente
Valider ou ne pas valider une tâche
Consulter le calendrier pour voir les tâches planifiées ou déjà effectuées
Consulter son profil pour voir différentes statistiques

Le spectre des utilisateurs d’applications type « lifestyle » est très large. Même si il est difficile de cerner précisément une base d’utilisateurs, leurs besoins, eux, sont souvent identiques malgré les écarts de personnalités.

L’utilisateur type a donc besoin de s’organiser, de former des habitudes et il est assez à l’aise avec le monde des applications. C’est un genre d’application orienté vers ceux qui veulent mettre de l’ordre dans leur vie et essayer de mener à bien des objectifs qu’ils oublieraient sans elle, donc il faut que ce soit simple d’accès, sans même avoir besoin d’un tutoriel.

Étude de la concurrence

Pour me renseigner sur ce qui se faisait déjà, j’ai téléchargé deux applications au but similaire : « HabitNow » et « Liste de Tâches ». Les deux abordent un style plutôt Material Design et sont assez simple d’utilisation aux premiers abords. HabitNow permet d’enregistrer une tâche ou une habitude (une tache récurrente), et Liste de Tâches permet, elle, de faire se répéter une tâche, mais sans possibilité de choisir quels jours spécifiquement.

Toutes deux font arriver l’utilisateur sur l’écran des tâches du jour, ont un bouton « Ajouter » bien mis en avant en bas à droite, et permettent de retrouver, plus ou moins facilement, le calendrier des tâches passées ou à venir. Ces quelques fonctionnalités sont communes (à la plupart des applications du même type) car elles sont nécessaires, et remplissent au mieux les besoins principaux des utilisateurs de ces applications.

Apps Similaires : Écran d'accueil
Apps Similaires : Écran d'ajout de tâche

Création de personas

Pour s’identifier au mieux au plus d’utilisateurs possible, j’ai imaginé deux personas diamétralement opposés, un jeune étudiant soucieux de garder des bonnes habitudes et de s’organiser ainsi qu’une mère de famille soucieuse d’occuper son temps libre intelligemment sans se lasser.

Même pour une application aussi simple, il est important d’imaginer des profils utilisateurs et de se mettre à leur place. C’est une habitude à prendre qui facilite grandement l’imagination de prochaines applications plus complexes.

Persona de Anne, mère de famille
Persona de Joan, étudiant marketing

Création de scénarios utilisateurs

Un scénario utilisateur, c’est le suivi d’une tâche en particulier que l’utilisateur va faire sur le site, accompagné d’idées ou de questions à chaque étape. Pour de grosses applications, c’est important d’en faire plusieurs, pour imaginer tous les problèmes que l’utilisateur va pouvoir rencontrer lors de chaque tâche.
Pour Tasked, je fait deux scénarios, un  pour l’action principale : Créer une tâche et un pour l’action secondaire : Consulter un jour spécifique dans le calendrier.

Scénario Utilisateur : Entrée d'une tâche

Création des wireframes

Une fois la phase de recherche complétée, j’ai pu m’attaquer aux wireframes. J’ai décidé dès le début de partir sur une « Bottom Navigation », c’est-à-dire un panel d’icônes pour les pages principales de mon appli, en bas de l’écran, facilement accessibles par l’utilisateur. C’est une idée souvent reprise dans les applications modernes, pour se détacher du fameux « Menu Burger ».

Les applications « concurrentes » présentaient, elles, des menus burger, et je n’ai pas trouvé cela agréable à l’utilisation ni facile à la compréhension (calendrier difficilement trouvable, options superflues, etc..). Ici l’application n’a besoin que de 3 onglets principaux : Les tâches du jour, le calendrier et le profil utilisateur.

Wireframes de Tasked

J’ai aussi imaginé plusieurs exemples d’un même écran à chaque fois, comme un écran d’accueil rempli de tâche, ou vide. De même, l’onglet « Ajouter une tâche », présente l’option « Une fois », ou « Recurrente ». Je n’ai pas non plus imaginé tous les écrans différents car le fonctionnement, assez simple, de l’application, pouvait être décliné facilement à partir de ces quelques écrans. J’ai cependant travaillé sur un « Design System » propre à l’application pour que les écrans se ressemblent bien et que l’utilisateur ne se sente pas perdu dans sa navigation.

Design system de Tasked

Conception Haute Définition

À défaut de conduire de véritables tests utilisateurs, j’ai présenté les wireframes à des amis pour avoir leurs avis et questions quant à l’organisation des différents éléments. Une fois satisfait de l’architecture globale après retours et corrections, j’ai pu m’atteler à la création haute définition.

Je suis parti sur une couleur bleue dominante pour donner à l’application une identité forte, qui ressemble plus à un réseau que l’utilisateur parcours qu’à une application de paramétrage. Ce bleu, aux angles arrondis et espacé de blanc permet aux écrans de l’application de respirer, afin que l’utilisateur ne se perde pas dans des listes serrées et compactes et que ce soit agréable à regarder, à l’inverse des deux applis concurrentes testées.

Écrans des tâches du jour

Le nombre d’onglets différents étant assez limité, j’ai maquetté plusieurs situations différentes à l’intérieur d’un même écran, comme le mode « List » ou « Grid » de la page d’accueil, ou l’affichage des détails d’une tâche lorsque l’utilisateur tape dessus. Comme envisagé dans le userflow puis dans les wireframes, j’ai incorporé un bouton d’ajout de tâche, bien visible et présent sur tous les écrans de façon à ce que l’utilisateur n’ai jamais à le chercher.

Écrans du calendrier de Tasked

L’écran d’ajout de tâche était sans doute le plus important, puisqu’un écran trop chargé ou incompréhensible dans ses paramètres rebuterait instantanément un utilisateur comme Anne (l’un des personas). C’est la raison pour laquelle j’ai choisi de ne pas incorporer trop de paramètres à une tâche. J’aurai pu mettre une priorité, une couleur, une catégorie ou autre, mais j’ai décidé de ne mettre en place que le nécessaire, le plus intuitif possible. Une action d’entrée de donnée ne devrait pas être un calvaire, surtout pour une appli que l’on doit se forcer à ouvrir pour prendre de bonnes habitudes.

Écran d'ajout de tâche de Tasked

Conclusion

Depuis que je me passionne pour l’UI / UX Design, j’ai eu l’occasion de créer plusieurs petites applications, plus ou moins grandes. Cependant, la plupart du temps ce n’était pas accompagné d’un process de recherche développé, ni d’une phase de conception étendue. Tasked est un projet en apparence simple, mais d’envergure très développée, qui m’a permis de perfectionner cette phase de recherche, nécessaire au bon développement d’applications agréables tant à regarder qu’à utiliser.

Je suis satisfait du résultat obtenu, même si il y a quelques fonctionnalités que je n’ai pas imaginé ici qui pourraient rendre l’application encore plus attrayante. Par exemple, avec un suivi statistique poussée des tâches « récurrentes », ou en ayant une coordination avec une application d’emploi du temps externe, l’utilisateur pourrait encore plus simplement incorporer ses nouvelles habitudes dans sa vie quotidienne et avoir une idée de leur impact.

voir le projet sur

projet précédent