Interface d’administration

Interface d'admin
Design et intégration d'une interface d'administration

Design et intégration d'une interface d'administration

ANNÉE
2012 – 2021
CLIENT
Chateau.com
MISSION
Refonte de l’arborescence et de la disposition des différents outils.
Design et intégration de l’interface d’administration de la boutique en ligne sur un Framework Angular – Bootstrap.
Création d’éléments d’interface indépendants et réutilisables dans une approche « atomic design ».
Conception d’icônes diverses.

Tâches principales

La première tâche a été de revoir intégralement l’arborescence de l’interface en vue de rendre l’outil plus clair et intuitif pour les utilisateurs. En effet, la première version de cette interface avait perdu en lisibilité à mesure que des fonctionnalités étaient ajoutées.

La seconde tâche, était de prévoir l’ajout de fonctionnalités encore indéterminées à l’avenir. Il fallait donc que l’interface soit construite sur des bases simples, combinables et réutilisables à loisir.

Pour cela, j’ai déterminé qu’une conception « atomic design » était la seule solution viable, permettant l’ajout rapide et cohérent de nouveaux éléments d’interface. 

Design et intégration de l'interface (UX/UI)

Webdesign et intégration d'une interface d'administration

Pour cette refonte, j’ai pris la décision de repenser intégralement le design de l’interface afin d’optimiser son accessibilité et de réduire au maximum les frictions. Ayant en tête les différentes fonctionnalités qui seraient ajoutées par la suite, j’ai travaillé dans une optique d’atomic design.

Cette méthode m’a permis de définir rapidement un webdesign cohérent et évolutif pouvant répondre aux besoins futurs de l’entreprise.

Webdesign du hub central de l'interface

Accueil sous forme de hub

Design de l'interface de gestion du produit

Page de gestion d’un produit

Webdesign du tableau récapitulatif des produits

Interface de gestion des produits

Design de l'interface de gestion des caractéristiques

Interface de gestion des caractéristiques

Responsive design et intégration

Responsive design - grand écran

J’ai pensé l’accueil de l’interface comme un hub centralisant toutes les informations et outils les plus importants pour la gestion du stock et le traitement des commandes.

La colonne de gauche présente un large panel de raccourcis classés par catégories.

La partie droite, quant à elle, affiche les informations les plus importantes pour la gestion de l’entreprise.

J’ai rendu le menu accessible depuis toutes les pages de l’interface.  Cela permet un accès rapide aux différents raccourcis ainsi qu’à toutes les catégories et pages présentes au sein de l’outil de gestion.

Responsive design - écran moyen
Responsive design - écran mobile

Afin d’être utilisable à tout moment, même en mobilité, j’ai conçu l’interface pour s’adapter à tous les formats d’écrans. En effet, grâce à des règles CSS simples, il n’y a aucune perte d’information, peu importe la taille de l’écran.

Charte graphique, atomic design et accessibilité

Le design de l’interface devait être aussi clair et évolutif que possible. Pour cela, j’ai procédé à une conception en atomic design en créant des éléments indivisibles (bouton, input, interrupteur, etc…). Ensuite, ces éléments peuvent se combiner pour former des composants plus complexes tels que des champs de recherche ou des tableaux.

Il en résulte une interface harmonieuse et cohérente, pouvant accueillir de nouvelles fonctionnalités sans altérer le webdesign général.

Charte graphique - palette de couleurs
Charte graphique - Quelques icônes

J’ai repensé la charte graphique en fonction de deux impératifs principaux. 
Tout d’abord, des contraintes d’accessibilités pour assurer que l’interface est lisible pour les personnes à la vision déficiente.
Ensuite, la nécessité d’intégration rapide de nouvelles fonctionnalités en utilisant une bibliothèque d’icônes très versatile (FontAwesome).

Atomic design - éléments d'interface

Quelques éléments tels qu’ils ont été intégrés à la charte graphique.

Atomic design - autres éléments d'interface

En haut et à gauche, un champ de recherche fermé et ouvert. A droite, un tableau.

Animation - décomposition de l'animation d'un élément

Template des raccourcis et illustration de leur animation

Animation d'un élément d'interface

Animation d’un raccourcis