Design d’un SAAS d’envoie de recommandés en ligne
Le Brief
UI design d’un Saas : de la landing page au tableau de bord
LRAR est un outil permettant d’envoyer des lettres recommandées à distance. Et permet aussi de générer et d’envoyer des recommandés de résiliation (internet, salle de sport, …)
Ma mission pour ce projet était de créer les maquettes pour :
– Le site internet présentant les différents services et le Saas permettant de générer une résiliation.
– L’espace client permettant de gérer ses envois, ses groupes de diffusion, …
Il n’y avait pas charte graphique pour ce projet. Le client souhaitait que j’utilise du jaune et bleu pour rappeler les couleurs de La Poste. Il souhaitait aussi un design moderne, aéré et des illustrations en images vectorielles.
Les textes et le wireframe avaient déjà été pensés par le client. Il ne me restait plus qu’à le mettre en forme.
Spécifications
Client : Tendance digital
Points importants
Site épuré et moderne
Création des maquettes du site et de l’espace client
Illustration vectorielles
Outils utilisés
Figma
Pour la création de la maquette
Illustrator
Pour retravailler les illustrations vectorielles
le résultats
Le Style Guide
Dans un premier temps, j’ai créé la page d’accueil pour valider le design : le choix des couleurs, des polices et des illustrations.
Les différents éléments du style guide ont commencé à être mis en place. Celui-ci reprend tous les éléments présents dans la maquette (boutons, champs de formulaires, …) Il permet d’être homogène sur les différentes pages. C’est aussi une aide précieuse pour le développeur qui aura toutes les informations réunies au même endroit.
Pour structurer le contenu mais aussi faciliter la future intégration par le développeur, la maquette a été créée en se basant sur des grilles.
Une fois ces éléments validés, le design a été décliné sur les différentes pages.
Myresil
Pour la partie MyResil (permettant de générer les résiliations), le client devait pouvoir compléter un formulaire et voir sa lettre de résiliation de compléter toute seule en simultané.
Une barre de progression a aussi été ajoutée pour permettre de voir l’avancée de l’action et montrer que celle-ci ne prend pas beaucoup de temps.
L’espace client
L’espace client était important et regroupait plusieurs fonctionnalités :
– Les coordonnées du client :
– Le récapitulatif des envois
– Un simulateur de prix en fonction des différentes options
– Le lien vers le service résiliations
– La liste des contacts et groupes de contacts
– Les modèles de lettres préenregistrés
– Les factures
Pour éviter de perdre le client dans la multitude formulaire et d’informations, celles sont présentées regroupées et présentées sous forme de cards.
Lors de l’utilisation des tableaux, on essaye au maximum d’utiliser des couleurs et des icônes pour facilité la lecture et le suivi des informations.
