landing page du cours
landing page du cours
fonction
fonction
Product Designer
Product Designer
année
année
2023
2023
outils
outils
Notion, FigJam, Figma, stylo et papier.
Notion, FigJam, Figma, stylo et papier.
compétences appliquées
compétences appliquées
Desk research, stakeholder interview, experience map, wireframe, UI et plus.
Desk research, stakeholder interview, experience map, wireframe, UI et plus.
Avec la participation du propriétaire de l'entreprise, de l'instructeur et de 7 autres étudiants, il s'agissait de mon premier projet en tant que concepteur de produits, réalisé en 10 semaines. Le projet a été lancé avec l'ensemble de la classe et terminé en collaboration avec Taryn Berbee en tant que designer UX.
Avec la participation du propriétaire de l'entreprise, de l'instructeur et de 7 autres étudiants, il s'agissait de mon premier projet en tant que concepteur de produits, réalisé en 10 semaines. Le projet a été lancé avec l'ensemble de la classe et terminé en collaboration avec Taryn Berbee en tant que designer UX.
un nouveau début
Dans le cadre d'une transition de la consultance vers des cours en ligne sur l'impact social basés sur l'équité, l'objectif était de comprendre comment atteindre au mieux les nouveaux utilisateurs, tout en les rassurant sur le nouveau produit proposé.
Après avoir interrogé la partie prenante, quelques questions ont été soulevées. Certaines d'entre elles concernaient des décisions commerciales, telles que le choix de la plateforme, tandis que d'autres portaient sur les utilisateurs.
Dans le cadre d'une transition de la consultance vers des cours en ligne sur l'impact social basés sur l'équité, l'objectif était de comprendre comment atteindre au mieux les nouveaux utilisateurs, tout en les rassurant sur le nouveau produit proposé.
Après avoir interrogé la partie prenante, quelques questions ont été soulevées. Certaines d'entre elles concernaient des décisions commerciales, telles que le choix de la plateforme, tandis que d'autres portaient sur les utilisateurs.
points d'attention
points d'attention
1.
De quoi un cours a-t-il besoin pour permettre aux étudiants d'avoir un impact social positif ?
De quoi un cours a-t-il besoin pour permettre aux étudiants d'avoir un impact social positif ?
2.
Comment amener les utilisateurs à faire confiance à la marque et à investir leur argent dans le cours ?
Comment amener les utilisateurs à faire confiance à la marque et à investir leur argent dans le cours ?
recherche
- Les recherches effectuées se trouvent dans ce dossier FigJam, au cas où vous seriez intéressé par un examen plus approfondi.
- Les recherches effectuées se trouvent dans ce dossier FigJam, au cas où vous seriez intéressé par un examen plus approfondi.
problème
Nouvelle approche de l'entreprise avec peu d'indications sur la manière d'atteindre de nouveaux clients.
découvrir
Brief analysis
Desk research
Survey
User/Stakeholder
interviews
Insights
définir
Affinity map
Persona
Task analysis
Experience map
User flow
le vrai problème
Un futur travailleur social a besoin d'améliorer ses compétences en suivant une formation et veut être sûr d'avoir fait le bon choix.
développer
Wireframe
low and
medium
fidelity
livrer
User interface
Prototype
Solution
Une page d'atterrissage qui fournit autant d'informations pertinentes que possible pour que vous puissiez faire votre choix en toute sécurité.
problème
Nouvelle approche de l'entreprise avec peu d'indications sur la manière d'atteindre de nouveaux clients.
découvrir
Brief analysis
Desk research
Survey
User/Stakeholder
interviews
Insights
définir
Affinity map
Persona
Task analysis
Experience map
User flow
le vrai problème
Un futur travailleur social a besoin d'améliorer ses compétences en suivant une formation et veut être sûr d'avoir fait le bon choix.
développer
Wireframe
low and
medium
fidelity
livrer
User interface
Prototype
Solution
Une page d'atterrissage qui fournit autant d'informations pertinentes que possible pour que vous puissiez faire votre choix en toute sécurité.
Comprendre
le problème
Comprendre
le problème
When we started the project, the brief was still very vague and, even after better understanding the market and the business, when we conducted the first interview with the stakeholder, we made an affinity map to organize the information.
Still at the start of the project, we needed to define a problem and understand what we were building - remembering that the stakeholder had not defined a final product.
When we started the project, the brief was still very vague and, even after better understanding the market and the business, when we conducted the first interview with the stakeholder, we made an affinity map to organize the information.
Still at the start of the project, we needed to define a problem and understand what we were building - remembering that the stakeholder had not defined a final product.
s'adresser à
ceux qui savent
s'adresser à
ceux qui savent
Bien que nous ayons mené un survey de manière logique pour essayer d'atteindre le plus grand nombre de personnes possible avec le même questionnaire, nous avons fini par interviewer 4 utilisateurs qui sont des amis et des connaissances ayant une expérience dans le domaine du travail social.
C'est grâce à ces entretiens que nous avons pu obtenir la clarté dont nous avions besoin pour commencer à définir un produit et ce qui était essentiel pour transmettre la confiance souhaitée à chaque futur étudiant.
Voici les principales conclusions :
Bien que nous ayons mené un survey de manière logique pour essayer d'atteindre le plus grand nombre de personnes possible avec le même questionnaire, nous avons fini par interviewer 4 utilisateurs qui sont des amis et des connaissances ayant une expérience dans le domaine du travail social.
C'est grâce à ces entretiens que nous avons pu obtenir la clarté dont nous avions besoin pour commencer à définir un produit et ce qui était essentiel pour transmettre la confiance souhaitée à chaque futur étudiant.
Voici les principales conclusions :
aligner les faits
aligner les faits
l'entreprise croit
l'entreprise croit
1.
le choix de la plateforme a été une préoccupation majeure pour les parties prenantes
le choix de la plateforme a été une préoccupation majeure pour les parties prenantes
2.
se concentrer sur les professionnels et les personnes qui travaillent depuis longtemps
se concentrer sur les professionnels et les personnes qui travaillent depuis longtemps
3.
sans grande clarté sur ce qui serait offert aux étudiants
sans grande clarté sur ce qui serait offert aux étudiants
constatations
constatations
1.
l'étudiant a juste besoin d'avoir suffisamment d'informations pour choisir et faire confiance, la plateforme n'a pas d'importance
l'étudiant a juste besoin d'avoir suffisamment d'informations pour choisir et faire confiance, la plateforme n'a pas d'importance
2.
les professionnels moins expérimentés peuvent manifester plus d'intérêt et bénéficier davantage des offres de cours
les professionnels moins expérimentés peuvent manifester plus d'intérêt et bénéficier davantage des offres de cours
3.
les utilisateurs et les futurs étudiants ont besoin de clarté lorsqu'ils font des choix et la catégorisation peut être intéressante
les utilisateurs et les futurs étudiants ont besoin de clarté lorsqu'ils font des choix et la catégorisation peut être intéressante
Rencontrer amanda
Rencontrer amanda
Il était essentiel d'avoir un persona au cours de ce projet pour créer une orientation dans la construction du produit, étant donné que le brief ne présentait pas beaucoup de détails.
Afin de mieux définir les besoins d'Amanda, notre persona, nous avons détaillé les motivations, les douleurs et les frustrations, les objectifs, les besoins et les attentes, les intérêts et les influences, tout en procédant à une task analysis and experience map.
Il était essentiel d'avoir un persona au cours de ce projet pour créer une orientation dans la construction du produit, étant donné que le brief ne présentait pas beaucoup de détails.
Afin de mieux définir les besoins d'Amanda, notre persona, nous avons détaillé les motivations, les douleurs et les frustrations, les objectifs, les besoins et les attentes, les intérêts et les influences, tout en procédant à une task analysis and experience map.
Âge - 28
Lieu - London
A commencé à étudier en Histoire mais a changé pour le travail social après la pandémie
Aime voyager
A beaucoup d'amis en ligne
Amanda a grandi dans une famille ordinaire. À l'âge de 16 ans, elle a commencé à travailler comme bénévole dans un bazar de charité, près de chez elle. À ce moment-là, elle a dû choisir une carrière et son premier choix s'est porté sur l'histoire. Après être allée à l'université et avoir acquis plus de connaissances sur ce qui s'est passé au fil des ans, elle a senti qu'elle devait faire plus. Pendant la pandémie, elle a décidé d'entreprendre une deuxième formation, cette fois en travail social, et travaille depuis dans ce domaine.
Attentes :
S'attend à connaître davantage de personnes ayant une certaine expérience dans le domaine.
Se sentir mieux préparé et relever de nouveaux défis.
Améliorer ses connaissances.
Motivations :
Aider les gens grâce à ses connaissances.
Donner des outils aux gens pour qu'ils aient plus de pouvoir.
Se sentir une professionnelle plus complète.
Les douleurs et les frustrations :
Le manque d'organisation de certains des cours qu'elle a déjà suivis.
Le rôle important de l'argent dans ce travail.
Des formations superficielles.
Objectifs :
Essayer de changer le monde même si elle ne peut pas faire grand-chose par elle-même
Faire la différence avec les gens qu'elle croise dans sa vie.
La déclaration
La déclaration
Amanda est une future assistante sociale qui souhaite améliorer ses compétences en suivant un cours supplémentaire, et elle veut être sûre d'avoir choisi le bon cours pour elle.
Amanda est une future assistante sociale qui souhaite améliorer ses compétences en suivant un cours supplémentaire, et elle veut être sûre d'avoir choisi le bon cours pour elle.
solutions
solutions
Par le intermédiaire d'une landing page :
Fournissez de nombreuses informations sur le cours, la méthodologie, les enseignants, l'emploi du temps.
Inclure des témoignages d'anciens étudiants.
Fournissez de courts extraits de certaines leçons pour créer une certaine familiarité.
Par le intermédiaire d'une landing page :
Fournissez de nombreuses informations sur le cours, la méthodologie, les enseignants, l'emploi du temps.
Inclure des témoignages d'anciens étudiants.
Fournissez de courts extraits de certaines leçons pour créer une certaine familiarité.
commencer
à construire
commencer
à construire
Une fois la solution définie, la première étape a consisté à comprendre la structure de la page, les éléments à inclure et l'ordre de ces informations.
La structure étant définie, une wireframe basse résolution a été créée pour servir de base à la wireframe moyenne résolution.
Une fois la solution définie, la première étape a consisté à comprendre la structure de la page, les éléments à inclure et l'ordre de ces informations.
La structure étant définie, une wireframe basse résolution a été créée pour servir de base à la wireframe moyenne résolution.
points forts
points forts
Preuve sociale avec le nombre d'étudiants et des témoignages en haut de la page pour susciter la confiance.
Tags pour organiser les cours, suivre les offres croissantes et faciliter les recherches ciblées.
Aperçu pour offrir une certaine familiarité et collecter des courriels.
Un espace pour les suggestions et les avis qualifiés, ainsi qu'un autre espace pour recueillir les courriels.
Offrir le contenu du cours pour donner encore plus confiance.
Preuve sociale avec le nombre d'étudiants et des témoignages en haut de la page pour susciter la confiance.
Tags pour organiser les cours, suivre les offres croissantes et faciliter les recherches ciblées.
Aperçu pour offrir une certaine familiarité et collecter des courriels.
Un espace pour les suggestions et les avis qualifiés, ainsi qu'un autre espace pour recueillir les courriels.
Offrir le contenu du cours pour donner encore plus confiance.
User’s feedback
User’s feedback
Un usability test informel a été réalisé entre le wireframe à résolution moyenne et la conception finale afin de vérifier si les tâches seraient accomplies avec succès. Toutes les tâches ont été accomplies sans problème majeur et nous avons pu passer à la conception finale.
Un usability test informel a été réalisé entre le wireframe à résolution moyenne et la conception finale afin de vérifier si les tâches seraient accomplies avec succès. Toutes les tâches ont été accomplies sans problème majeur et nous avons pu passer à la conception finale.
le design
le design
Le design était basé sur la nouvelle identité de marque fournie par la partie prenante. En plus, l'importance de véhiculer une image jeune et détendue a été soulignée, en apportant beaucoup de couleur et d'irrévérence à la page.
*Après avoir finalisé le design, nous sommes retournés voir les utilisateurs qui avaient participé à l'enquête pour valider certaines décisions et ils ont été unanimes dans leur acceptation du produit, renforçant l'importance de la collecte d'emails, la preuve sociale en haut de la page et l'espace pour les suggestions.
Pour accéder au prototype navigable, il suffit d'aller sur le lien Figma.
Le design était basé sur la nouvelle identité de marque fournie par la partie prenante. En plus, l'importance de véhiculer une image jeune et détendue a été soulignée, en apportant beaucoup de couleur et d'irrévérence à la page.
*Après avoir finalisé le design, nous sommes retournés voir les utilisateurs qui avaient participé à l'enquête pour valider certaines décisions et ils ont été unanimes dans leur acceptation du produit, renforçant l'importance de la collecte d'emails, la preuve sociale en haut de la page et l'espace pour les suggestions.
Pour accéder au prototype navigable, il suffit d'aller sur le lien Figma.
aperçu complet
aperçu complet
full preview
étapes
suivantes
étapes
suivantes
Pour la partie prenante, il est possible de faire évoluer la landing page grâce à la structure de la page. De plus, grâce aux tags, les cours peuvent toujours être organisés et faciliter la recherche et le choix des futurs étudiants.
En ce qui concerne la suite du produit, il serait idéal de réaliser un usability test approprié et d'appliquer les ajustements potentiellement signalés par les utilisateurs.
Pour la partie prenante, il est possible de faire évoluer la landing page grâce à la structure de la page. De plus, grâce aux tags, les cours peuvent toujours être organisés et faciliter la recherche et le choix des futurs étudiants.
En ce qui concerne la suite du produit, il serait idéal de réaliser un usability test approprié et d'appliquer les ajustements potentiellement signalés par les utilisateurs.
à retenir
à retenir
Ce qui a commencé comme un cours pour " apprendre un peu d'UX pour être un meilleur UI " est devenu le début de ma carrière en tant que Product Designer :)
L'un des meilleurs exercices que j'ai pu faire pendant les cours a été de penser rapidement et d'organiser ensuite les idées, en tirant parti de toutes les découvertes. Il était également essentiel de ne pas s'attacher aux idées et aux solutions !
Enfin, l'apprentissage va bien au-delà du processus déterminé par les instructeurs et est constant.
Ce qui a commencé comme un cours pour " apprendre un peu d'UX pour être un meilleur UI " est devenu le début de ma carrière en tant que Product Designer :)
L'un des meilleurs exercices que j'ai pu faire pendant les cours a été de penser rapidement et d'organiser ensuite les idées, en tirant parti de toutes les découvertes. Il était également essentiel de ne pas s'attacher aux idées et aux solutions !
Enfin, l'apprentissage va bien au-delà du processus déterminé par les instructeurs et est constant.
Ne sois pas un étranger
vous pouvez me contacter :)
build with 🤍 in Nantes, France
Ne sois pas un étranger
vous pouvez me contacter :)
build with 🤍 in Nantes, France