Alexandre Combe

Product Designer

Refonte du site
Opquast

Compétition scolaire 👨‍🎓

Présentation.

Pour la fin de notre première année scolaire passée à l'ECV Digital, une compétition entre M1 est organisée sur une durée de 2 semaines. Chaque équipe possède :

- 1 Webdesigner

- 1 UX Designer

- 1 Développeur

- 1 Webmarketeur

Nous avons donc 2 semaines, pour s'organiser, planifier une stratégie et rendre notre projet sous forme d'un dossier et d'un oral.

Brief

Opquast (Open Quality Standards) est une société qui s’est fixée pour objectif d’améliorer la qualité et l’accessibilité des services digitaux et particulièrement sur le Web. Elle porte notamment une certification de compétences qui s'adresse aux professionnels du web, quels que soient leurs métiers.

La société a plusieurs activités :
- Formation
- Certification de compétences
- Outils de pilotage des sites
- Livre
- Développement de référentiels

Positionnement
Opquast s'intéresse tout autant aux questions d’accessibilité, de performance, de sécurité et d'ergonomie des sites et services notamment sous l'angle de la prévention des risques fondamentaux en matière d'UX. Le positionnement est donc transversal et généraliste.
Il y a environ 70 écoles partenaires, 28 agences et 6 entreprises qualifiées pour un total d’environ 3400 certifiés en mai 2018. Tous les partenaires.
La certification
La réalisation d’un service Web est un travail d’équipe pour lequel les professionnels de différents métiers, aussi bien prestataires qu’annonceurs (ux designers, graphistes, développeurs, webmarketeurs, référenceurs, rédacteurs web...) doivent interagir, sans pour autant avoir la même culture, le même socle de compétences ni le même vocabulaire professionnel.
Opquast a mis en place une formation certifiante intitulée « Maîtrise de la qualité en projet Web ». Cette formation s’adresse à tous les professionnels du Web, qu’ils travaillent chez les prestataires ou chez les annonceurs. Elle est reconnue officiellement (Inventaire national des certifications professionnelle).

Les sites Web
Opquast a développé un nombre important d'activités et progressivement, la société a édité plusieurs sites Web avec des sous-domaines :
- www.opquast.com
- partners.opquast.com
- checklists.opquast.com
Il y a en a d'autres, mais moins stratégiques.

Perspectives
Dans l'avenir, Opquast proposera d'autres certifications, toute sa crédibilité va se résumer à ses référentiels de bonnes pratiques, ses formations et certifications et son écosystème.

Problématique
Depuis plusieurs mois nous nous efforçons de rassembler les sites Web sous un seul site à l'adresse www.opquast.com. Il y a donc une première problématique d'architecture de l'information.
Dans le même temps, même si le logo et la charte graphique ont été établis par un designer de niveau international (Francis Chouquet), les sites manquent sous doute d'attrait au regard de la richesse visuelle de ce qui se fait aujourd'hui. Dans le même temps, Opquast propose des contenus liés à la qualité, à la confiance et à la certification. Il faut donc conserver une image institutionnelle, de type tiers de confiance. Il y a donc une deuxième question liée au choix des contenus et à la présentation visuelle de ces contenus sur le site Web.

Attendus et livrables
- Préconisations en matière d'architecture de l'information
- Préconisation en termes de marketing de la certification et de la société
- Préconisations ergonomiques pour le site Web Opquast.com
- Préconisations graphiques
- Prototype accompagné de spécifications techniques

Audit UX

Nous avons réaliser en début de projet un audit complet du site Opquast. Cela nous a permis de faire une analyse de l’état actuel pour pouvoir mieux réfléchir à une nouvelle stratégie en matière de ergonomie et architecture du site.

Dans l’ensemble le site est plutôt intuitif mais manque cruellement de simplifications et d’améliorations ergonomiques. Notamment au niveau de la hiérarchie des contenus et des différents parcours qu’un utilisateur peut prendre. Le responsive a aussi quelques soucis, l’accessibilité n’est pas optimale et les éléments graphiques méritent d’être améliorer pour donner envie à l’utilisateur de rester sur le site afin de la parcourir encore plus.

Audit du formulaire d'inscription à la certification Opquast

Pour se rendre jusqu’au formulaire, il faut se rendre sur la page certification et cliquez sur le bouton intitulé “Inscrivez-vous”, ce qui nous ouvre un autre onglet qui nous redirige vers un autre domaine : shop.opquast.com

Et sur cette page la certification Opquast nous est présenté comme un produit physique qu’on pourrait trouver sur n’importe quel site e-commerce ce qui peut provoqué de la confusion chez l’utilisateur. “Est-ce un programme que je vais recevoir chez moi ? est-ce physique ?”.

Heureusement, il est indiqué dans la description de “l’objet” qu’après l’achat effectué il sera possible de s’entraîner sur la plateforme en ligne mais ce n’est pas forcément très explicite et le fait de sortir du site pour aller sur un autre onglet et un autre url peut provoquer un abandon de l'utilisateur.

Après avoir appuyé sur le bouton “ajouter au panier” nous arrivons sur la formulaire avec une timeline bien distincte pour montrer les étapes du processus à l’utilisateur. Ensuite, une inscription ou une connexion est nécessaire pour poursuivre l’opération avec le choix de faire une commande spontanée ce qui est un bon point mais étant donné que la formation est en ligne, de quelle manière l’utilisateur va-t-il pouvoir accéder à son espace d’entraînement ?

Dans notre cas, nous allons choisir l’inscription en rentrant notre adresse. Taquins que nous sommes, il y a un problème de conformité d’adresse mail.. Si nous ne mettons pas de @ suivi de exemple.com cela nous affiche une erreur mais si nous mettons une adresse qui ne peut pas exister comme sur l’image ci dessous, l’inscription est possible, ce qui n’est pas optimal pour l’utilisateur dans le cas où il se trompe.

Ensuite sur nous sommes rediriger vers l’inscription. Il existe des champs requis d’après le marquage mais impossible de savoir lesquels.

Dans le cas d’erreurs, un message s’affiche au dessus du formulaire, ce qui n’est pas adapté pour les utilisateurs. La solution serait d’indiquer les erreurs directement sur les champs concernés.

Ensuite, après avoir appuyer sur le bouton “s’inscrire” nous sommes redirigés vers la page “Vos adresses”. La timeline n’est plus présente, une adresse est demandée alors que la certification est en ligne et donc ne nécessite pas de livraison et donc l’utilisateur est sorti du parcours d’achat sans savoir pourquoi.

De plus la saisie d’adresse n’est pas optimisée puisqu’il est possible de mettre une fausse adresse.

La solution serait d’automatiser la saisie pour guider l’utilisateur. Exemple, si on met 33000 dans le code postal, dans le champs ville, seul les villes correspondantes à la gironde sont possibles d’entrer.

Autre problème, il est obligatoire de rentrer un numéro de téléphone, ce qui peut frustrer voir faire fuire l’utilisateur. La solution serait de l’enlever ou d’expliquer la raison pour laquelle il le faut.

Une fois l’adresse entrée et le numéro rentrés, nous sommes revenons dans le parcours d’achat dans l’étape “adresse” puis nous passons à l’étape suivante : Livraison.

Cette étape ne sert malheureusement à rien pour l’utilisateur. De plus, nous avons fait perdre du temps à l’user dans l’onglet précédent pour au final lui dire qu’il n’y pas de livraison.. beaucoup de frustration potentielle pour l’utilisateur.

Pour résumé, le formulaire pourrait être plus rapide pour aller plus à l’essentiel et prendre mieux en compte l’utilisateur en lui-même en fonction de sa volonté de départ pour l’amener de manière intuitive vers son objectif : obtenir la certification.

Architecture du site Opquast

Le site principal est actuellement composé de 7 rubriques (dont l’accueil) plus une boutique présente dans le haut du header. À travers celles-ci, il est possible de se renseigner sur les certifications, les formations, les services, consulter le blog, des offres d’emploi, de contacter Opquast et d’accéder à la boutique.

Seulement, comme mentionné dans le brief, il existe d’autres sites dont le site dédié au partenariat et celui dédié aux checklists. Notre challenge en terme d’expérience utilisateur est donc de rassembler ces 3 sites en 1 tout en proposant un site le plus optimisé possible.

Dans un premier temps, nous avons fait l’état actuel du site en notant sur des post-it (ux oblige) toutes les parties et sous-partie du site. Ensuite à l’aide de l’équipe marketing, nous avons identifiés que 3 éléments étaient logique de mettre en avant :

- La certification

- Le partenariat

- Les checklists

De ce fait, nous avons voulu réunir un maximum de sous-parties ensemble afin d’épurer le site et de proposer un parcours le plus court et plus intuitif possible pour les utilisateurs.

Grâce à ce regroupement, nous avons pu déduire les différents éléments du menu du nouveau site :
- Accueil : comportant une brève description de la certification, le partenariat, des checklists et le dernière article du blog mis en lign
- Certification : comportant les informations autour de la certification, son déroulement, les formations disponibles et les tarif
- Devenir partenaire : comportant les renseignements sur le partenariat
- Nos outils : comportant les outils de reporting, l’accès aux checklists
- Qui sommes-nous ? : comportant une présentation, l’équipe et “on parle nous”
- Communauté : comportant le blog, les jobs et le forum
- Mon espace : élément clé de notre projet comportant beaucoup de choses qui vous seront expliqués un peu plus loin

Tous ces onglets correspondent à un potentiel but final de l’utilisateur qui est de :
- Passer la certification
- Devenir partenaire
- Faire un audit de son site ou consulter les checklists
- Contacter Opquast

Le but est donc d’amener un utilisateur dans un parcours bien précis afin de lui permettre d’atteindre son objectif le plus rapidement possible. Voici un début d’arborescence pour mieux visualiser notre futur site.

Comme vous pouvez le voir chaque action terminées finit par emmener l’utilisateur dans “mon espace”. Effectivement, nous avons décidés de donner plus d’importance à cette section pour donner à l’utilisateur un endroit où tout sera centralisé afin de fluidifier son parcours et le faire revenir sur le site.
Depuis cet espace, l’utilisateur aura accès à plusieurs sections :

- Le camp d’entraînement : dans celui-ci le user pourra s’entraîner à passer sa certification, voir ses anciens résultats, sa progression, aux corrections, au téléchargement du livre : Qualité web, au glossaire et bien-entendu pourra accéder au test officiel
- Audit : cette section sera disponible lorsque l’utilisateur aura acheter un outil de reporti. Elle permettra de pouvoir faire des audits de site et tous les résultats seront stockés aussi
- Offres d’emploi : cette section permettra de publier des offres d’emploi en tant que partenaire d’opquast et un accès vers les offres
- Mes favoris : ici seront stockés toutes les offres, checklists ou articles du blog que l’utilisateur aura rajouté à l’aide d’un bouton “mettre dans mes favoris”
- Mes demandes : ici seront stockés toutes les demandes concernant les devis ou les demandes de partenariats

Et puis pour finir, le footer. Dans celui-ci, nous avons pris la décision de mettre :
- l’abonnement à la newsletter
- les mentions légales
- plan du site
- la possibilité de nous contacter
- politique de confidentialité
- les conditions d’utilisations
- la FAQ
- les réseaux sociaux
- et les raccourcis vers accueil, certification, devenir partenaire, nos outils, qui somes-nous ?, communauté et mon espace

Et non, je sais ce que vous vous dites mais nous n’avons pas oublié la partie “Boutique” du site. C’est un parti pris de notre part. En effet, nous en avons conclu qu’il n’était pas nécessaire de laisser cette partie car le nombre de produits est trop différents.

De plus, la certification n’est pas vraiment un produit, il reste alors juste les 2 outils de reporting et les 3 livres. Donc nous avons même décidés d’enlever la notion de “panier” sur le site. Cependant il sera quand même possible d’effectuer tous ces achats mais seulement un par un car ces produits s’adressent à plusieurs types d’utilisateurs différents.

Ce sera l’élaboration des parcours utilisateurs qui déterminera la finalité de l’action.

Exemples :
“je consulte les checklists mais je veux les avoir physiquement près de moi à n’importe quel moment”
-> sur la page checklists il sera possible d’acheter les livres

“je suis un projet professionnel, je souhaite savoir si mon site est dans les normes”
-> dans l’onglets “nos outils” il sera possible alors d’acheter l’outil en question et de choisir la version pro ou expert

“je veux passer la certification” -> dans l’onglet certification, il aura la possibilité d’accéder au formulaire d’inscription puis ensuite de payer

Cela permet de rendre tous ces procédés plus claires et d’éviter la confusion qu’il pourrait y avoir qu’on met un article dans un panier : est-ce un article physique ?

Wireframing et parcours utilisateurs

Une fois l’architecture du site élaboré, nous pouvons passés à l’étape des wireframes.

La volonté première à travers ces premières maquettes est de guider l’utilisateur le plus possible vers son objectif.

Parcours utilisateurs.

Comme mentionné dans le chapitre précédent, nous avons décidés de partir sur 4 parcours utilisateurs. Pour cela nous avons imaginés 3 scénarios différentes :

“Je suis étudiant et je veux passer la certification opquast pour m’affirmer dans le monde du travail”
“Je suis une agence qui réalisent des sites web pour des marques et je souhaite devenir partenaire avec opquast pour améliorer ma visibilité et ma crédibilité”
“Je suis un designer en freelance et je souhaite connaître les bonnes manières étapes par étapes pour concevoir un site”
“Je suis développeur dans une agence qui conçoit des sites web et je voudrais avoir des outils me permettant de savoir si nos sites conçues sont bien réalisés”

Menu burger :

Nous avons fait le choix de mettre un menu burger afin de aérer l’interface et permettre d’alléger le côté graphique du site en évitant d’exposer toutes les entrées possibles. De plus, nous avons choisit de mettre un menu s’ouvrant sur la totalité de l’écran ce qui permet de rajouter des raccourcis vers des onglets importants comme les bonnes pratiques, le blog et les offres d’emploi. Le menu burger nous permet aussi d’éviter d’avoir tout un tas de sous menu lorsqu’on passe la souris en survol sur un onglet. L’utilisateur qui vient sur le site opquast est un habitué du web avec un minimum d’expérience donc le menu burger ne sera pas inconnu pour lui.

Comme dit précédemment, le menu permet d’aller directement vers 6 onglets principaux (dont la page d’accueil) et vers 3 sous-onglets (présents dans les onglets) pour créer des raccourcis vers des éléments importants pour l’utilisateur.

L’onglet “Mon espace” a été mis en avant volontairement car il est la nouveauté et l’élément principal de notre projet.

Premier parcours : S’inscrire à la certification

L’utilisateur part du menu et clique sur l’onglet certification. Il atterrit sur la page possédant des raccourcis de scroll vers des sections bien précises qui sont : Présentation, le déroulement, formations et les tarifs.

Le user va pouvoir parcourir cette page en scrollant pour pouvoir s’informer un peu plus tout ayant la possibilité de s’inscrire sur n’importe quelle partie grâce à un bouton permanent qui permet d’aller à l’essentiel sans devoir remonter ou descendre toute la page. De plus, un bouton “scroll vers le haut” permet de remonter automatiquement toute la page.

L’utilisateur clique sur “commencer l’entraînement” qui sera finalement appelé “s’inscrire” sur les maquettes finales. Le user est alors renvoyé vers la page tarifs qui lui permet de choisir le forfait adapté.

En fonction de quel forfait il a choisi, la case indépendant ou école/entreprise sera pré-rempli mais on lui laisse la possibilité de changer. Le fait de cocher une case ou l’autre changera le formulaire du dessous pour éviter les champs inutiles.

Une timeline sera présente sur tout le long du processus d’inscription pour que le user sache où il se trouve et quel temps à peu près il va pouvoir atteindre son objectif.

Sur le côté gauche, un explicatif a été mis en place pour guider le user et lui expliquer pourquoi il doit s’inscrire avec un aussi la possibilité de se connecter dans le cas où il possède déjà un compte Opquast.

Pour les champs, le but est de minimiser le temps passer sur le formulaire pour aller vers le but voulu : l’achat de la certification. Pour rendre, l’expérience optimale, il est important aussi de ne pas frustrer l’utilisateur en lui mettant des champs obligatoires, on doit lui faire penser qu’il a le choix pour créer moins de frustration, c’est pour cela que nous avons choisi de mettre plutôt un libellé “optionnel” à côté des champs qui ne sont pas obligatoires plutôt que de mettre un astérix à côté des champs qui sont obligatoires.

Le but est donc de demander que les informations dont on a besoin, le nom et prénom pour l’identification des personnes pour la remise de certification, l’adresse mail pour l’associer à un compte et pouvoir récupérer son mot de passe et en option la profession pour les données analytiques.

Une fois le bouton “créer un compte” cliqué, le user a un feedback soit de réussite soit d’échec dans le cas où un champs a été mal rempli. Dans ce cas, le champs en question est indiqué à l’utilisateur avec une phrase explicative pour guider le user.

Clique sur le bouton “passer à l’étape suivante.

Place maintenant à la partie du règlement bancaire. Un texte explicatif est toujours présent sur la gauche du formulaire, pour éviter que le user se pose une question qui aboutisse à une sortie du site. Un récapitulatif du prix est aussi présent puis dans le formulaire la personne choisit sa carte bancaire correspondante, rentre ses données et clique sur “payer”.

Un feedback succès apparaît alors et on lui propose d’accéder à son espace, ce qui permet de lui montrer directement ce que son achat va lui permettre de faire.

Deuxième parcours : Devenir partenaire d’Opquast

Même procédé que pour la certification. Le user va pouvoir accéder à la page “Devenir partenaire” soit depuis le menu burger soit par la page d’accueil.

Pour la partie formulaire, le but est là aussi d’aller à l’essentiel en proposant que des champs que nous avons vraiment besoin avec un champs qui permet d’écrire en quelque mots la demande.

Ensuite le user sera renvoyé s’il le veut vers l’onglet “Mon espace” où il pourra consulter ses demandes en attentes. Il sera aussi bien entendu possible de recevoir un mail.

Troisième parcours : Consulter la checklists
La checklists est accessible via la page d’accueil, l’onglet “Nos outils” et le raccourcis “les bonnes pratiques” présent dans le menu.

La présentation de ces checklists ont été changés par nos soins. Effectivement, nous avons essayés de rendre plus accessible les rubriques des différentes checklists.

L’avantage de ce genre de vue est que le user restera tout le temps sur la même page, seul le contenu changera en fonction de ses actions. Il pourra changer de checklists et de rubriques beaucoup plus rapidement car ils sont tous disponibles et cliquables sur la page.

Le user aura aussi la possibilité de passer de critère en critère ou de simplement en charger un de plus.

Nous avons mis en place aussi un bouton qui permet d’acheter le livre : Qualité du web, ce qui le met en avant sans pour autant mettre une bannière pub qui est plus intrusive.

Quatrième parcours : Acheter un livre ou un outil de reporting

Les outils et les lives sont disponibles depuis l’onglet “Nos outils”. Une fois sur cette page, toutes les informations concernant ces outils sont présentes et des boutons permettent à l’utilisateur de réaliser un achat.

De plus il y a la possibilité de directement choisir quel outil ou livre l’utilisateur a besoin. Ensuite sur le formulaire, il a la possibilité de changer d’avis pour les outils et de choisir par exemple tous les livres pour le formulaire d’achat de livres.

On lui demandera de créer un compte si l’utilisateur choisit d’acheter un outil ou le livre en version numérique, puisqu’il pourra les retrouver ensuite dans “Mon espace”.

Dans le cas où l’utilisateur veut un livre en version papier, on lui demandera de rentrer son nom, prénom et adresse de livraison ou un lien vers Amazone.

Mon espace

Comme on a pu le voir, la page “Mon espace” est l’îlot centrale du site puisque tout est relié à lui. Chaque finalité de parcours nous amène vers lui.

Comme mentionné dans la partie précédente, ce lieu sera l’espace de travail de l’utilisateur, il va passer du temps dessus donc il est important de lui proposer une interface ergonomique et agréable visuellement. Il aura accès à ses outils, ses demandes, ses favoris et son camp d’entraînement pour passer la certification.

La synthèse de tous ses entraînements passés lui seront présentés de manière intuitives avec l’ajout d’un aspect “gaming” puisqu’il aura la possibilité de consulter un classement pour voir où il se situe par rapport à un test bien précis. On peut alors aussi imaginer dans le cas où une école décide de faire passer la certification à ses élèves une sorte de compétition interne qui augmentera la motivation des participants.

Des cours en ligne seront aussi disponibles pour la personne, le livre numérique sera téléchargeable ainsi que le glossaire pour mettre l’utilisateur dans les meilleures conditions possibles et le motiver à revenir le plus souvent possible pour améliorer son niveau.

Dans le cas où l’utilisateur se rend sur l’onglet “mon espace” et n’a pas de compte ou n’est pas connecté, un bouton “créer compte” et “se connecter” lui sera alors proposé.

Footer

Dans celui-ci, nous avons essayé d’épurer au maximum le contenus présents pour permettre à l’utilisateur de se rendre plus facilement aux onglets voulus et de mieux comprendre la structure du site. La possibilité de rejoindre les réseaux sociaux ou de s’abonner à la newsletter est possible grâce à la partie de droite.

Webdesign et UI Design

Tous les choix graphiques et la réalisation des illustrations ont été assuré par ma collègue Webdesigneuse. Je me suis donc occupé de quasiment toute la partie UI.

Ne pouvant pas vous partager le prototype fonctionnel sur cette page, je vous invite à copier/coller ce lien dnas votre bar URL : https://invis.io/DXQLVF0FVSP