DFAE – Présence Suisse

Refonte du site internet - House of Switzerland

houseofswitzerland.org

Branding

  • Direction artistique
  • Identité visuelle
  • Positionnement

Design

  • Accessibilité web
  • Architecture de l'information
  • Design system & styleguide
  • Design visuel
  • Recherche utilisateur

Développement Web

  • API : design & implémentation
  • Architecture technique
  • CMS Drupal & Wordpress + Symfony

Gestion de projet

  • KPIs et suivi des performances
  • Mesures et reporting
  • Transformation digitale

Stratégie

  • Audit stratégique
  • Stratégie de contenu

Brief

Présence Suisse (organisation au sein du DFAE), en charge de la promotion des activités de la Suisse à l'étranger, a mandaté Antistatique pour la refonte de leur portail online de communication : houseofswitzerland.org.
House of Switzerland, c’est tout d’abord une maison, votre maison ! Lors de petits à grands événements, un bâtiment aux couleurs de la Suisse s’élève afin de célébrer une occasion spéciale. Il s’agit d’un outil de communication important de Présence Suisse. Concernant houseofswitzerland.org, il s’agit de la version en ligne de la maison, permettant de partager avec tous les moments forts, les interviews et l’actualité. C’est dans la pièce “Swiss Stories”, que le Département Fédéral des Affaires Étrangères propose des articles de fond 100% suisses.
Nous avons eu la chance de construire avec les équipes du département un ensemble qui permet de mettre en avant le contenu ainsi produit, le tout dans un écrin moderne et multilingue.

Analyse et Étude

Dans cette première étape passionnante, notre but a été premièrement de comprendre l’environnement dans lequel Présence Suisse évolue afin de retranscrire leurs besoins au sein d’un seul et même écosystème numérique.

Workshop shareholder mapping - comprendre le client

Lors d’un premier workshop, nous avons utilisé la technique du shareholders mapping qui revient à créer une carte représentant toutes les parties prenantes. Un grand travail de cartographe.
Dans cet exercice, l’importance est de mettre au clair ce que ces parties prenantes pensent et ce qu’elles disent réellement. Grâce à cette “carte”, nous avons pu comprendre dans quel environnement Présence Suisse travaille, les opportunités qu’elle a et les éventuelles barrières que peut rencontrer l’organisation.

Personas - méthode performante pour définir l’essentiel

Le nombre de publics-cibles de houseofswitzerland.org est très élevé. En effet, Présence Suisse souhaite autant entrer en contact avec les personnes de pays étrangers que d’informer les Suisses sur sa présence à l’étranger. Il y a donc un grand nombre de personnes avec des envies et des besoins différents.
La création des personas permet de synthétiser les besoins d'un groupe de personnes. Elle nous donne également les données de base afin de comprendre les attentes des autres parties-prenantes directes au niveau site Internet comme un modérateur ou sponsor. Voici quelques exemples dans le cadre de ce projet :   
  • L’étudiant étranger parlant anglais
  • L’ouvrier étranger parlant uniquement portugais
  • La journaliste suisse ou étrangère

Solution proposée

Grâce à la parfaite collaboration entre Présence Suisse et Antistatique, la solution proposée remplie toutes les attentes. Voici quelques points principaux de la solution :

Agencement des pièces - la navigation simple

Reprenons le concept de la maison. Le but principal est de s’y sentir à l’aise et que toutes les pièces soient parfaitement placées afin d’optimiser les déplacements, le flux de navigation. Dans la House of Switzerland digitale, il y a beaucoup de pièces différentes. Tout a été fait pour que l’utilisateur, l’invité, puisse passer d’une pièce à l’autre sans aucune gène et de manière intuitive : naviguer d’un événement à un autre, d’un événement à une news, d’une story vers une autre, etc.

Promotion des contenus

Voici l’un des principaux besoins de ce projet : promouvoir du contenu intéressant au moment opportun. Sur houseofswitzerland.org, vous trouverez sans grands efforts les informations importantes du moment, que vous vous trouviez sur la page d’accueil ou sur une autre page.
Le CMS Drupal prévoit des systèmes de promotions complets afin de faire remonter l’information importante là où elle se doit d’être. Plusieurs solutions permettent de couvrir le maximum de besoins. Le système de vues dynamique aide également à amener clarté et ordre entre les points essentiels de la communication.  

Les fiches d’événements

Les événements sont les éléments centraux de la communication de Présence Suisse dans le cadre de la House of Switzerland. Que ce soit depuis la page d’accueil ou la navigation, ils sont facilement accessibles et mis en avant.
Suite à nos réflexions avec le client, tout événement a une fiche et celle-ci contient les informations essentielles pour des événements de petite à grande tailles. La fiche permet de promouvoir un événement, de l’animer à l’aide de news, calendrier et social walls ainsi que de façonner l’archive de House of Switzerland. En effet, la notion d’archive prend toute son importance grâce aux fiches et permettra au fil des années de récolter des contenus qui, progressivement, construisent l’identité de House of Switzerland.  

La décoration de la House - une mélodie millimétrée et rock'n roll

Présence Suisse est installée au sein du Département Fédéral des Affaires Étrangères (DFAE). Ledit département fait partie de la Confédération Suisse. On navigue donc dans un cadre officiel. Mais on doit communiquer sur les atouts de la Suisse après tout ! Et ça, les équipes de Présence Suisse l’ont tout à fait compris. Elles incarnent parfaitement ces enjeux : de la personnalité, de l’énergie, de l’envie, du charme et un je ne sais quoi qui fait que nous pouvons conjuguer mélodie millimétrée et rock'n roll dans le design du site. Si le DFAE était l’orchestre symphonique dans ce projet, Présence Suisse serait l’invité aux guitares agiles, à la basse solide et aux fûts puissants.
Nous avons habillé le site d’une robe bien évidemment teintée de rouge, mais elle a des reflets profonds et des lumières parfois plus acides. Certes, il s’agit d’un bâtiment officiel mais on ne s’empêche pas de déplacer les meubles pour faire rentrer les souvenirs de voyages de ses habitants. Ne vous inquiétez pas, même si la peinture est sèche : on a quelques idées de décoration supplémentaires et déjà des envies d’extensions. Une sorte de maison magique !

Contrainte & difficulté

Que ce soit en architecture ou dans la conception d’un site Internet, rester simple est bien souvent une quête complexe. Avant d’arriver à la structure finale du site Internet, Antistatique et le client sont passés par plusieurs itérations pour arriver à une qualité digne de ce nom ! Voici deux challenges que nous avons rencontrés durant ce beau projet :

De beaux tableaux comme décoration - la problématique des images, formats et devices

Dans une grande maison, on y trouve bien souvent de grandes décorations : tableaux, sculptures, poster, etc. Chez House of Switzerland, des tableaux, il y en a beaucoup dans pratiquement chaque pièce importante car l’image vaut mille mots. Leurs tailles sont différentes et le tout se doit d’être harmonieux. Le site Internet comprenant toutes ces images et formats doit pouvoir se mouvoir entre desktop, tablette et smartphone sans aucun problème (Responsive Web Design).

Bâtir pour le futur - un site Internet fait pour durer

L’optimisation technique et l’application des dernières méthodes front-end en matière de qualité de code ont évidemment joué un grand rôle dans la réalisation technique du site. Le site est avant tout bâti pour le futur, pour durer à travers les diverses péripéties de House of Switzerland à travers le monde.
Chez Antistatique, la pérénité d’un projet passe également par l’Atomic Design et le styleguide dynamique. Ce dernier est le cousin de la charte graphique, sauf qu’il est codé ! Tous les composants du site (un bouton, une photo, un tableau, etc.) y sont répertoriés, accompagnés d'un exemple. Cela permet de les tester facilement sur différents navigateurs et terminaux dans notre Device Lab.
Dans le cadre de ce projet, nous sommes passés à Drupal 8. Ce passage s’est bien passé mais nous a posé quelques challenges durant le développement. Vous trouverez plus d’informations dans le chapitre suivant.

Technologies utilisées - Drupal 8

Le projet a démarré peu après la sortie officielle de la dernière version du CMS retenu, soit Drupal 8. Bien qu’une nouvelle version soit synonyme de phase d’apprentissage, elle permet de garantir la pérennité à long terme d’un projet. Les développeurs se sont formés, avec succès, avant et durant le projet aux nouveaux éléments qu’apporte Drupal 8.
La mise en place de ce CMS apporte ainsi un côté visionnaire et précurseur à l’institution qui se veut toujours au fait de l’actualité. Nous sommes fiers de le compter comme faisant partie des premières réalisations mondiales sur ce système tout frais.

Conclusion

Travailler pour Présence Suisse est un honneur tout d’abord et la collaboration a permis d’atteindre un résultat de qualité. Nous en sommes très fiers ! House of Switzerland a dès à présent une House digitale digne de ce nom pour attirer de nombreux visiteurs.
Maintenant que la House principale a été bâtie, il reste à développer le voisinage. Plus d’informations arriveront durant l’année 2016 !

Testimonial

“ Nous avons travaillé avec Antistatique pour le relaunch du site de House of Switzerland. Durant la phase de pitch, l’agence a montré qu’elle avait bien cerné la problématique de Présence Suisse et les enjeux d’un site devant remplir plusieurs fonctions. Antistatique a su traduire nos objectifs, étant un partenaire d’échange dynamique dans la période de conception et réalisant ensuite le site de manière efficace, en cherchant des solutions à la fois techniquement stable et visuellement efficace. Le résultat final est à la hauteur de nos attentes et devrait permettre de futures extensions en fonction des besoins. ”
Renée Bäni

Renée Bäni

Responsable digital

Vous voulez en voir plus ?

Découvrez
plus de nos projets

Tous nos projets

Terre des Hommes

project.teaser.a11y.servicesSite Web

United World Wrestling (UWW)

project.teaser.a11y.servicesApplication web