Menu

Workflow Webdesign

Workflow Webdesign

Clinflows// 2013

Clinflows est une société allemande qui a une antenne alsacienne, son activité : la transmission numérique de données d’imageries médicales. Ses clients sont des spécialistes, en particulier des médecins et cardiologues, qui souhaitent traiter leur imagerie médicale.

Clinflows a ainsi développé deux solutions web:

Decidemedical, un worflow (plateforme web spécialisée) dédié au traitement des données.

Dicomdrop, une interface permettant le transfert rapide et sécurisé des données.

A l’entame de notre partenariat, la société possédait un logotype, son site vitrine et l’interface du logiciel Decidemedical graphiquement très basique.

Ils m’avaient contacté pour relooker le site vitrine, demandant alors de faire un mockup37 à trois prestataires différents. Ayant attiré leur attention sur un web plus axé sur les pictogrammes et les couleurs plates (sans effets), un web plus contemporain, nous sommes tombés d’accord pour une collaboration.

De fil en aiguille ce projet s’est globalisé.

Dans l’ensemble, j’ai ainsi contribué à :

Le logo a été très légèrement relooké. L’objectif était de s’incrire dans un design plus contemporain, de travailler sur une deuxième couleur. Tout cela en gardant la même forme graphique pour rester familier avec sa clientelle.

llustration n°2.2.4- Evolution du logo Clinflows

Pour le design global, j’ai opté pour un jeu de couleurs sur deux teintes (bleu et vert) en appui sur l’image historique «bleue» de Clinflows et le «vert» médical.

Il convient d’avoir une lecture sobre et apaisante, d’où la grande présence de blanc ou de teintes grisées. Les polices d’écritures sont elles aussi fines et légèrement grisées. Le tout se rapprochant du Material Design, un ensemble de règles de design proposées qui s’appliquent à l’interface graphique des logiciels et applications.

llustration n°2.2.5 - Maquette webdesign Homepage DicomDrop

Les deux logos (Ilustration n°2.2.8) peuvent s’exploiter uniquement avec le «m» pour decidemedical et «d» pour dicomdrop. Notamment pour des icones ou favicon38, pour ensuite prendre d’avantage de place dans l’identité visuelle de la société.

Cette orientation est pour l’instant laissée de côté mais offre une ouverture possible pour plus tard. Les logos utilisés contiennent le texte complet (Ilustration n°2.2.9)

llustration n°2.2.6- Déclinaison des Logos Produits Decidemedical et Dicomdrop

llustration n°2.2.7- Logos Produits Decidemedical et Dicomdrop

Le jeu de pictogrammes (Ilustration n°2.2.7) se familiarise de plus en plus sur les sites web contemporains. Ils permettent une mémorisation visuelle, tout en favorisant l’ergonomie de lecture. Evidemment pour équilibrer le tout, il faut qu’ils s’acclimatent à la charte graphique sans dénoter sur le visuel global. Les pictogrammes Clinsflows s’inscrivent dans un design scientific et internationnal. La stylisation (simplification graphique) change des us français. Notament sur la représentation des personnages, plus fine dans ce domaine.

llustration n°2.2.8- SIte vitrine Clinflows, Pictogrammes

L’interface de la solution logicielle Decimedical (Ilustration n°2.2.4) était au premier regard austère. Les développeurs héritent souvent de jeux de couleurs et d’icônes, très vite démodés. Ils leur faut une définition de charte graphique ainsi qu’une bibibliothèque d’icônes. Les deux développeurs de Clinflows ont eu une formation bénéficiant de cours de graphisme, ce qui a nettement facilité notre relation.

Tout l’enjeu d’un design d’interface logicielle est de rester cohérent et de tenir dans le temps. Très vite les courants changent. A moi de proposer un visuel qui tiendra plus de quatre ans. De telles solutions sont en constant développement, contrairement à un site web où la durée de développement dépasse rarement les deux mois. Dans ce sens, modifier l’ensemble du design est beaucoup plus lourd.

L’allègement graphique et l’aération du contenu (hauteurs de lignes plus importantes, marges, flexibilité du contenu selon la taille de l’écran, épaisseur des polices..) étaient ma ligne directrice.
Quelques années plus tard, je m’aperçois que j’aurais pu aller encore plus loin. Aujourd’hui la flexibilité des interfaces est beaucoup plus aboutie, notament grâce aux technologies de langage (CSS) qui ont gagné en performance.

Or la collaboration avec Clinflows ne s’arrête pas, puisque nous révisons régulièrement ensemble l’identité visuelle. Le site web, principal outil commercial, a été refondu en 2017. Les logiciels ont encore le design de 2013. Le changement impliquant une mise à jour et une sensibilasion chez chaque client. La tâche est prévue pour 2019.

Tout au long du projet, les échanges se faisaient en anglais. Le site est en anglais et essentiellement avec du vocabulaire médical. De nombreuses vidéoconférences ont été opérées dans tout le projet de construction de la ligne graphique (interface du site vitrine, interface des solutions logicielles vendues par la société Clinflows, identité visuelle et logotypes de la société). Ces réunions ont touché plusieurs pays (France, Allemagne, Belgique, Suisse), la majorité des collaborateurs et associés étant en télétravail.

Ce projet m’a permis de me frotter à l’exigeant univers médical et scientifique. Ceci dans un contexte international. C’est à cette époque que j’ai pris l’entière conscience de la standardisation du Flat Design qui règne encore aujourd’hui.