02 août 2017

Dreem, le bandeau actif et connecté qui vous fait dormir

La startup notamment financée par Xavier Niel, Rythm a créé le bandeau Dreem, première technologie active dédiée à l’optimisation du sommeil. User Studio a conçu et réalisé l'application liée à l'objet connecté, de son concept graphique au dernier pixel.

par Matthieu Savary

Vous avez toujours l'impression d'avoir bien dormi ? Nous non plus. Pourtant, objectivement, nous dormons tous peut-être pas si mal, mais nous subissons l'arbitraire de nos horaires de réveil… et la qualité du réveil est fondamentale dans la manière dont nous ressentons le sommeil : pour faire court, mieux vaut éviter de régler son réveil en pleine phase de sommeil profond. Oui, facile à dire. Certains de nos clients ont d'ailleurs déjà exploré la question, et nous ont demandé de les accompagner dans la création de l'application mobile liée.

La startup Rythm a quant à elle décidé de pousser la recherche un cran plus loin : avec le bandeau Dreem, véritable stimulateur de sommeil, Rythm entend révolutionner cette activité généralement nocturne de notre cycle biologique. Fou ? Oui, un peu, mais n'est-ce pas comme cela, d'une question folle que naissent les meilleurs projets Notre intervention sur l'application s'est construite — avec célérité — de la conception d'une stratégie UX à partir d'un userflow relativement complet, jusqu'au dessin de chacun des pixels des écrans de la première version de l'application, en vue d'être intégralement transmis aux développeurs.

Stratégie UX

Exemple de mindmap issu de la recherche utilisateurs, interviews, stratégie produit…

C'est sans aucun doute dans cette première phase de conception que se jouent les enjeux essentiels de l'expérience d'une application aussi complexe que celle qui consiste à piloter un produit connecté hyper intelligent. Il s'agit de traduire les résultats et bénéfices de recherches pointues en matière de neurosciences en quelques écrans simples à prendre en main…

Idéation : recherche de concept

Un vrai challenge de design d'expérience, que l'on reconnaît d'autant plus quand on considère le contexte : dormir constitue une activité hautement mystérieuse, impossible à observer sur soi-même, dont l'expérience est par définition impossible à analyser "de première main". Même les phases amont et aval sont complexes à apprécier de manière raisonnable, tant l'endormissement et le réveil constituent des moments charnières entre reigne des songes et monde réel. Plutôt amusant en somme !

Compte-tenu de la relative urgence, après une phase rapide d'analyse du contexte issue d'interviews de plusieurs chercheurs, d'utilisateurs-testeurs mais aussi de personnes souffrant de troubles du sommeil, nous avons lancé une phase intense d'idéation au cours d'ateliers créatifs, à base d'écrans de concepts notamment afin d'aboutir à une véritable vision, la stratégie UX de l'application.

Déclinaison UI

User flow – My nights

Une fois la stratégie fixée, la déclinaison des écrans permet de venir préciser chacun des moments-clés de l'expérience des futurs utilisateurs du produit connecté. Nous procédons par user flows, véritables arborescences issues des wireframes précédents… mais bénéficiant cette fois du travail de charte graphique et d'interaction.

Nous œuvrons également à une composante essentielle du design d'une application : les motion guidelines, ou guide des cinématiques. La cinématique d'une application ? Ça comprend les transitions entre écrans, la simple réaction visuelle dans le temps provoquée par un tap sur un bouton, ou encore les effets de smooth scroll qui permettent de naviguer dans un long texte tout en maintenant une forme de persistance rétinienne qui permet à nos cerveaux de faire le lien entre les élements qui apparaissent au fur et à mesure sur l'écran. Comme dans la vraie vie, en somme.

Connectez votre bandeau !

Sommeil en cours… Andrea, tu ne trouves pas le sommeil ?

Une compilation de mes nuits avec visualisation du sommeil profond

Mes nuits de la semaine en détails (sommeil profond / temps dormi)

Une fois l'ensemble de ces écrans déclinés — pour iOS dans ce cadre de cette mission, il ne reste plus qu'à transmettre l'ensemble de l'arborescence et des assets graphiques ainsi que les specifications de courbes de easing et temps de transition aux développeurs. Un processus simplifié chez User Studio par l'emploi des standards de l'industrie que sont SketchZeplin ou Invision.

Le suivi de développement, l'ajustement des éléments au cours des phases de production viennent compléter et assurer la fidélité des réalisations aux travaux de design réalisés.

Ce projet vous intéresse ? Mathilde, notre directrice du développement vous écoute au 01 42 59 47 54, ou vous répond par mail : hello@user.io.