TicBot, un assistant pour s’éloigner du portable

De la famille des objets connectés, le Ticbot a pour objectif initial de s’animer de plus en plus vivement au fur et à mesure que vous déverrouillez votre portable. Conçu par Catherine Ramus, Huieun Kim et Tristan Savina, son objectif était d’amener l’utilisateur à moins utiliser son téléphone portable. Dans sa nouvelle présentation en 2019, son but initial évolue. Maintenant, il devient un objet plus complexe qui active ses animations uniquement à partir d’un nombre indiqué de notifications. Le paramétrage de ces notifications se base donc toujours un téléphone mais nécessite la création d’une application afin de fonctionner correctement.

Ancienne interface du Ticbot qui indique le nombre de déverrouillage par heure

Annexe : TicBot, l’objet qui traduit nos tics numériques

Rôles

Ma mission consistait à créer les différentes interfaces d’une application mobile Android et IOS afin que l’utilisateur puisse renseigner l’application dont il souhaitait avoir les notifications et leur nombre. Dans un premier temps, il a fallu définir le parcours utilisateur et l’expérience souhaitée par le client. La livraison comprend les maquettes graphiques, les fichiers de travail ainsi qu’une vidéo et un prototype interactif. 

Pendant toute la durée du projet, celui-ci a connu plusieurs itérations, notamment graphique. Afin d’éviter de multiples aller-retour, j’ai dans un premier temps conçu des Wireframe sous Adobe XD puis créer l’animation finale avec protopie.

Animation des différents état du TicBot
Modèle 3D utilisé dans l’application TicBot, réalisé parClément L. avec Keyshot 

Suivre la progression de ses notifications

Dans cette interface, le client souhaitait suivre l’évolution des notifications des différentes applications. Le graphisme a connu de nombreuses évolutions dans le but d’identifier clairement les informations transmises par le tic bot : le nombre de connexion le jour consulté, l’historique passé sur la semaine (grisé) et l’historique de la semaine à venir (coloré). 

Recherches et Parcours

Une interface ludique et animée

Paramétrer ses différents objets électroniques demeure bien souvent une tâche complexe et assez sobre. Pour apporter, j’ai choisi chaque étape à une animation visuelle en 3D avec un effet de sketching. Basé à partir de la charte graphique d’Orange, ce projet de recherche vise à tester les nuances d’une même couleur afin de jouer davantage sur les contrastes de couleurs plus que sur celle-ci dans un souci d’accessibilité.

Graphiques correspondant aux notifications reçus au sein du Ticbot

Une configuration étape par étape

La cible de ce projet étant le grand public, il demeurait essentiel que son interface soit aussi simple que possible. Mon choix de design fut d’associer une action par écran et de limiter les points d’interaction. En laissant moins de choix de navigation à l’utilisateur, l’objectif est de l’orienter directement sur ce qu’il désirait faire au début. 

Cartographie des différents écrans du TicBot

Choisir Adobe XD plutôt que Sketch

Dans un but de cross-plateforme entre les environnements Windows et Mac, j’ai pris la décision de travailler avec Adobe XD. Le logiciel d’Adobe a connu de nombreuses évolutions depuis ses débuts en bêta et se rapproche de plus en plus des fonctionnalités de Sketch.

L’apprentissage de protopie

Ce projet nécessitait l’intégration de logique de prototypage un peu plus complexe que ne le permettait Adobe XD : boucle, animation sous forme de GIF… Afin de parvenir au résultat que je souhaitais, j’ai réalisé la maquette final et interactive grâce à Protopie. Ce logiciel apporte une bonne passerelle avec Adobe XD et permet grâce à des logiques de programmation d’approfondir le prototype jusqu’au bout de ce que je souhaitais proposer au département de recherche développement.

Ensemble d’écran extrait d’Adobe XD, Application TicBot

Description

Rôle : Product Designer (UX & UI)

Outils : Suite Adobe (Illustrator, Adobe XD)

Méthodes : 

  • Benchmark
  • Userflow
  • Wireframe
  • Maquette

Durée : 1 mois

Livrable : Maquette complète de la nouvelle interface et une vidéo de présentation au dimension de l'écran du prototype

fr_FRFrançais
en_USEnglish fr_FRFrançais