« Culture & Friends »est un concept pour une application mobile.

 

Outils utilisés : Google Docs, Photoshop, Affinity Designer, Atomic.io, Mindomo, InVision

 

BRIEF CLIENT
« Culture & Friends » est une application mobile permettant de trouver un partenaire de sortie lorsque l’on possède un pass duo pour un musée. Le concept est basé sur l’envie de rencontrer de nouvelles personnes et de partager avec elles un moment culturel.
L’application doit être simple d’utilisation, intuitive et fluide.
Elle doit répertorier de manière claire les profils d’utilisateurs, les lieux culturels et leurs situations géographiques.
Le graphisme doit être clair et simple. Le style doit être chaleureux, convivial et fun.
Les cibles de « Culture & Friends » sont les 18-45 ans qui apprécient les sorties culturelles et veulent rencontrer de nouvelles personnes.

CONTRAINTE ET OBJECTIF
7 jours pour réaliser from scratch une maquette graphique originale interactive.

DEMARCHE UX

Jour 1 : reformulation des objectifs pour mieux cerner les enjeux et identifier les problèmes.

Brainstorming client pour connaitre leurs attentes sur le produit et cerner au mieux les motivations, les désirs et, par la même occasion, révéler les éventuels points de dissension pour éviter tout décalage concernant la vision du projet et le futur travail qui en découlerait.
L’inventaire et l’analyse du contenu a été rapide puisque le dispositif n’en contenait aucun.
Suite aux informations collectées, nous avons déterminé les principes de design, c’est-à-dire les grandes lignes de conduite spécifique du projet, qui serviront de guide tout le long du process.

Les 4 valeurs :
– simplicité
– ludique
– chaleureux
– convivial
Création d’une tag line « la meilleure façon de faire une expo à deux » pour appuyer les principes de design.

Jour 2 et 3 : découverte de l’utilisateur, persona et idéation.

Utilisation des moteurs de recherche pour essayer de comprendre les motivations autour de la thématique « rencontre et culture ». Les recherches, s’appuyant notamment sur des études statistiques et des témoignages, ont montré que la notion de communication au sein d’un couple était un élément important qui passait par la case de la culture générale.

Pour que la communication fonctionne les affinités, entres les individus, doivent être pertinentes et réelles. Par exemple, un individu aimant l’art en général sera plus enclin à aller vers une personne possédant le même intérêt. Les statistiques montrent également que la relation dure plus facilement dans le temps si la communication fonctionne. La communication étant liée, dans ce cas-ci, au bagage culturel de la personne.

J’ai également interviewé des utilisateurs intéressés par l’application pour comprendre leurs motivations, leur état d’esprit et identifier les éventuels points de frictions, les manques et les besoins.

Des interviews, il est ressorti principalement :
1 – les interviewés souhaitaient rencontrer rapidement (proximité dans le temps et l’espace) et facilement (éviter trop de contrôle avant de pouvoir contacter la personne) le ou la futur(e) partenaire de sortie.
2- Les connectés doivent afficher sur leurs profils leurs préférences culturelles. Pour les interviewés il s’agit de trouver la bonne personne, celle qui correspondra le mieux avec la sortie programmée.
3- Affichage du genre, du visage et d’un système de notation globale pour rassurer le public féminin.

A partir de mes recherches, j’ai créé un persona primaire identifié sous le nom de Mathilde.
Mathilde est parisienne et célibataire. Attentive, motivée et enthousiaste, elle recherche pour la journée une sortie culturelle de qualité avec un garçon aimant l’art.

Etape idéation :
1-Benchmark concurrentiel et graphique auprès de la concurrence directe et indirecte pour sonder l’existant et en extraire les bonnes idées sans perdre de vue le fil conducteur des quatre valeurs.
2-Brainstorming afin d’analyser et de mettre à plat mes recherches. J’en ai déduit que la sortie culturelle reste avant tout un « prétexte », le but principal étant de rencontrer un partenaire « compatible culturellement » pour la sortie. Cette compatibilité culturelle doit permettre à l’utilisateur une expérience enrichissante et réussie puisque réellement partagée avec l’autre.
L’utilisateur doit aussi pouvoir très rapidement et très facilement créer un lien, une interaction pour trouver, ici, maintenant ou un peu plus tard, si c’est son choix, un partenaire de sortie.
J’ai évité le schéma classique d’une home page proposant les deux  calls to action : “je propose” et “je cherche “ afin de favoriser une immersion immédiate de l’utilisateur pour que celui-ci trouve rapidement un partenaire de sortie.
3-Séance de croquis sur des gabarits imprimés pour dessiner un maximum d’interfaces et d’éléments dans un temps chronométré. Elimination des maquettes, des idées les moins convaincantes.
Création sous la forme d’un diagramme dessiné le parcours utilisateur du persona.

Jour 4 et 5 :  Premiers wireframes interactifs et premiers tests.

A partir du parcours de Mathilde et de la maquette papier retenue, création d’un premier wireframe basse résolution interactif (d’abord avec Axure puis très rapidement avec Atomic.io pour une question de réactivité et de workflow plus adapté).
Après le splash et la page de connexion/d’inscription, l’utilisateur arrive sur la page d’accueil. La centrale view comporte deux sections :
– la première groupée en haut est un carrousel de vignettes/portraits verticaux d’utilisateurs proposant une sortie dans la journée (action temporelle immédiate ou très proche).
– une interaction de scrolling horizontal en swipant de droite à gauche  ou de gauche à droite (non implémenté sur le proto) permet de faire défiler les fiches.
– la seconde section affiche toutes les propositions de la semaine. Une interaction en swipant vers le haut permet d’agrandir la fenêtre et de scroller dans la liste. Un bouton filtre sticky situé en bas de la section ouvre une lightbox pour affiner la recherche.

Jour 6 et 7 : Affinage des wireframes qui au fil des versions montent en résolution.

Jour 2 à jour 7 : UI

L’identité visuelle et la charte graphique ont été travaillées en parallèle de l’expérience utilisateur dans un soucis de cohérence.
La charte graphique et le logo se veulent à l’image du produit : colorés, ludiques et conviviaux.

Typo “Courgette” en écriture cursive pour le logo (côté friendly, rond et chaleureux).

La rencontre est symbolisée par des cubes colorés (les individus) qui s’emboîtent pour former des mots intelligibles (l’échange, le lien, la rencontre) tels les jeux des enfants : désir de rassembler (ici les gens) tout en donnant du sens (ici la rencontre culturelle).
L’animation du logo se veut dynamique et ludique à l’image des cubes qui s’assemble pour former du sens.

Cliquez ici pour visualiser les benchmarks et les moodboards d’inspiration.

La maquette graphique interactive suivant le parcours utilisateur de Mathilde est disponible ici.

Parcours utilisateur de Mathilde

ETAPE I

Page splash

  • chargement de l’application

Page connexion

  • Mathilde s’inscrit via son adresse e-mail

Page inscription

  • Mathilde rentre son adresse e-mail et un mot de passe

ETAPE II

Page accueil

  • Mathilde swipe de droite à gauche sur la section verticale des sorties du jour pour voir les différentes propositions.
  • Mathilde via un swipe sur le haut de la section “les proposition de la semaine” agrandit la seconde section celle des sorties de la semaine. Elle scroll dans la fenêtre.
  • Fermeture de la seconde section via un scroll vertical de bas en haut.
  • Mathilde clique sur le portrait de Paul situé sur la section verticale des sorties du jour.

ETAPE III

Page profil de Paul

  • Mathilde scroll sur le profil de Paul pour voir sa proposition et ses infos personnelles. Paul est hors ligne. Mathilde lui envoie donc une demande via le call to action « demander à Paul ».
  • Mathilde quitte la fiche de Paul.

ETAPE IV

Page accueil

  • Mathilde agrandit la seconde section via un swipe vertical de bas en haut.
  • Dans l’attente de la réponse de Paul, Mathilde se prend au jeu et souhaite une sortie à j+2. Pour cela elle active le bouton filtre.

Page filtre.

Elle choisit  successivement les options suivantes :

  • Expo à J +2 (la date du jour étant le mardi 15 juin, automatiquement les choix de la section weekend  se désactivent)
  • Homme
  • Paris
  • Journée en semaine.
  • Elle quitte la lightbox.

ETAPE V

Retour sur la page d’accueil avec filtre appliqué.

Au-dessus de la seconde section, la ligne de notification a changé. Celle-ci indique l’état du filtre : proposition J+2, homme, en semaine, journée.

  • Mathilde scroll et porte son choix sur Pierre et clique sur la bande horizontale de la fiche de Pierre.

Page profil de Pierre.

  • Mathilde scrolle sur le profil de Pierre pour voir sa proposition et ses infos personnelles. Pierre étant en ligne, Mathilde clique sur le bouton « chatter avec Pierre ».

Page chat

  • Mathilde discute avec Pierre. Celui-ci accepte. Mathilde quitte le chat puis quitte la fiche de Pierre.

ETAPE VI

Retour sur la page accueil

  • Mathilde agrandit la seconde section via un swipe vertical de haut en bas.

Elle désactive le filtrage en cliquant sur le bouton filtre et re-bascule sur la première section via un swipe verticale de bas en haut.

  • La vignette de Paul indique que sa demande à été acceptée et de nouvelles notifications apparaissent dans la nav bar.

ETAPE VII

Page Profil de Mathilde

  • Mathilde clique sur l’icone « profil » situé dans la nav bar.
  • Cette action lui permet de voir ses offres et de lister ses sorties effectuées et programmées

Page favoris

  • Mathilde clique sur l’icone en forme de cœur « enregistrés » situé dans la tab bar.
  • Cette action lui permet de voir « ses favoris » et les personnes qui la suivent.