Wellness (UI Design)

Ironhack Wellness Project — 2nde partie

Trois semaines après la partie UX de mon projet sur le bien-être, il s’agissait donc de déployer la partie UI. Pour rappel, ma solution Feed Fit est un site Internet qui encourage les gens qui veulent pouvoir faire une activité physique n’importe où, mais pas seuls, en invitant un ami à le faire ensemble, en visio, à distance.

Mes recherches utilisateurs m’ont aidé à construire 2 personae, Valérie 29 ans et Anne-Laure 31 ans, toutes 2 parisiennes et complètement conscientes que faire du sport c’est important mais qui se disent que c’est quand même beaucoup moins motivant de le faire seules.

Prototypes Mid-Fidelity

Si la construction de mon site est plutôt classique avec en page d’accueil une mise en avant des programmes avec une belle image et un call to action, une section pour la nutrition et enfin des témoignages d’utilisateurs, il fallait que je puisse différencier mon offre et ma marque. Reprendre par exemples certains codes du marché et y insuffler des éléments différenciants.

CONCURRENCE

Revenons ainsi un instant sur ce marché de la forme. En effet, lorsque vous arrivez sur un marché, vous pouvez (à peu près) tout vous permettre graphiquement puisque vous tracez la voie en premier.

Il se trouve que Feed Fit arrive sur un marché avec déjà énormément d’acteurs et qu’il faut que l’on fasse ce difficile équilibre entre d’un côté “On est des professionnels de la forme comme les autres” et de l’autre, le “Nous on est vraiment différent !”, non seulement dans le concept (“à plusieurs, à distance, en visio”) mais aussi dans sa traduction graphique afin de créer de la différenciation et, espérons le un jour, de la préférence de marque.

Overview de la concurrence

On est dans une ambiance dark chez mes concurrents. C’est noir, gris foncé, très sombre. On veut véhiculer l’idée qu’il y aura de l’effort et de la sueur ; ce sont presque des gladiateurs, des guerriers, “no pain no gain”. Ils utilisent des typos fortes, avec une graisse épaisse pour maximiser l’impact de leurs messages en titre.

MOODBOARD & STYLE TILE

J’ai donc décidé de reprendre quelques uns de ces codes. Je vais utiliser du noir et un camaïeu de gris mais pour recréer de la convivialité, de la sympathie et du fun, je vais contrebalancer avec :

  • D’abord, du blanc pour y apporter du contraste et de la douceur. On est là pour faire des efforts mais chez Feed Fit, on le fait de manière moins machinale, plus conviviale
  • Ensuite, on va apporter de la convivialité et du soleil avec ce doré, tenter de recréer le “ensemble même à distance”.
  • Enfin, comme mes cibles prioritaires sont des femmes autour de la trentaine, je vais jouer à fond la carte “girly” avec un rose fuchsia/pamplemousse.

Concernant la typo, j’utilise moi aussi une typo “forte” avec une graisse épaisse, la Hiragino Kaku Gothic, pour poser les choses et maximiser l’impact de mes messages dans les titres. Pour les corps de texte, j’utilise simplement une Roboto pour contraster avec ces titres plus forts. La Roboto avec son côté plus “random” et rond contribue aussi au côté convivial, familier, on est “comme à la maison”.

Moodboard Feed Fit
Style Tile Feed Fit
Atomic design

HIFI & DESIRABILITY TESTING

Une fois les prototypes hifi créés, j’ai testé la désirabilité de ma proposition auprès de mes cibles. Elles ont testé mon prototype via Marvel et ont donné leur ressenti via une proposition de 40 adjectifs “non négatifs”. Mon design devait produire de la convivialité, inspirer quelque chose de simple mais fun, attrayant et sympathique afin de donner envie et de réduire la distance induite par l’interface numérique et la distance physique entre les 2 utilisateurs.

La convivialité à été citée 4 fois sur 5 tests. C’est exactement ce que je voulais véhiculer comme ambiance afin de “rapprocher” les gens et les convaincre de faire ces activités physiques ensemble, à distance. Les autres adjectifs (attrayant et fun cités 3 fois chacun notamment) contribuent à renforcer ce côté “inclusif” que je cherchais à donner.

Les adjectifs “No go” étaient concentrés autour du “conventionnel” dont je voulais sortir afin de différencier Feed Fit. J’en ai eu 1 (“Classique”). En creusant davantage ce choix avec ma testeuse, elle parlait en réalité de l’offre et du côté “c’est classique, vous faites faire du sport et prônez de manger équilibré comme les autres offres en ligne”. Qu’elle s’est empressée de rectifier par un “C’est vrai que vous proposez tout de même de le faire à plusieurs”. Je n’ai donc pas fait de modification graphique majeure suite à ces tests même si tout est toujours perfectible.

Ci-dessous une vidéo avec un user flow ou la possibilité d’expérimenter directement ce flow ici (où tout n’est évidemment pas cliquable).

Merci et à très bientôt pour un autre projet !

Tahina