Un site Web marketing attrayant pour permettre aux individus de prendre des décisions éclairées en matière de santé

Evolving Web a travaillé en étroite collaboration avec Planned Parenthood Direct (PPD) pour concevoir et réaliser un site Web marketing conçu pour le mobile en Drupal 10 afin d’inciter les gens à télécharger l’application Planned Parenthood Direct. Le site permet aux utilisateurs de savoir quels services en santé reproductive sont offerts dans chaque État de manière visuellement claire. Ainsi, les utilisateurs ne sont pas amenés à télécharger l’application si le service dont ils ont besoin n’est pas offert dans leur État.

Parmi nos objectifs : 

• Création d’un site bilingue sécurisé basé sur Drupal 10 qui incite les utilisateurs à télécharger l’application PPD ;
• Utilisation de l’approche « conçue pour le mobile » avec tous les produits livrables créés d’abord pour les téléphones intelligents, puis pour l’ordinateur de bureau ;
• Création d’un guide de style à partir des actifs de la marque — couleurs, typographie, images, vocabulaire, ton et éléments de conception pour fournir une esthétique visuelle globale de la marque, et ce, dans le respect des meilleures pratiques en matière d’accessibilité WCAG 2.1 AA.

Planned Parenthood Direct, une filiale à but non lucratif de la Planned Parenthood Federation of America, offre des soins nomades liés à la santé reproductive et sexuelle. Les services varient d’un État à l’autre et comprennent la contraception, le traitement des infections urinaires, la contraception d’urgence et la pilule abortive. Avec pour mission de fournir des soins de confiance de Planned Parenthood depuis n’importe où, PPDirect vise à créer et renforcer les liens entre les patients et les cliniciens, à la fois virtuellement et au sein du réseau de centres de santé de Planned Parenthood.

L’objectif principal du projet était de créer un site Web attrayant et accessible pour inciter les gens à télécharger l’application Planned Parenthood Direct. 

Les objectifs secondaires étaient : 

Veiller à ce que les utilisateurs puissent sélectionner l’État dans lequel ils se trouvent et voir les services offerts, afin d’éviter qu’ils ne téléchargent l’application pour découvrir ensuite que le service n’est pas offert et qu’ils se sentent frustrés.

Créer une nouvelle identité visuelle de marque pour Planned Parenthood Direct qui résonne avec le public cible tout en restant fidèle à la marque Planned Parenthood.

Notre contribution : 

Design : 

• Direction artistique : nous avons conçu un visuel convaincant de l’essence, des valeurs et des attributs de la marque sous la forme d’un paysage stylistique. Ce visuel a permis de définir une orientation claire qui peut être appliquée à tous les points de contact pertinents, y compris le logo, la typographie, la palette de couleurs, l’imagerie et les éléments de l’interface utilisateur.
• Maquettes fonctionnelles (maquettes graphiques haute-fidélité) : en utilisant une approche conçue pour le mobile, nous avons construit des maquettes haute-fidélité qui présentaient non seulement les parcours du public cible, mais aussi la disposition des éléments et le flux global.
• Un guide de style avec des composants qui respectent les directives d’accessibilité WCAG 2.0 et qui pourront être réutilisés dans le futur, ce qui permet au site Web d’évoluer en fonction des besoins.

Développement : 

• Utilisation de Drupal 10 pour tirer parti des dernières fonctionnalités de Drupal et pour une sécurité robuste.
• Mise en place d’une architecture découplée utilisant un cadre Next.js pour la partie frontale.
• Hébergement en nuage sur Pantheon.

Les services varient d’un État à l’autre et les utilisateurs doivent être en mesure de savoir exactement quels sont les services offerts dans leur État. Il doit également être facile pour le client de modifier les services offerts dans chaque État, car ces derniers peuvent changer. 

La sécurité a été une considération importante, car le travail du client est devenu très politisé en raison du climat politique entourant l’avortement et la planification familiale, et le site pourrait devenir la cible d’attaques. 

Afin d’offrir un service à une population large et diversifiée, il était nécessaire de pouvoir traduire le site Web en espagnol et d’ajouter facilement d’autres langues ultérieurement. Le site devait également être entièrement accessible, conformément aux normes WCAG 2.1. 

Il était primordial de respecter l’identité de la marque de Planned Parenthood tout en créant une sous-marque distincte pour Planned Parenthood Direct avec sa propre identité visuelle, qui résonne mieux avec le public cible.

Pour aider Planned Parenthood Direct à atteindre ses objectifs, nous avons utilisé une approche conçue pour le mobile, c’est-à-dire que nous avons donné la priorité aux conceptions et aux mises en page mobiles, puis nous les avons adaptées aux ordinateurs de bureau. 

Voici ce que nous avons inclus au niveau du développement : 

• Des boutons d’appel à l’action (CTA) répartis sur l’ensemble des pages, positionnés à des endroits clés pour empêcher le défilement, ainsi que des graphiques pour soutenir les appels à l’action, qui incitent continuellement les utilisateurs à télécharger l’application.
• La divulgation progressive des informations pour garantir un site épuré, combiné à des pages fonctionnelles simples et aérées pour aider les utilisateurs à trouver facilement les informations dont ils ont besoin. 
• Une page désignée pour chaque État pour que les utilisateurs puissent rapidement identifier quels services sont offerts dans leur État. En outre, ces pages spécifiques aux États optimisent les résultats des moteurs de recherche, ce qui permet aux utilisateurs de trouver plus facilement les services dont ils ont besoin lorsqu’ils effectuent des recherches en ligne. 
• Une relation entre l’État et le service qui permet aux éditeurs de contenu de supprimer ou d’ajouter facilement un service à un État. 
• Un site Web entièrement accessible, conforme aux normes WCAG 2.1, comprenant un guide de style qui garantit que l’éditeur de contenu produit du contenu accessible. 
• Une bibliothèque de composants réutilisables que le client peut utiliser pour créer de nouvelles pages et faire évoluer son site Web. 
• Afin de répondre aux préoccupations en matière de sécurité, le site Web a été construit à l’aide d’une architecture découplée comprenant une page frontale statique utilisant un cadre Next.js et une partie dorsale alimentée par Drupal.
• Le système de gestion de contenu Drupal est utilisé pour stocker le contenu qui sera utilisé pour générer les pages HTML statiques. Cela signifie que le contenu est ajouté à la partie frontale du site lorsque les fichiers HTML statiques sont construits. De cette manière, il n’y a pas de code dynamique fonctionnant sur un serveur qui puisse être exploité.
• L’hébergement sur Pantheon a également fourni plusieurs couches de protection additionnelles, y compris des certificats HTTPS entièrement gérés, et une protection DDoS pour empêcher les attaques par déni de service, ainsi qu’une architecture en nuage basée sur des conteneurs qui permet de partitionner le système d’exploitation dans des espaces dédiés.

L’un des principaux objectifs était de créer une sous-marque distincte pour le PPD, tout en respectant la marque Planned Parenthood. La défense des droits est un aspect important de Planned Parenthood et l’image de marque le reflète, avec un ton sérieux et une couleur bleu foncé comme couleur principale. Cependant, pour le site Web du PPD, le client recherchait une sous-marque différente qui résonnait davantage avec le public plus jeune et qui offrait un ton rassurant.

Voici les éléments que nous avons intégrés au design : 

• Des principes de conception qui ressemblent à ceux des médias sociaux, c’est-à-dire orientés sur les graphiques audacieux et les couleurs vives pour se démarquer du site principal de Planned Parenthood, tout en conservant certains aspects de l’image de marque, notamment la couleur bleu foncé. 
• Un ensemble d’autocollants pour ajouter une composante jeune tout en aidant à orienter visuellement les utilisateurs et à promouvoir la défense des droits et les messages de soutien. 
• Des visuels clairs pour distinguer les différents services, y compris une couleur de fond et un graphique différents pour chaque service. 
• Un ensemble de motifs audacieux pour représenter les produits de manière décomplexée, non stigmatisante et légère, dans des motifs carrés adaptés à l’approche conçue pour le mobile et utilisant la couleur blanche pour tous les motifs en tant qu’élément unificateur. 
• Un concept pour la page d’accueil qui propose une photo d’une utilisatrice sortant des pilules contraceptives de sa poche, associée au visuel de l’application, pour signifier que l’application est toujours avec vous, dans votre poche. 
• Une page blogue qui évoque le côté militant de Planned Parenthood, avec des tailles d’image dynamiques pour ajouter de l’intérêt visuel et des messages de soutien comme « soyez fortes » et « faites entendre votre voix » pour faire honneur aux racines militantes Planned Parenthood.

Le nouveau site Web est un site Drupal 10 robuste, sécuritaire et découplé qui est stratégiquement conçu pour inciter les utilisateurs à télécharger l’application PPD tout en offrant des informations pertinentes, dans un format clair. Pour s’assurer qu’il résonne bien avec le public cible, il fait appel à une approche conçue pour le mobile et une image de marque distincte, qui propose des couleurs audacieuses et des messages de soutien et de déstigmatisation. Le nouveau site Web de Planned Parenthood Direct est essentiel pour continuer à mettre de l’avant les droits reproductifs et garantir l’accès aux soins de santé reproductive et sexuelle, qui sont aujourd’hui plus nécessaires que jamais.