Climby

Valentin

Product designer

UI designer

Arnaud

Développeur Flutter

Mon objectif dans l'approche "product" sur le projet Climby était d'accompagner Raphaël, l'un des porteurs de projet, dans le listing des fonctionnalités nécessaires à cette v1 de l'application.

En effet, les ambitions de ce projet sont conséquentes et il était important d'avoir une vue à la fois produit et technique pour rendre le champ d'action réalisable.

Travail en amont

Avant de commencer ce travail, j'ai orienté Raphaël vers la réalisation d'interviews auprès du marché qu'il souhaitait viser pour obtenir les informations suivantes :

• Quelles sont les problématiques rencontrées par ce marché ?

• Comment identifier les personas qui constatent ces problématiques ?

• Quels sont les différents membres de ce marché ?

Méthodologie

À partir des informations récoltées, nous avons pu lister les fonctionnalités essentielles, répondant aux problématiques les plus fortes des utilisateurs et étant accessible techniquement.

Pour finir, j'ai pu exécuter une démarche de conception plus standard du produit, à savoir :

• Définitions des fonctions principales devant être réalisées avec l'application,

• Écriture du parcours utilisateur (User Flows) sous forme de logigrammes,

Résultat

Listing des attributs des objets constituant l'application.
Note : ce listing permet de déterminer les informations desquelles on doit disposer à certains moments du parcours utilisateur.

Exemple de parcours utilisateur dans l'application

Méthodologie

Ma méthodologie a été guidée par la volonté de faire une interface réalisable par les développeurs, elle s'est déroulée de la façon suivante :

• Sélection d'une bibliothèque de composants existante (pas besoin de custom pour une v1), j'ai donc choisi Material  3, car l'application sera en Flutter,

• Création des maquettes et reconstitution des User flows sur Figma,

Une particularité de cette application qui a induit pas mal de challenge, est que, sachant qu'elle gère du streaming vidéo et des paiements in-app, elle doit gérer beaucoup (vraiment beaucoup) d'états différents.

J'ai donc fait en sorte d'être en tandem constant avec les développeurs pour faire en sorte que le UI puisse supporter efficacement tous ces états.

Résultat

À gauche, le feed présentant les posts diffusés sur la plateforme, à droite, le rendu d'une session en live vidéo.

À gauche, la page de profil d'un utilisateur, à droite, un exemple de gestion d'état de l'application (ici un utilisateur souhaitant accéder à un contenu premium alors qu'il n'est pas abonné à son auteur).

Dans le cadre du projet Climby, je suis intervenu en tant que lead sur le développement Flutter. J'ai assuré les tâches suivantes :

• Rédaction des spécifications techniques,

• Assurer un Git flow, dev, stag, prod (Conventionnel commit),

• Assurer un code source propre à travers des codes review à chaque pull-request (Github),

• Gérer les releases en test interne et production (Semantic versionning),

• Assurer les échanges et la conformité avec les équipes de validation d'application (Apple et Google)

• Valider les fonctionnalités avec le client et les ajuster en fonction des retours marché,

• Gérer le budget de développement et le timing du projet,

• Développer des fonctionnalités front et back.

L'application dispose, entre-autre, des fonctionnalités clés suivantes :

• Système de paiement in-app entre utilisateur,

• Streaming vidéo (one to many),

• Stockage de fichier volumineux.

Développement front-end en Flutter

• State management avec BLoC,

• Layer architecture

• Agora (Streaming)

• Stripe (Paiement avec récurrence)

• Gestion multi-environnement (dev, stag, prod)

• Internationalisation (l10n)

Développement back-end avec Firebase

• Serverless : Node.js Typscript (Cloud function)

• Database : NoSQL (Firestore)

• Autre service Firebase utilisé : Storage, Authentication

• Firestore rules (Sécurité)

• Github action (Analyse statique du code)

• Code magic (Gestion des release)