Laftr

2019

Co-fondateur


Les grandes lignes

Laftr est une application qui permet de mettre en relation les personnes qui souhaitent continuer la soirée.

Mon role

UX design, UI design, Identité

Un contexte

Le soleil se lève sur Paris, les boites de nuit ferment mais les plus téméraires sont encore debout et n’ont pas prévu d’aller se coucher. Ils sortent leur téléphone et épluchent les pages Facebook pour dénicher un After. Plusieurs plans sont disponibles mais rien de très fiable… Ils n’ont pas la motivation de traverser la capitale pour se prendre une porte. La discussion est engagée, les idées fusent, l'application Laftr est née.

Un développeur, un designer et un chef de projet

Trois mois pour sortir un Minimum Viable Product


Nous imaginons une application qui référence les Afters.

UX Design

Mon travail se décompose en plusieurs parties réalisées suivant des cycles successifs, ce qui permet de sécuriser l’avancement et de s’ajuster. Cette démarche s’intègre naturellement dans une méthode agile.

Benchmark

Nous testons, comparons et analysons les produits et services concurrents. Nous en tirons plusieurs conclusions. Il n’existe pas de concurrent direct, personne ne propose un service dédié aux Afters. Par ailleurs, il existe plusieurs concurrents indirects. Ce résultat vient du faible nombre de clients potentiels actuels, un nombre en pleine croissance dans les grandes villes.

Nous avons aussi étudié les acteurs dont la fonction principale est très éloignée du service qui en résulte. En première place, Facebook qui contient de nombreuses pages alimentées régulièrement qui recensent les Afters dans plusieurs villes. Nous en concluons qu’un outil dédié simplifierait la recherche d’After.

Interviews

En vue du nombre élevé de nos amis faisant partie de la cible potentielle, nous n’avons pas eu de mal à trouver des personnes à interviewer. La trame principale était composée de la manière suivante mais la plupart des interviews ont souvent dévié dans des directions différentes, ce qui est une bonne chose car nous avons pu traiter un large panel de fonctions.

Présentation : « Je cherche à comprendre comment tu fais pour trouver / organiser un After. Je viens donc t’interviewer une trentaine de minutes. »

« Que sais-tu de cet entretien ? » - C’est intéressant de savoir comment on a présenté l’entretien auprès de cette personne.

« Raconte moi ton dernier After. » - Question ouverte pour détendre la personne en la faisant parler d’un sujet qu’elle connait bien.

« Explique moi comment tu as fait pour trouver ce plan. » - On engage sur le sujet principal en douceur en utilisant le sujet actuel.

« Quels sont les outils que tu utilises pour trouver un After et décris les moi ? » - J’en profite pour découper les étapes du parcours. A l’aide d’une bonne dose d’empathie, je rebondis, j’approfondis, je découpe et j’apprends.

« Quels sont les problèmes auxquels tu as déjà été confronté ? » - Définir les points négatifs des solutions actuelles en creusant et en approfondissant.

Clôture de l’entretien : Remerciements

Experience map

Nous réalisons une experience map afin de visualiser l’expérience globale d’un fêtard lambda qui souhaite continuer sa soirée. Nous faisons attention à construire ce tableau sans se baser sur un produit donné pour apporter un éclairage sur les comportements normaux et fondamentaux.

User journey

Réalisation de la user journey afin de visualiser le processus qu’une personne doit suivre pour participer et organiser un After et déterminer les points de contact sur le parcours client qui sont source de tension ou de plaisir.

couleurs principales

Arborescence

L’architecture de l’arborescence est une pièce maîtresse dans la construction de l’application. Ce travail nous a permis de faciliter grandement les interactions entre les équipes et résoudre les problématiques techniques et ergonomiques. Cette cartographie a fait l’objet de nombreux ajustements au cours des évolutions de conception-création du projet.

couleurs principales

Wireframing

Réalisation des wireframes en suivant les spécifications de l’arborescence et en ajoutant les empty states et placeholders. La résolution est basée sur un iphone 6-7-8 pour simplifier le responsive.

logo animé

User test

Une fois les wireframes réalisés, nous avons construit un prototype pour tester l’expérience utilisateur. Nous avons rencontré cinq personnes, ce qui nous a permis de détecter des incompréhensions et d’améliorer certains points.

couleurs principales

UI Design

L’expérience utilisateur est construite, les grandes lignes sont figées. Il est désormais temps de passer au design de l’interface. Nous suivons trois grands principes : agréable, pratique et facile à prendre en main. Nous avons procédé en plusieurs étapes qui sont expliquées ci-dessous.

Charte graphique

Nous réalisons une charte graphique extrêmement simple pour ne pas perdre trop de temps et laisser libre cours à la créativité. Ainsi, nous avons un logo, un icon et trois couleurs. La charte graphique se structurera avec le temps pour les prochaines release.

logo animé logo animé
icon iphone x
logo sur le produit

Illustrations

Nous réalisons des illustrations pour augmenter la compréhension du texte et le rendre plus agréable. Cette démarche est importante dans l’expérience que va vivre l’utilisateur.

UI Kit et Styleguide

Réalisation du kit UI pour simplifier la construction des écrans et respecter les spécifications design. Une partie du kit est exposée ci-dessous.

couleurs principales couleurs secondaires

Iconographie

Une vingtaine d’icons sont réalisés en suivant les mêmes guidelines. Graisses, arrondis et géométries sont respectés.

couleurs principales

Typographie

Nous avons choisi Helvetica Neue pour sa simplicité et sa grande lisibilité. Deux facteurs importants pour des utilisateurs dont les capacités cognitives peuvent être partiellement réduites.

pangramme typographie

Interfaces

Une fois le travail ci-dessus terminé, rien de plus simple que de décliner les écrans en se basant sur la structure UX. Au même titre que pour le wireframing, les interfaces ont étés réalisées avec une résolution d’iphone 6-7-8 pour simplifier le responsive.