Présentation
Oclocher est une application visant à améliorer la communication au sein de communautés chrétiennes. Elle permet notamment de partager leur actualité, et rappeler les événements à venir.
Objectif
Corriger les problèmes liés à l'Expérience Utilisateur de la v1 de l'application et moderniser son interface. Le tout, en limitant au maximum l'utilisation de packages de développement.
Valentin
Product designer
UI designer
Arnaud
Conseiller technique
Afin d'assurer la pertinence du travail de re-design de l'application qui suit, nous avons organisé une journée d'échange orienté Product design avec les 2 co-fondateurs.
Travail en amont
Nous avons chargé les co-fondateurs de réaliser une enquête auprès de leur base client autour des questions suivantes :
À quoi leur sert l'application actuellement ?
Quel est l'objectif perçu de l'application ?
Méthodologie
Pour structurer la réflexion autour de l'objectif "corriger les problèmes liés à l'Expérience utilisateur de la v1", nous avons choisi d'utiliser la méthode "How May We", qui consiste à suivre le processus suivant :
Lister les problématiques utilisateur,
Les formuler en opportunités du type "Comment pourrait-on ... ?",
Par Valentin
À l'issue du travail de Product Design, j'ai retranscrit l'ensemble des solutions envisagées sur le logiciel FigJam. Ces éléments m'ont servi de ligne conductrice pour le travail de design.
Méthodologie
Afin de ne pas être biaisé par le rendu visuel de l'application, j'ai opté pour la méthodologie suivante :
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
Dans le but de simplifier le travail des développeurs peu nombreux sur cette application, j'ai opté pour l'utilisation du Material Design System : un ensemble de composants et de règles éditées par Google et directement disponible sur le framework utilisé (Flutter).
Cela permet alors aux développeurs de ne pas recréer une grande majorité des composants.
Maquette sous forme de User Flow. On distingue ici un processus de visualisation puis édition d'un objet de l'application.
Quelques exemples supplémentaires de rendus de l'application.
Cas particulier
La vocation de cette application est de faciliter au maximum les échanges entre membres. Nous avons donc choisi de libérer au maximum la page contenant le feed de post. Pour ce faire, nous avons remplacé la barre de navigation en bas de page par un drawer de navigation accessible depuis le bouton “sandwich” en haut à gauche de cette page.
Cela permet de mettre en valeur les différents posts ainsi que le bouton d’action flottant incitant les utilisateurs à publier.
Par Arnaud
Dans le cadre du projet Oclocher, j'interviens en tant que conseiller technique auprès d'Arthur, le CTO et co-fondateur de l'entreprise. Nous travaillons sur le framework Flutter.
Ne perdons pas de temps, et lançons votre projet !