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.

E-librairie Leclerc

Site Web, UI

La e-librairie de Leclerc est une déclinaison du site Bookeenstore avec la charte graphique de Leclerc. Mon travail a été de le designer et intégrer le site en respectant la charte graphique de Leclerc.

Voir l'étude de cas

La e-librairie de Leclerc est une déclinaison du site Bookeenstore avec la charte graphique de Leclerc. Il s’agit d’un site en marque blanche qui a permis à Leclerc d’obtenir un écosystème complet de lecture e-librairie Web / Liseuse / App de lecture. Mon travail a été de designer et intégrer le site en respectant la charte graphique de Leclerc. Pour en connaitre plus sur la conception du site Bookeenstore qui a servi de référentiel, veuillez cliquer ici.
Voir le site en ligne

Couleurs
Les couleurs de la charte graphique de Leclerc.

Listes d’ebooks
Des ebooks en mode mosaïque et détaillé.

Fiche produit
Cette page met bien en avant les « call-to-action ».

Tunnel de commande

Risk Facility Experts

Site Web, UI

RIFLEX est un cabinet spécialisé dans l’accompagnement de la vie d’une entreprise. Je l’ai ai aidé dans la conception, l’intégration et le design de son site.

Voir l'étude de cas

RIFLEX est un cabinet nouvellement créé et spécialisé dans l’accompagnement de la vie d’une entreprise. À partir d’une plaquette de présentation, le client souhaitait obtenir un site Web pour pouvoir présenter sa société ainsi que les dates et contenu de ses formations. Je l’ai aidé à structurer ses idées, ai effectué le design et l’intégration de leur site en respectant son identité print. Cela lui a permis de passer un palier pour la notoriété de son cabinet.
(Le site n’est plus en ligne)

Couleurs
Les 2 couleurs principales ont été imposées par le client. J’ai choisi 3 les couleurs secondaires, qui devraient contraster avec les 2 couleurs principales.

Accueil
Dans un premier temps, le client ne savait pas trop comment structurer son site. J’ai proposé un storyboard avec notamment une page d’accueil qui aurait des accès directs vers les différentes pages, permettant ainsi de comprendre leur activité en un coup d’oeil. Ci-dessous la page imaginée en amont et le résultat final après plusieurs itérations.

A/B testing
Quelques tests graphiques de la page d’accueil

Formations
La partie la plus complexe a été de présenter les formations, que j’ai regroupé en plusieurs thématiques et sujets. J’ai opté pour un système d’onglet, un toggle permettant de voir le détail d’une formation et de demander des informations. Cela a permis d’afficher bon nombre de formations, le tout prenant très peu de place.