ABOUT
Figma | Photoshop | Notion

Création de solution digitale de A à Z

Dans le cadre de ma formation en webdesign UI/UX, au sein d'une équipe pluridisciplinaire, nous avons sélectionner une problématique afin de créer une solution autour. En se basant sur la définition de notre projet et ses analyses marketing j'ai développé ma méthode de travail en tant que Webdesigner UX/UI pour construire toute la solution numérique de ce projet.

/ La problématique

Difficulté pour un artiste de se lancer

Les artistes musiciens peinent à se lancer professionnellement, construire un réseau pro, trouver des financements, etc...

/ L'objectif

Un nouveau label innovant et accessible

La création d'un label musical ancré localement, à tarif compétitif et proposant un réèl avantage pour les artistes membres.

/ L'organisation

Gestion de projet

En adoptant une gestion de projet en méthode agile, nous avons organisé le déroulé du projet parallèlement à nos études et nos entreprises pour garantir la livraison de notre solution. Il convenait de répartir les objectifs de chaque teams métier. De concevoir un planning de Gantt avec ses chevauchements, ses breakpoints, ses réunions régulières. Aussi nous avons conçu :

  • Une note de cadrage
  • Un cachier des charges & un cahier des charges fonctionnels
/ Etude de marché

Approche Marketing

Cette étape au prémice du projet était nécessaire pour batir les bases du projet et sa viabilité. Afin de devenir un acteur de référence dans le secteur, j'ai aider la team marketing à définir notre avantage concurrentiel, notre proposition de valeur, notre positionnement dans un marché très concurrentiel. Cette partie est intrinsèquement connecté à mon travail d'UX/UI designer et se chevauchait. Je ne dévelloperai pas ici l'étendu du travail marketing effectué pour la viabilité globale de notre offre.

Très tôt, nous avons réalisé une étude qualitative à l'aide de Google Forms pour recueillir le besoin de nos cibles, leur frustrations et autres informations indispensable à mon travail. Celui-ci à permis de vérifier nos attentes, les artistes manquent de moyens, de contact, de confiance envers des structures pouvant être peu transparentes et peu utile. Ils manquent également d'organisation efficace lors de travail collaboratif avec d'autres professionnels comme par exemple avec le partage de documents et la multitude d'outils numérique utilisée.

Ainsi notre avantage concurrentiel était défini, notre label en plus de mettre en collaboration les acteurs du milieu, permettra à ses membres de pouvoir travailler depuis le site du label sur un outil tout-en-un de travail collaboratif sous forme de dashboard, en plus d'être mis en avant directement par le label.

/ Ma méthode de travail

Approche centrée utilisateur

Pour concevoir cette solution la plus adaptée à notre utilisateur cible. j'ai adopté pour mon travail UX Designer ( d'ergonomie digitale ) une approche centrée utilisateur. Celle-ci se caractérise par empathie à se mettre à la place de notre utilisateur cible, et de mettre en place divers ateliers de conception UX en équipe ou en solitaire.

On en a parler mais la définition de nos personas primaires, secondaires et tertiaire était la première étape. Les musiciens étant notre coeur de cible, les "artistes" et techniciens nécessaire à la conception de projets musicaux ambitieux font aussi parti de nos cibles pour pouvoir collaborer au sein du label. Nos cibles secondaires seront les responsables d'établissement et d'évênements pouvant booker nos artistes. Et enfin, les visiteurs et fans d'artistes seront nos cibles tertiaires. Etendre et définir l'étendu de nos cibles utilisateurs est indispensable pour concevoir un site ergonome qui soit à la fois, utilisable et surtout utile à tous.

Tri de cartes

J'ai ensuite animé un atelier de Tri de Cartes, dans une phase d'idéation, pour commencer à concevoir les fonctionnalités que l'on pourrait retrouver sur notre solution digitale. Une fois ces fonctionnalités énumérées selon leur essence la plus petite. Je viens délimiter le périmètre primaire à notre MVP ( minimum viable project ) en écartant les fonctionnalités non-indispensable, et ainsi réduire le temps de production et mettre en place dès améliorations futures venant répondre à d'autres besoins dans de futures mises à jour une fois le projet lancé. Cette étape est indispensable et permet de regrouper les fonctionnalités en section que l'on retrouvera ensuite dans la structure de notre site.

Arborescence

J'ai ensuite pu construire l'arborescence détaillée de notre site, celle-ci doit permettre aux utilisateurs de trouver rapidement ce qu'ils recherchent, de servir notre tunnel de conversion, et de réduire le taux de rebond. Celle-ci se compose ainsi :

/ Suite

Empathy Map & Experience Map

Ces deux outils de l'UX/UI Designer, se complètent tout deux, en se mettant à la place de notre utilisateur, ils permettent de soulever les points de frictions que pourront rencontrer notre cible à la découverte du site et au parcours utilisateur définit. Leur émotions et leur réactions notés, je viens ensuite en place des correctifs, des solutions spécifiques pour répondre aux points de frictions évalués. Ceci afin d' l'ergonomie et de prévoir les risques. Cette étape permet aussi de challenger l'arborescence et le parcours utilisateur tout en enrichissant la conception futures des wireframes.

/ Conception

Workflow UI

En tant que Designer d'interface, parallèlement et une fois la phase d'idéation aboutit, et la définition de notre identité visuelle, je commence mon travail de production de maquettes, en m'appuyant sur le travail préalable et en suivant la méthodologie suivante :

  1. Benchmark : Je réalise une analyse approfondie de la concurrence vis à vis de leur site web en notant leurs points faibles et forts. Mettre en évidence la récurrence d'éléments, de fonctionalités, de style visuel.
  2. Moodboard : Plus à la manière d'une planche d'inspiration, je suis venu constitué un recueil de style d'interfaces, d'animations.
  3. Zoning : Cette étape me permet de construire une première visualisation non-stylisé et détaillé du site.
  4. Style Guide & Atomic Design : Cette approche du travail de UI Designer permet de garder une cohérence dans le projet et facilite le travail de l'intégrateur ou du dévellopeur dans une optique de travail en méthode agile.
  5. Wireframe : L'étape de maquettage, celle-ci vient présenter ma vision du site en haute-fidélité ( hautement désigné et composé du contenu rédigé ). Cette étape permet au maître d'ouvrage de fixer et de valider le visuel du site. Cette étape lance la phase de développement.
  6. Prototypage : Cette phase réalisée à l'aide de Figma, permet aux maquettes de se rapprocher sensiblement du réèl en intégrant les interactions et autres animations. Utile pour la phase de recettage qui s'en suivra et pour les développeurs.
Close

About

Né dans les années 90, j'ai grandi entre la mer et les montagnes. Mon parcours a d'abord débuter dans l'univers scientifique, j'ai ensuite suivi mon envie de découvir le monde entrepreunarial. Toutes ces expériences vécuent m'ont enrichient et me rendent polyvalent, des atouts qui me permettent aujourd'hui de m'épanouir dans le digital.

animé par la curiosité et la polyvalence, J’exprime ma créativité à travers la photographie, la mode et la peinture. la lumière, les couleurs, les volumes sont mes outils de prédilection. Mon approche se distingue par mon enthousiasme, ma sociabilité, mon esprit entrepreneurial, et ma perspicacité. Si vous recherchez un professionnel passionné, rencontrons - nous et donnons vie à des expériences mémorables

Portrait Tanguy Diaz