Article | Courte longueur
La Mockup Box
September 2019
En 2015, l’identité de la marque Orange a fortement évolué. Toutes nos interfaces, qui reflètent certains changements décisifs, ont été concernées par le déploiement de cette nouvelle identité. Nous devions relever le défi de faire passer comment mettre en œuvre les nouveaux concepts, tout en favorisant la compréhension de la nécessité de préserver, en parallèle, la cohérence. Cela nous a conduits à créer un nouveau support de facilitation à destination des équipes créatives : la Mockup Box.
L’évolution de la marque s’est accompagnée des aspects suivants : Nouveau positionnement de marque sous « écoute-réponse », exprimé par la mise en évidence des connaissances clients dans un formulaire écrit. Ce positionnement s’est enrichi d’un nouvel ensemble de symboles, construits à partir de découpes nichées à l’intérieur du carré Orange ; chaque découpe représente un domaine d’usage auquel appartient cette connaissance. Expression de la marque plus affirmée, relayée par l’utilisation de caractères gras standards avec la police Helvetica Neue 75 et une nouvelle palette de couleurs secondaires. Cette nouvelle expression de la marque a également supposé l’évolution des directives en matière de photographies et d’illustrations, ainsi que l’adoption du style « flat design ».
Afin de faire accepter cette évolution auprès de nos clients, nous avons mené plusieurs projets de design opérationnels entre 2015 et 2017. Cette évolution a également été l’occasion pour les filiales dans les pays de mettre en œuvre une construction modulaire plus évolutive de leurs portails web avec l’introduction de la conception de sites web adaptatifs ou responsive web design (RWD).
De l’évolution de la marque à sa mise en œuvre à grande échelle
Projet après projet, notre équipe de design a créé, pour chaque pays, un groupe de modules de référence en auto-construction. Cet ensemble de modules vise un objectif pédagogique qui repose sur les 4 piliers suivants :
– Intégration des fondamentaux de la marque
– Logique de construction entièrement modulaire, améliorant la flexibilité et l’évolutivité, qui se double de capacités de duplication et de simplicité de mise en œuvre.
– Mise en œuvre unifiée entre les différents écrans utilisateurs, source d’uniformité et gage d’une expérience durable.
– Respect des bonnes pratiques actuelles en termes de conception d’interface.
Après deux ans de travail, nous avons créé plus d’une centaine de modules différents, qui s’appliquent de façon transversale aux portails traditionnels dans les télécoms : boutique, assistance client, compte client et autres.
Acceptation insatisfaisante
Après avoir passé en revue le travail accompli, l’équipe est parvenue aux trois conclusions suivantes : sensibilisation insuffisante, pénurie de diffusion et défaut de compréhension.
Malgré les multiples contacts pris pendant la mise en place du projet, il y a eu un manque de sensibilisation au nouveau matériel de travail, dont la diffusion auprès des designers locaux a été insuffisante. De plus, il est nécessaire d’impliquer les décideurs marketing locaux pour contribuer à diffuser et promouvoir l’adoption de notre travail à plus grande échelle. Sans perdre de vue notre objectif didactique, il y avait de la marge pour rendre notre production plus tangible, et ce faisant en faciliter la compréhension et l’utilisation dans le cadre du processus de création. C’est ainsi que nous avons élaboré la Mockup Box.
Un nouvel outil de construction d’idées
Il est devenu évident, partant de notre analyse, qu’il nous fallait créer un nouvel outil de facilitation qui réponde aux exigences suivantes :
– Un outil à utiliser durant tous types d’ateliers professionnels ; facile à manipuler par tous : designers, chefs de projet, spécialistes marketing et spécialistes de la communication. – Un outil qui permette la construction d’une page web, de l’en-tête au pied de page, avec des modules principaux qui puissent être ordonnés, interchangés, ajoutés et supprimés. – Un outil qui démontre, par exemple, les fondamentaux de nos directives en matière de web design et la façon de mettre en œuvre l’identité de notre marque.
Créer rapidement des prototypes pour votre site web lors d’ateliers et de réunions de création.
La sélection et la préparation des éléments étaient la partie la plus importante de notre travail. Nous avons retenu 44 modules sur plus d’une centaine, sur la base de leur pertinence, de la variété de scénarios englobant nos règles de conception, des types de contenu et du contexte d’utilisation.
Faire vivre cet outil
Nous avons commencé par réfléchir à un objet physique facile à manipuler, présentant une faible courbe d’apprentissage, qui allège la génération d’idées et en fasse un processus collaboratif, tout en venant soutenir la connaissance personnifiée. Nous en avons rapidement trouvé le nom, qui représente la nature de notre activité : la Mockup Box. Le format de son packaging s’est également rapidement imposé. Nous voulions présenter notre travail dans une boîte, très comparable aux boîtes qui contiennent les objets physiques que les clients achètent dans nos boutiques.
La Mockup Box est une boîte qui contient 44 modules web sélectionnés dans notre bibliothèque. Chaque module est imprimé sur du carton double face épais, dont le verso vierge est ré-inscriptible. En gardant en tête qu’il est à l’origine « conçu à 100 % pour les écrans », chaque module est livré en double exemplaire, une version pour écran d’ordinateur et l’autre pour écran sur terminal mobile. La relation d’échelle entre les deux tailles d’écran est maintenue.
Cela permet aux équipes, qui utilisent les deux versions, d’organiser une page web simultanément pour PC et pour mobile. Nous nous sommes efforcés de préserver le rendu visuel proche des modules web. Cela nous a conduits à retravailler chaque module avec les visuels afin de les adapter à la résolution d’impression supérieure à 240 dpi et éviter ainsi une importante perte de qualité dont nous aurions héritée à partir de la définition du web à 72 dpi.
Nous étions très heureux de livrer une Mockup Box à chacune des équipes pays avec lesquelles nous travaillons.