UI & UX DESIGN
RED by SFR
Le Projet
FONCTION – Lead Designer UI, Co-conception UX
CLIENT – SFR
TIMING – 4 mois – Lancement en février 2016
TYPE – Responsive, Digital Branding
OUTILS – Photoshop, Sketch, Illustrator, Invision
En février 2016, pour accompagner le renouveau de sa marque, RED by SFR lance de nouvelles offres personnalisables pour répondre aux usages de ses clients, jeunes urbains ultra-connectés, attentifs à leur budget, qui veulent choisir et profiter de leurs contenus numériques, avec le meilleur des débits.
Visuellement, RED by SFR fait peau neuve et dévoile son nouvel univers de marque : un changement de couleur, un logo redesigné et de nouveaux codes graphiques verts et épurés pour incarner une marque toujours plus innovante, dynamique, 100% digitale et proche de ses clients digital natives.
Les bases de la nouvelle charte étant en partie préétablies (couleurs, logo, typographie, pictos, patterns), il est temps de créer le site associé et ses codes digitaux.
LE PROCESS
UX, UI et Code en parallèle
Les courts délais de réalisation sur ce projet d’envergure, ainsi que les attentes ambitieuses en terme d’innovation nous ont contraint d’oeuvrer en flux tendu de bout en bout, en pilotant en parallèle la conception, le design et l’intégration.
Une partie stratégique de la conception (refonte des offres et parcours utilisateurs) est réalisée en amont par deux UX Designers.
J’interviens ensuite afin de précadrer certains aspects clés du projet (vision globale des layouts, réflexion responsive, personas ciblés, contraintes techniques…) qui vont aiguiller ma recherche créative.
S’en suit une phase inspirationelle de bench et étude des tendances, toujours en projection vers notre cible. De nombreux points d’échanges collaboratifs permettent de rapidement converger vers un concept fonctionnel.
La phase de design web peut commencer. Dès la première page validée, son intégration est lancée.
Des points techniques sont fréquemment organisés avec les intégrateurs pour valider la viabilité des interactions souhaitées, les comportements en responsive, mais aussi pour récolter d’autres bonnes idées.
en détail
Un beau jeu de construction !
Voici un aperçu des différents modules qui ont été réalisés :
- Gabarits de homepages et pages de sous niveau
- Module « configurateur » pour construire son offre à la carte
- Un catalogue de mobiles, avec filtrages, gestion des stocks, descriptifs
- Une partie authentification et la gestion client associée (suivi de commande…)
- Un moteur de recherche et sa page de résultats
- Un module de test d’éligibilité et un module de chat d’aide en ligne
- Création de pictos
Un document Photoshop de Guidelines digitales est créé et enrichi au jour le jour.
Les assets d’interaction et certains pictos ont été inclus au sein d’une typographie.
résultat
Une aventure riche et intense
Voilà un projet comme je les aime, avec de la créativité, de la réactivité, beaucoup d’échanges sur différents tableaux (conception , design, ergonomie, interactions, intégration). Sans oublier une bonne dose de pression contrôlée, mais c’est dans ces moments que mes neurones sont à leur paroxysme.
Aussi le groupe projet concerné, à taille humaine, à permis d’avoir un flux de création-validation-production très réactif.
Après mise en production les retours positifs ont été nombreux, le pari était gagné, un site fluide et fonctionnel, innovant et moderne, what else ?
