Interface de liseuse

mobile, UI, UX

Refonte du logiciel de lecture et d’achat d’ebooks sur liseuses.

Voir l'étude de cas

Projet d’envergure qui a duré 3 ans et consistant à revoir entièrement le logiciel de lecture et d’achat d’ebooks présents dans les liseuses Bookeen. En binôme avec un chef de projet, j’ai pu apporter mon expertise en design d’expérience utilisateur et réaliser l’interface du logiciel qui devait composer avec les limitations technologiques de l’écran e-ink.

Entretiens et focus groups
La première étape a été de recueillir les désideratas des clients de la liseuse au travers des réseaux sociaux, questionnaires, rencontres au salon du livre, etc… Toutes les idées ont été notées sur des post-it et classées pour former des thématiques.

Arborescence
J’ai pu travailler sur l’arborescence et le parcours d’achat pour rendre l’expérience de navigation et d’achat la plus fluide possible.

Wireframes
J’ai réalisé plusieurs itérations de wireframes papier en basse qualité sur les écrans clés.

Tests utilisateurs
L’étape d’après a consisté à recruter des gens correspondant à notre persona : des utilisateurs des liseuses Bookeen et des acheteurs de livre dans des libraires « physiques ».
Puis nous les avons fait tester les prototypes de l’application en leur faisant remplir un questionnaire afin de corriger ou améliorer certains aspects de l’application.

Prototype
Avec Axure, je me suis chargé de réaliser des prototypes fidèles de l’onboarding, parcours d’achat, expérience de lecture, etc…

Maquettes graphiques
Une fois les aspects fonctionnels et ergonomiques finalisés, j’ai réalisé la partie graphique comportant plus de 300 écrans ! Le tout en prenant en compte les limitations de l’écran qui possède une faible réactivité (pas de scroll possible) et en mettant l’effort sur le contraste des éléments graphiques.

Réalisation d’icônes
De nombreuses icônes ont été réalisées. Ici par exemple, on peut voir les différents tests des icônes du menu principal

Tests utilisateurs
J’ai eu l’occasion de mettre en place de nombreux tests utilisateurs en présentiel ou à distance pour pouvoir itérer l’interface.

Pixmen

Site Web, UI

Refonte de mon portfolio en ligne pour mieux mettre en avant mes compétences actuelles et présenter mes derniers projets réalisés.

Voir l'étude de cas

Mon ancien portfolio a été conçu il y a 5 ans et ne reflétait pas mes compétences en design d’expérience utilisateur. De plus, il n’y avait pas de cas d’étude et on y voyait seulement des petites copies d’écran. Voici donc une petite analyse sur l’évolution de mon ancien portfolio vers le nouveau.

Apparence de l’ancien portfolio

Couleurs
L’ancienne version était composée de dominantes vertes et noires. Sur la nouvelle version, je voulais mettre en avant le contenu et les photos des projets, j’ai donc opté pour une interface en niveau de gris laissant ainsi les couleurs uniquement pour le contenu.

Accueil
L’ancienne page d’accueil surfait sur la mode du « parallaxe » : en fonction du positionnement du curseur, les montagnes en arrière-plan se déplaçait avec un effet de profondeur. De plus, le logo « P » de pixmen sortait de l’écran quand on passait la souris dessus, ce qui devenait pénible à la longue. J’ai décidé de supprimer ces effets pour ne pas détourner l’attention du contenu de la page. Enfin sur la nouvelle version du portfolio, je voulais qu’on arrive tout de suite sur la présentation des derniers projets réalisés.

Détail d’un projet
Pour chaque projet, j’ai voulu mettre plus en valeur le graphisme des projets en affichant de grandes images et en les accompagnant de textes. Pour certains projets, j’ai pu afficher les recherches UX (parcours utilisateur, personas, prototype, enquêtes, etc…).

A propos
L’ancienne page mettait en valeur mes compétences en webdesign et en intégration. Dorénavant le nouveau site met plutôt en avant celles en design d’expérience utilisateur et d’interface.

Bookeenstore

Site Web, UI, UX

Bookeenstore est une librairie numérique pionnière dans son domaine. Il m’a été demandé d’en améliorer le graphisme et l’expérience utilisateur.

Voir l'étude de cas

Bookeenstore est une des librairies numériques les plus importantes dans le paysage Français. Le site datant de plus de 7 ans, il m’a été demandé d’en améliorer l’expérience de navigation, le design et d’effectuer l’intégration moi-même.
Voir le site en ligne

Couleurs
Les couleurs principales du bookeenstore, sont le noir et le bleu, des couleurs plutôt froides. C’est pourquoi j’ai choisi comme couleurs complémentaires l’orange pour illustrer les promotions et le fuchsia pour les coups de coeur.

Fiche produit
Le plus gros du travail a été de retravailler entièrement la fiche produit. Les tests utilisateurs que j’ai pu faire ont mis en avant plutôt cette version qui permet une meilleure vision d’ensemble de la fiche ebook et une bonne mise en avant des « call-to-action ».

Extraits audio
Suite au succès grandissant des ebooks audio, il a fallu réfléchir à la meilleure façon de pouvoir écouter des extraits. C’est pourquoi j’ai proposé un call-to-action comportant un mini lecteur intégré permettant de contrôler le son. Après coup, on m’a demandé de pouvoir faire une avance rapide du son, j’ai donc fait apparaitre un petit « +5s » une fois l’extrait lancé.

Tunnel de commande
Le processus d’achat a nécessité un gros travail afin de rendre l’expérience la plus rapide et intuitive. Le plus difficile a été de rendre possible d’offrir des ebooks en tant que cadeaux.

Moteur de recherche
La mise en place d’un résultat de recherche en « live » a permis d’augmenter les ventes des ebooks. J’ai souhaité que l’on sépare en 2 colonnes les titres des ebooks dans auteurs pour une meilleure organisation des résultats.

Menu des catégories
Étant donné qu’il fallait revoir la navigation interne, j’ai mis en place un « menu à tiroirs » permettant d’accéder rapidement à n’importe quelle catégorie ou sous-catégorie d’ebooks.