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.