Développement de l’application mobile XO et de supports de communication web
XO est une application mobile que j’ai réalisée en collaboration avec Alexandre Ducas, développeur chez Drake Development, une société spécialisée dans le développement back-end et front-end d’applications mobiles avec le SDK Flutter ainsi que dans la réalisation de sites web avec le CMS WordPress. L’application XO était disponible gratuitement sur Android et iOS.
Réalisations
Expertises
XO, le fruit de la collaboration de 2 passionnés
Contexte
A l’été 2022, suite à son auto-formation sur Flutter, Alexandre souhaitait pouvoir mettre en pratique ses connaissances au travers d’un projet concret. Son objectif était d’élaborer une application mobile de A à Z qui puisse couvrir tous les aspects inhérents au développement de ce type de solution : de la création du back-end à l’intégration des maquettes et des composants graphique du front-end jusqu’au déploiement de l’application sur Android et iOS. Pour ma part, je rêvais de développer une application mobile depuis des années, j’avais donc des idées de concepts plein la tête que j’ai proposés à Alexandre.
C’est ainsi que nous avons eu l’idée de développer l’application XO et que l’aventure a commencé.
Avec XO, testez la force de votre amitié !
Le concept de XO
Vous connaissez le dicton, les ami.e.s “c’est pour la vie !” Mais savez-vous à quel point vous les connaissez ? Et à quel point ils vous connaissent ? Avec XO, testez la force de votre amitié en répondant aux questions de nos tests ! Le score que vous obtiendrez vous permettra d’en apprendre davantage sur celles et ceux que vous aimez et de déterminer qui de vous deux connaît le mieux l’autre.
Comment ça marche ?
Pour jouer sur l’application, il faut être 2 joueurs et disposer d’un smartphone. Après avoir choisi le thème et le niveau de leur test, les joueurs saisissent leurs prénoms puis répondent l’un après l’autre à une série de 10 questions sur le même téléphone. Ensuite, les joueurs corrigent les réponses données par leur partenaire puis découvrent ensemble le score qu’ils ont obtenu.
Création graphique
de l’identité visuelle XO
Dès le début, nous avons fait le choix de développer une application mobile grand public de manière à ce qu’un maximum d’utilisateurs puissent utiliser XO. Ainsi, nous avons porté une attention bien particulière à ce que les contenus textuels et graphiques mis en avant sur notre application soient adaptés à toutes les classes d’âge afin de pouvoir obtenir une classification Pegi 3 sur Google Play et l’App Store. Bien que notre application puisse toucher le grand public, nous avons choisi d’orienter notre communication principalement pour les jeunes de 12 à 25 ans car nous pensons qu’il s’agit du public le plus susceptible d’utiliser notre service.
En ce sens, nous souhaitions que le nom de notre application puisse parler immédiatement à notre cible et qu’il soit court pour pouvoir être retenu facilement. C’est ainsi que nous avons eu l’idée d’appeler notre application « XO » : le « X » et le « O » faisant référence aux anglais qui utilisent ces lettres pour exprimer un bisou ou un câlin à la fin de leurs messages. Sur Google Play et l’App Store, nous avons associé la baseline « Testez votre amitié » à « XO » de manière à ce que les utilisateurs comprennent immédiatement le concept de notre service. Le design du logotype XO se veut simple et efficace et s’inscrit en continuité graphique de l’application.
Développement de l’application mobile XO
La méthodologie de gestion de projet
Nous avons choisi de développer l’application XO en mode agile (Scrum) car nous nous étions fixés comme objectif de sortir une première V1 de l’application le plus rapidement possible et d’implémenter par la suite de nouvelles fonctionnalités. Au démarrage du projet, nous avons établi un product backlog afin de pouvoir recenser toutes les fonctionnalités de notre application puis nous avons utilisé la méthode MoSCoW pour les classer et les prioriser selon leur degré d’importance.
L’UX : le storyboard et le wireframing
Par la suite, j’ai réalisé des wireframes des différentes interfaces de l’application afin d’en établir leur squelette et pour rassembler les fonctionnalités essentielles ainsi que les principaux éléments de contenus graphiques et textuels. Enfin, j’ai également réalisé un story board pour illustrer l’expérience et le parcours de l’utilisateur à travers le produit et les différentes actions qu’il sera amené à effectuer.
L’UI : les maquettes graphiques
Pour identifier l’ambiance graphique de XO, j’ai réalisé quelques ébauches des interfaces que j’ai déclinées dans des styles graphiques et des couleurs variées pour nous aider à comparer plus facilement les rendus. Nous avons choisi de partir sur trois couleurs dominantes dans des tons pastel : du bleu, du violet et du rouge rosé afin d’obtenir une ambiance apaisante ; Enfin, afin de rendre l’application simple et intuitive, nous avons opté pour un style graphique moderne, sobre et épuré.
Le développement de l’application
En vue du développement et de l’intégration des contenus au sein de l’application, j’ai communiqué à Alexandre toutes les ressources nécessaires : le fichier XD des maquettes des interfaces, les éléments graphiques (icônes, pictos, illustrations) au format .SVG et les contenus textuels au format .doc.
Design
XD, Illustrator
Langages
Python, Dart
Technologies
Flutter, Firebase
Plateformes
Android, iOS
Réalisation de supports de communication web
Pour pouvoir présenter notre application et la faire connaitre, nous avons eu l’idée de créer un site one page. Sur ce site, nous expliquons le concept et le fonctionnement de XO, nous présentons les thèmes actuellement disponibles et ceux qui le seront à l’avenir et nous communiquons autour des améliorations et des futures fonctionnalités que nous prévoyons d’implémenter par la suite. Enfin, nous prévoyons également de commencer à communiquer sur les réseaux sociaux dans le courant du troisième trimestre 2023 grâce à Jean qui est community manager et qui rejoint notre équipe !
Design
XD, Illustrator
Technologie
WordPress
Plateforme
Web
Vous avez un projet ?
Vous souhaitez développer une application mobile ?
Mes réalisations
Découvrez les études de cas de mes autres réalisations graphiques !