Contexte

Le créateur de WebQuartier m'a demandé d'apporter des amélioration UX/UI sur l'ensemble du site. Une attention particulière a été apporté à l'édition de la fiche produit sur le backoffice pro.

Problèmes

Lors de la prise en main du site j'ai constaté les problèmes suivants :

• La navigation sur mobile n'est pas optimisée (header trop imposant, bouton et texte trop petit)

• Le backoffice pro manque d'ergonomie

• Manque d'uniformité du design

• Dissonance entre le contenu visuel existant (images stock, impersonnel) et le message philosophique axé sur les valeurs humaines que le développeur cherchait à véhiculer.

Solution

Navigation Mobile

La navigation sur mobile a été revu : les nombreux services ont été rangés dans le menu hamburger tandis que les fonctions essentielles sont accessible directement depuis le header (compte, favoris et panier).

Les tailles des textes et des boutons ont été ajustés pour qu'ils soient plus lisible.

Backoffice pro

Voici à quoi ressemblait la fiche d'édition d'un produit.

Le problème majeur était la navigation entre les différentes rubriques, la barre de navigation n'était pas statistique et lorsqu'on scrollait pour éditer les détails le rappel de l'image et de la dénomination du produit était hors de vue.

Pour répondre à ce problème l'interface a été repensée. Les rubriques ont été déplacés sur le côté gauche ainsi que l'image et la dénomination produit, cela permet de naviguer plus efficacement.

Kit UI

Afin d'uniformiser les interfaces un kit UI a été développé.

Humaniser l'interface

Un ensemble d'illustration a été créé afin de rendre l'interface plus humaine. Les couleurs ont été modifié afin de répondre aux standards d'accessibilités.

Conclusion

Ce stage au sein de WebQuartier m'a permis d'apporter mon expertise UI/UX afin d'améliorer l'ergonomie global du site internet. J'ai également pu apporter une touche plus graphique au site afin de concorder la philosophie du développeur à son site.