Logo UbuyBooks

Préambule

Le but de ce projet scolaire était de faire des audits de différents sites internet de vente de livres afin d'y analyser les défauts et qualités, d'en prendre connaissance et de créer une application mobile fictive de vente de livres sans faire les même erreurs recensé dans les audits.


Aperçu

  • Travail scolaire individuel mais itération à 3 sur des potentiels personas.
  • Mon rôle : Audits, Personas, User Journey Map, userflow, Wireframes, Design UI, Prototypage, itération.

Mes tâches principales :

Idéation et Brainstorming.

Sur la base de mes observations sur les différents sites internet de ventes de livres, générer une liste d'idées pour améliorer l'expérience. Prioriser ces idées en fonction de leur impact potentiel et de la facilité de mise en œuvre.

Création de Wireframes :

Sélectionner une idée prioritaire à développer.

Créer un wireframe simple pour une ou plusieurs pages du site qui intègrent mes solutions. Je me suis concentré sur la mise en page et la navigation, plutôt que sur le design graphique.

Prototypage :

Si vous disposez des compétences et des outils nécessaires, transformez votre wireframe en un prototype interactif de basse fidélité.

Assurez-vous que le prototype reflète les étapes que l'utilisateur suivrait pour accomplir la tâche que vous avez identifiée.

Description du projet

UbuyBooks est un projet scolaire ambitieux. Le but étant d'améliorer l'expérience utilisateur d'un site web de e-commerce spécialisé dans la vente de livres.

Quelques réflexions lorsque j'ai fait le devoir.

En terme d'UX, est il pertinent d'aller observer comment fonctionne une vrai bibliothèque irl et observer les clients (comprendre leurs points de douleurs, leurs satisfaction, ...), puis reprendre les bonnes idées pour essayer de les appliquer sur un site e-commerce de revente de livre (carte de fidélité, organisation et classement, ...).

Audit de Marie sur le site internet www.librel.be

Objectif : trouver un livre sur un sujet précis.

Points de friction :

  • Il existe une page “prix unique du livre” avec un symbole € et cela porte à confusion car on pourrai croire qu'on y trouve des livres à petits prix par exemple, mais non, c'est juste une page pour indiquer qu'il y a un lien qui renvoie sur une réglementation, je cite : “les textes du décret relatif à la protection culturelle du livre”. Dans mon cas, cela est absolument pas intéressent.
  • Il n'y a pas de page ou une catégorie de livres en promotion ou des livres d'occasion, ce n'est que des livres neuf.
  • Quand un livre est intéressant, il faut le rajoute dans le panier mais le site web demande de trouver et de sélectionner la librairie ou il faut récupérer le livre. On impose donc un déplacement physique dans une libraire et il faut s'adapter aux horaires de la librairie.
  • Les livres épuisés ou indisponibles ne devrait pas apparaitre dans la recherche, car c'est frustrant de voir un livre qu'on recherche qui est indiqué comme indisponible sans possibilité d'être alerté si ils reviennent dans le stock.

Point positif :

  • Pas de difficulté pour trouver la catégorie “livres scolaires” et les sous-catégories sont simples et claires, on accède facilement au sujet voulu (en tout cas sur la version Desktop, mais pas sur la version mobile).
  • Le fait de filtrer par prix est plutôt bien mis en avant (en tout cas sur la version Desktop, mais pas sur la version mobile).
  • La barre de recherche est mise en avant et les recherches sont satisfaisantes.
  • Les livres peuvent être présentés sous forme de liste ou de grilles.
  • Le système de recherche/catégorie/tri est plutôt performant, il faudrai juste rajouter quelques filtres en plus comme ; années, noms d'auteurs, ...
  • Il y a un synopsis pour chaque livre.

Audit de Jean sur le site internet www.librel.be

Objectif : acheter des livres rapidement.

Points de friction :

  • Lors de l'inscription sur le site, on demande pas mal d'informations comme le titre de civilité, le nom, prénom, numéro de tél, code postale, etc. Cela fait perde pas mal de temps précieux, d'autant plus qu'il n'y a pas de système de livraison mais uniquement un retrait en librairie.
  • En version desktop il n'y a pas de bouton “ajouter au panier” (1 clic) mais un bouton choisir une librairie, puis cliquer et écrire sa ville et enfin ajouter au panier (3 clics + écrire au clavier). En version mobile parfois il y a un bouton “Ajouter au panier” mais lorsqu'on appuie dessus cela ne rajoute pas le livre dans le panier mais on arrive sur la page produit du livre où tout en bas il y a un bouton “Ajouter au panier” qui rajoute réellement le livre dans le panier.
  • Pas de possibilité de payer en ligne mais uniquement en magasin.
  • Les livres épuisés ou indisponibles ne devrait pas apparaitre dans la recherche, car c'est frustrant de voir un livre qu'on recherche qui est indiqué comme indisponible sans possibilité d'être alerté si ils reviennent dans le stock.

Point positif :

  • Pas de difficulté à trouver la catégorie “livres scolaire” et les sous-catégories sont simples et claires, on accède facilement au sujet voulu.
  • La barre de recherche est mise en avant et les recherches sont satisfaisante.
  • Les livres peuvent être présentés sous forme de liste ou de grilles.
  • Le système de recherche, catégorie, tri est performant, il faudrai juste rajouter quelques filtres en plus comme ; année, nom d'auteurs, ...
Capture d'écran du site internet librel
Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel Capture d'écran du site internet librel


Proto-personas



Proto-persona


Personas



Persona 1 Persona 2


User Needs Investigation Canvas



User Needs Investigation Canvas


Audit d'un site web concurrent bibliopolis.be

Points positif :

  • Inscription rapide (il faut juste écrire son adresse mail puis on reçois un mail de confirmation nous invitant à définir notre mot de passe définitif).
  • Livres en promo et prix assez intéressants.
  • Possibilité de revendre ses livres.
  • Lorsque qu'on est sur la page produit d'un livre il y a un CTA “Ajouter au panier” et juste en dessous c'est indiqué “livraison rapide, achat sécurisé, remises exceptionnelles, assistance téléphonique” cela est plutôt rassurant.
  • Lorsque qu'on est dans une catégorie avec tous les livres, sur chaque “cards” il y a un bouton caddie.
  • Possibilité de donner une note ET un avis.
  • En haut à droite il est indiqué le nombre de produits qu'il y a dans le panier et la sommes total du panier.
  • Suivis de commande et foire aux questions plutôt bien indiqué en haut à gauche du site web.
  • Sur la page d'accueil il y a des sections “dernier arrivage”, “meilleurs ventes”, ...

Points à améliorer :

  • Rajouter une catégorie “scolaire”.
  • Rajouter une catégorie livres d'occasion.
  • Supprimer le mot “déstockage” qui apparait sur chaque “cards” des livres.
  • La page bon plans et catalogue sont identiques (déstockage indiqué partout), il faudrai mieux différencier les 2 pages.
  • Uniquement un filtre de prix mais rien sur les filtres comme années, auteurs, titre du livre, langues, ...
  • Pour chaque livres avoir des détails du livre (nombre de pages, poids, avoir un extrait du contenu du livre,...).
  • Pas de système de carte de fidélité ou abonnement.
Capture d'écran du site internet bibliopolis


Audit d'un site web concurrent livrensemble.be

Points positif :

  • Inscription rapide (email et mot de passe).
  • Possibilité de faire don des ses livres.
  • Catégorie livres scolaires.
  • Site web plus minimaliste que les 2 autres sites web et mieux structuré (menu à gauche) et plus “clair”.
  • Détails du livre (nombre de pages, poids, extrait du contenu du livre,...).
  • Quand on rajoute un livre dans le panier, il y a un compte a rebours qui s'affiche “Veuillez commander dans les 30 minutes pour garantir que votre article n'expire pas.”
  • Lorsque qu'on est dans une catégorie avec tous les livres sur chaque “cards” il y a un bouton caddie.
  • Plusieurs options pour récupérer son livre (livraison à domicile par bpost, retrait en point-relai ou retrait en magasin).
  • Il y a une catégorie livres en promotions (mais aucuns filtres).
  • Possibilité de faire une carte cadeau.

Points à améliorer :

  • Aucuns filtres, juste de la pertinence (tri par ordre croissant, décroissant), rajouter des filtres pour le prix, titre du livre, maison d'édition, ...
  • En haut à droite il est indiqué uniquement le nombre de produits qu'il y a dans le panier, il faudrait y rajouter aussi la somme total ?
  • Il faudrai donner la possibilité aux utilisateurs de pouvoir donner une note ET un avis sur les livres.
Capture d'écran du site internet bibliopolis


Itération en groupe

Nous étions 3 personnes à itérer sur des potentiels personas. Au départ nous avions 7 personnas et après itération c'est finalement 2 personas qui se sont démarqués. Un presona “acheteur indifférent et altruiste sans prédisposition à l'utilisation de le technologie” et un autre “bibliophile passionné numériquement averti”. Voici comment nous avons réussi à créer ces deux personas.



Mes deux personas avant itération Itération des personas Itération des personas Itération des personas Itération des personas Itération des personas


Personas définitifs après itération



Persona 1 Persona 2


Journey map du persona principal (Jean)



Journey map Journey map Journey map


User-flow



User-Flow


Quelques exemples de wireframes



Capture d'écran du wireframe Capture d'écran du wireframe Capture d'écran du wireframe Capture d'écran du wireframe Capture d'écran du wireframe Capture d'écran du wireframe

Quelques exemples du prototype



Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype Capture d'écran du prototype