Appel d'offres Refonte du site internet Lot : Prestation d'UX-design et graphisme
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Appel d’offres
Refonte du site internet
Lot : Prestation d’UX-design et graphisme
Le client : Coordination SUD
Adresse : 14, passage Dubail, 75018 Paris
Dossier suivi par : Olivier Jablonski-Sidéris
Chargé de communication
Téléphone : 01 44 72 87 15
E-mail : jablonski@coordinationsud.org
Le 6 décembre 2018Présentation de Coordination SUD
Coordination SUD – Solidarité Urgence Développement - est la coordination nationale des ONG
françaises de solidarité internationale.
Fondée en 1994, elle rassemble près de 170 ONG qui mènent des actions humanitaires d’urgence,
d’aide au développement, de protection de l’environnement, de défense des droits humains auprès
des populations défavorisées mais aussi des actions d’éducation à la solidarité internationale et de
plaidoyer. Coordination SUD est une association loi 1901 composée d'une quinzaine de salariés.
Coordination SUD assure quatre missions : la représentation de positions communes auprès des
institutions publiques et privées, en France, en Europe et dans le monde ; la défense et la
promotion des ONG ; la veille et l’analyse du secteur de la solidarité internationale et enfin l’appui
et le renforcement des ONG françaises.
Elle développe des services de veille, de diffusion d’information, de conseil et de formation. Elle
gère un fonds paritaire de cofinancement d’expertises externes sur les différents aspects de la
performance organisationnelle et institutionnelle pour les ONG. Enfin, elle anime des commissions
de travail thématiques composées de ses membres, mobilisées sur des enjeux majeurs de la
solidarité internationale. Coordination SUD est membre de collectifs français et internationaux.
Objet de la consultation
Coordination SUD prévoit la refonte de son site internet (www.coordinationsud.org). Dans ce cadre,
la consultation présente vise à sélectionner un prestataire spécialisé dans les aspects liés aux
interfaces et graphiques, afin d’obtenir les éléments nécessaires pour le prestataire chargé du
développement.
Présentation du site internet actuel
Le site actuel fonctionne sous Wordpress. Il vise plusieurs objectifs : le plaidoyer en faveur de la
solidarité internationale, l'information sur l'activité de l'association et ses membres, une palette de
service pour les ONG mais aussi les individuels.
Son contenu est donc varié, destiné à plusieurs publics, via les différents types de
contenus principaux : autour de l’éditorial et des publications spécialisées, et une série d’espaces
dédiés.
Plus précisément, il contient :
- Des contenus éditoriaux (l’actualité de Coordination SUD et celle de ses membres)
- Une section documentaire
- Un espace membre (liste des associations membres, devenir membre)
- Un espace emploi (multilingue anglais-français)
- Un espace prestataires et appels d’offre (multilingue anglais-français)
- Un espace formation
- Un espace financement des ONG
- Des pages statiques dont celles de présentation de Coordination SUD, son organisation, ses
positions et ses propositions d’appui
Le site ne contient pas d'intranet.
Enjeux du projet
La structure future du site ne devrait pas profondément changer par rapport à l’actuelle. Lors de la
refonte, il est prévu d’ajouter une section dédiée à la valorisation des productions éditées par
l’observatoire de Coordination SUD (études et analyses 1) et un nouveau type de contenu pour
certains périodiques imprimés actuellement diffusés en pdf dans la section documentation, qui
1
Dont l’embryon actuel se trouve ici : https://www.coordinationsud.org/nos-appuis-aux-
ong/etudes-et-analyses/
2seront désormais uniquement accessibles en html. Par ailleurs, déclinée sur le principe de la partie
actualité, un espace sera dédiée aux journalistes.
Prise en compte de la plateforme de marque et la nouvelle stratégie de communication
La mise à jour du site internet de Coordination SUD fait suite à un audit de nos outils de
communication, l'établissement d'une plateforme de marque et d’une stratégie recensant enjeux et
argumentaires adaptés à chacune de nos cibles de communication.
Cette stratégie de communication impose donc une refonte des éléments textuels des pages
statiques (présentation de l'association par exemple), des choix d'organisation des contenus. Il
sera judicieux d’en profiter pour structurer plus fortement, visuellement, le site en fonction des
publics, de ses usages (habillage des zones spécifiques, illustrations spécifiques en entête de zones
afin de pouvoir utiliser celles-ci pour la promotion de ces pages sur les réseaux sociaux).
La stratégie de communication de Coordination SUD définit les publics susceptibles de venir sur
notre site internet.
- Les institutions administratives et politiques françaises
- Les ONG membres de Coordination SUD.
- Les ONG non membres et autres acteurs de la solidarité internationale
- Les médias
- Les individuels : personnes en recherche d’emploi, en besoin de formation (c’est une partie
importante de notre trafic).
A la suite de la stratégie de communication, nous sommes en phase finale d’élaboration d’une
nouvelle charte graphique qui sera déployée sur tous nos supports. Un logo et une palette de
couleur sera fournie.
Un besoin de hiérarchisation des contenus
Devant la masse de ressources mises en ligne et leur variété, il devient nécessaire de trouver des
solutions pour mieux présenter celles-ci. Par exemple la section documentation ne fait
actuellement qu'une présentation classée par date. Il est toutefois possible de filtrer suivant
différents critères. Il serait intéressant d'offrir d'autres possibilités d'affichage, plus visuelles,
hiérarchisées, par thématiques, collections, en dissociant les productions de Coordination SUD et
celles publiées par les membres. De même, la page d’accueil pourrait rester de forme éditoriale,
mais plus hiérarchisée, avec des regroupements thématiques.
Un besoin de valorisation transversale des contenus
Le site a une très forte fréquentation du fait de son espace emploi. En conséquence certaines offres
d'emploi dynamiques constituent des pages d'atterrissage qu'il conviendrait d'utiliser pour tenter
d'intéresser les visiteurs à d'autres sections du site (les formations par exemple). Plus largement, il
manque sur le site un ensemble d'outils permettant de promouvoir les contenus sur différentes
pages : par exemple, un bloc « publicitaire » pour promouvoir les dernières formations dans une
page formation, les dernières actus publiées, les précédents numéros d'une collection
documentaire... ou la possibilité de créer des blocs à la volée pour des promotions de contenus sur
des durées limitées. Ces blocs pourraient être créés et édités à la volée par les rédacteurs du site.
Quelques éléments directeurs pour la future présentation visuelle et
organisation du site :
• La refonte graphique et la composition pertinente des pages pourront se faire en choisissant et customisant un
thème/framework Wordpress disponible à la vente. Il devra être adapté à la charte graphique récemment
élaborée.
• Viser au minimalisme. Le graphisme ne doit pas prendre le dessus sur le contenu. Il doit être aéré. Tout élément
graphique doit avoir sa pertinence. Ce minimalisme doit être ponctué de pictographies et de formes géométriques
à même d’attirer l’attention sur les principaux contenus.
• Nous souhaitons par ailleurs donner un aspect plus humain au site, par exemple par l’utilisation d'illustrations qui
structureront les différents espaces du site.
3• Il sera donc intéressant de développer des identités visuelles spécifiques (couleurs, illustrations, signalétique) pour
faciliter les parcours des utilisateurs et des utilisatrices et bien spécifier les espaces (exemple : faciliter l'inscription
des organismes proposant des offres d'emploi, plus généralement rendre plus ergonomiques les divers formulaires
2
d’inscription, bien visualiser les différents espaces...).
• La lecture des textes doit être facilitée au maximum. C’est un élément essentiel. De plus nous prévoyons la
3
digitalisation de certaines de nos productions print . Il conviendra par ailleurs d’aérer les corps de texte en évitant
une longueur de ligne trop importante (entre 60 à 80 signes maximum). Privilégier donc les polices de grande taille.
Penser à l'interlignage, idéalement entre 140 et 160%. La taille des polices sera spécifiée en em ou vh/ww. La
justification des textes n’est pas souhaitée d’autant plus qu’elle diminue la lisibilité et l’accessibilité. Si la
4
justification est utilisée, ce pourrait être pour les blocs à faible largeur et de courte hauteur .
Nos souhaits en ergonomie :
• L'ensemble devra être "responsive".
• L’interface doit être modulaire, autorisant les rédacteurs de Coordination SUD à modifier l’organisation intérieure
des pages afin de varier la présentation, d’afficher ou non certains blocs… Cette possibilité modulaire devrait
permettre d’éviter que les pages des différents types de contenu ne se ressemblent trop. Nous souhaitons donc
que le développement du site offre à disposition des rédacteurs un outil de création de pages (type Enfold). La
prestation devra en conséquence proposer une composition pertinence et un habillage graphique des éléments
éditoriaux (bloc de texte, image, diaporama, liste d'articles, formulaire, pictogrammes, etc).
• Le choix du thème devra être fait en tenant compte de ses possibilités en termes de navigation notamment
transversale via les tags, de capacité d’organisation éditoriale et de hiérarchisation des contenus.
• Respecter la règle de prédictibilité : le fait qu’en regardant l’interface, on sait où l’on est et où sont rangés les
éléments.
• Respecter l’ordonnancement naturel du parcours du regard lors de la consultation. Jouer les effets de contraste.
• La circulation doit être confortable, naturelle et douce.
• Les pages doivent être aérées, peu chargées.
5
• Privilégier une grille éditoriale pour la page d'accueil, avec éventuellement une composition en Z . Hiérarchiser
fortement les contenus. De la même manière, idéalement, toutes les vues listant des contenus doivent permettre
une hiérarchisation.
• Un menu discret mais efficace. Par exemple comme celui présenté sur le site anglais de The Guardian. Ou sinon un
système avec des mega-menus qui se réduira en hamburger pour la version mobile du site. Une série de raccourcis
graphiques (la signalétique) permettront d'arriver directement dans certaines sections du site comme c'est le cas
actuellement. L'ensemble des menus doit rester dans le header. Prévoir éventuellement l'installation d'un menu
secondaire à afficher en colonne pour faciliter la navigation (Ce menu pourra être paramétré pour n'être affiché
que dans certaines sections du site).
2
http://forus-international.org/fr/influencer/agenda-2030
3
Ceci implique un type de contenu plus élaboré qu’actuellement avec une présentation soignée,
une gestion des notes, une plus grande variété de styles pour les exergues, encadrés…
4
Un exemple de site à bonne lisibilité : www.iddri.org
5
https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-
28
4Modalité de l’offre
Calendrier prévisionnel :
Le choix du prestataire fera l’objet d’un processus de consultation entre le 6 décembre 2018 et le
11 janvier 2019.
Si besoin des entretiens seront organisés dans les jours qui suivent et le choix du prestataire
retenu sera décidé 31 janvier 2019.
Les réponses à l’appel d’offres sont à adresser au plus tard le 11 janvier 2019 par courrier
électronique à :
Olivier Jablonski,
Chargé de communication
jablonski@coordinationsud.org
Téléphone : 01 44 72 87 15
Modalités de dépôt des offres
Nous souhaitons que la proposition soit concise avec les références les plus remarquables. Il n’est
pas souhaitable que les propositions aient une pagination importante.
Les offres devront contenir :
- les références en relation avec la mission 6, la présentation des réalisations, effectives et
consultables, en composition d’interface et habillage
les compétences techniques en conception d’interface Wordpress et d’UX design
- une méthode de travail et un calendrier prévisionnel en relation avec la mission
- un devis détaillé correspondant à l’ensemble de la prestation
- un tarif horaire et à la journée pour des productions complémentaires en dehors du champ
de l’appel d’offre (demandes supplémentaires relatives à la refonte du site internet)
Le montant ne devra pas dépasser 4000 euros TTC.
L’analyse des propositions sera faite suivant une grille :
- détail de la proposition (calendrier, méthodologie, étendue de l’accompagnement)
- analyse du book (qualité esthétique générale, structuration des interfaces, créativité,
impact, pertinence)
- expérience en conception d’interface web
- secteur d’activité : expérience de la communication associative de type plaidoyer, de la
communication institutionnelle et journalistique
- Coût de la prestation détaillée par étapes
Début de la prestation
La prestation débutera une semaine après le choix du prestataire. Les éléments devront être
fournis rapidement afin que le prestataire développeur puisse travailler. Le futur site devra être
livré au plus tard le 15 juin 2019.
6
Les références présentées devront impérativement démontrer une expérience en conception
d’interfaces éditoriales, hiérarchisées.
5Livrables (phase production après appel d’offre)
Dans un premier temps, le prestataire devra faire trois propositions de wireframes avec des
exemples de mise en situation (page d’accueil, liste de contenu, un contenu) afin de choisir
l’interface définitive. A J+15 après la validation du choix d’interface par Coordination SUD, il
proposera trois mock-ups pour cette interface en tenant compte de la nouvelle charte graphique de
Coordination SUD.
Les livrables devront être rendus à J+ 15 après la validation par Coordination SUD du choix
graphique. Les éléments de finition seront exécutés en collaboration avec l’équipe de
développement, selon les besoins constatées et lors des débugages.
Deux types de livrables sont possibles, sachant que nous préférons la première option :
- un thème Wordpress (CSS + gabarits de base wordpress)
- si les livrables sont des maquettes photoshop : une série de gabarits graphiques représentant les
grands types de gabarits que l’on trouvera sur le site.
Dans les deux cas, les livrables doivent traiter des pages suivantes :
- les éléments éditoriaux (bloc de texte, image, diaporama, liste d'articles, formulaire, liste de
pictrogrammes …)
- une page de contenu éditorial (type article d’actualité) recensant tous les cas de figure (titraille,
exergue, blocs focus, notes)
- un gabarit pour la liste des documentations tenant compte de différentes possibilités d’affichage
(par thèmes, ordre de publication, organisme de publication) et qui soit hiérarchisé.
- un gabarit pour les autres vues en liste (les actualités, les formations, les offres d’emploi, les
financements, la liste des membres) avec une description des spécifications de déclinaisons
esthétiques et d’organisation pour chaque vue.
- des indications graphiques pour les contenus de type formation, offre d’emploi, financement,
fiche membre, avec les spécifications de déclinaison pour chaque type.
- la réalisation de trois types de blocs promotionnels en colonne droite pour valoriser certains
contenus
- la page d’accueil
- une série d’illustrations qui seront affichées en haut de certaines pages (espace membre, espace
emploi, espace appel d’offres, espace prestataire)
- les éléments de signalétique
A ceci s’ajouteront les éléments de finitions à apporter durant le temps de développement du site.
Le prestataire devra livrer les éléments permettant l’intégration par le développeur dans les temps.
Conditions de paiement :
30% à la commande
30% au rendu des livrables
40% à la fin à l’achèvement du site
6Vous pouvez aussi lire
