Conception d'une expérience de newsletter fluide pour les électeurs de Boston.

Nous publions et envoyons régulièrement plus de 65 lettres d'information provenant de différents services de la ville afin d'informer les résidents sur ce qui se passe à Boston. Le problème est que, avec autant de lettres d'information envoyées, elles manquent souvent de cohérence visuelle entre les services et l'expérience de nos abonnés peut varier.

Cet été, nous avons collaboré avec une équipe d'expérience utilisateur de General Assembly pour examiner tous nos bulletins d'information, ainsi que le processus de création de ces derniers. Le groupe a étudié nos processus actuels afin de concevoir de meilleures solutions pour les bulletins d'information. L'article de blog ci-dessous, relatant leurs conclusions, a été rédigé par les membres de la promotion General Assembly avec lesquels nous avons travaillé : Marjorie Mesnis , Max Nagel et Kateryna Zabrodska .

---

Premiers pas

La ville de Boston cherchait à améliorer l'expérience utilisateur pour les newsletters des différents services. Cependant, elle avait un large éventail de questions à clarifier ou à traiter. En fin de compte, nous avons réduit notre champ d'action à deux domaines principaux :

1. Comprendre les systèmes en place pour l'envoi des newsletters
2. Revoir la mise en forme et la présentation des e-mails

Les questions qui ont guidé notre travail étaient les suivantes :

• Quelles sont les meilleures pratiques et approches que nous pouvons recommander aux services lorsqu'ils préparent leurs lettres d'information afin de garantir une expérience plus harmonieuse pour toutes les lettres d'information de la ville ?
• Y a-t-il des modifications que nous devrions ou pourrions apporter au système de newsletter de la ville, par exemple en ce qui concerne les paramètres et les modèles ? Y a-t-il également des modifications que nous devrions ou pourrions apporter à la manière dont nous envoyons les newsletters afin de permettre à nos rédacteurs de contenu de mieux utiliser le système ?

---

Qui est notre utilisateur ? À qui devons-nous nous adresser ?

Avant de pouvoir concevoir des solutions, nous devions comprendre pour qui nous allions concevoir. L'utilisateur de notre lettre d'information est-il un habitant de Boston ? Ou bien concevons-nous pour les employés de la ville de Boston qui envoient actuellement ces lettres d'information ?

Processus et outils

D'après nos entretiens avec les lecteurs de nos lettres d'information , nous avons pu identifier les comportements suivants :

• les utilisateurs consultent rapidement le contenu des newsletters
• les utilisateurs apprécient les lignes d'objet d'e-mail claires
• les utilisateurs cliquent surtout sur les images et les visuels
• les utilisateurs pensent que les newsletters doivent être courtes, et
• les utilisateurs estiment que l'information doit être pertinente et facile à lire.

Pour en savoir plus sur le processus municipal de création de lettres d'information, nous avons interrogé des rédacteurs de contenu de divers services municipaux. À ce stade, nous avons réalisé que les rédacteurs seraient nos principaux utilisateurs, car ils sont responsables de la création d'une expérience utilisateur positive pour les citoyens.

En discutant avec les employés de la ville, nous avons découvert qu'ils :

• Je souhaite plus de personnalisation concernant la mise en forme et les fonctions de disposition.
• Je pense que de meilleures directives concernant la taille des éléments visuels pourraient être utiles.
• donner la priorité aux types d'informations dans les lettres d'information
• ont deux objectifs : communiquer les dernières nouvelles du service et de la ville, et rediriger vers le site web de la ville, et
• Je pense que les boutons aident à attirer l'attention sur les appels à l'action.

Notre deuxième méthode de recherche a consisté en des tests d'utilisabilité . Elle a consisté à montrer aux lecteurs quelques-uns des newsletters existantes et à leur demander de commenter la structure de l'information, le contenu fourni et la mise en page.

Grâce à cette méthode, nous avons défini les opportunités suivantes à prendre en compte dans notre conception :

• La taille actuelle du texte utilisé dans les newsletters était trop petite pour être lue sur mobile.
• Les utilisateurs ont remarqué que toutes les images n'étaient pas cliquables et que le grand nombre de liens était source de confusion. En cliquant sur un lien, ils étaient redirigés hors de la newsletter et ne revenaient pas pour poursuivre leur lecture.
• De nombreux bulletins d'information contiennent des annonces importantes et actuelles de la ville, telles que les élections, le recensement ou le COVID-19. Cependant, chaque bulletin présentait ces annonces de manière différente. Souvent, la mise en page, les images, les tableaux et les liens variaient. Cela pouvait amener le lecteur à se questionner sur l'objectif du bulletin.

Afin de mieux comprendre comment les lecteurs de newsletters interagissent avec le contenu, nous avons mené une enquête anonyme auprès de 28 participants. Notre objectif était d'en apprendre davantage sur les attentes et les habitudes des lecteurs en matière de newsletters :

Résultats de notre enquête :

• Parmi nos participants, 100 % consacrent cinq minutes ou moins à la lecture des newsletters et 64 % répondent davantage aux images cliquables qu'au texte hyperlié.
• Dans la grande majorité des cas, les utilisateurs consultent le contenu en lisant le titre et ne se connectent qu'avec le contenu pertinent.
• Les lignes d'objet des e-mails attirent l'attention des lecteurs et sont plus importantes que l'expéditeur.

Grâce à toutes ces recherches, nous avons pu affiner notre approche pour les rédacteurs de contenu de la ville. Cela nous a permis de mieux répondre à leurs besoins en tant que communicateurs, ainsi que de concevoir un modèle de newsletter qui serait également bénéfique pour les abonnés.

---

Que font les autres grandes villes, et quelles sont les meilleures pratiques du secteur ?

Un audit des performances des newsletters existantes nous a permis de comprendre quelles informations les lecteurs trouvent précieuses et comment ils interagissent avec le contenu à l'écran.

Nous avons constaté que, pour la majorité des lettres d'information de la ville, les performances étaient généralement très bonnes. Les citoyens sont généralement très impliqués dans ce que la ville leur envoie et ont tendance à cliquer sur le contenu des lettres d'information. Ainsi, notre défi de conception a consisté à rendre les e-mails encore plus accessibles et attrayants, tout en respectant le succès que les e-mails précédents ont déjà obtenu.

À un niveau plus granulaire, nous avons commencé à examiner les cartes thermiques et les analyses d'interaction des newsletters précédentes. Nous avons remarqué que les destinataires ont tendance à cliquer sur les hyperliens qui ne sont pas intégrés au corps du texte. Ils préfèrent également cliquer sur les liens situés à gauche de l'écran dans un format à deux colonnes. Notre conclusion à partir de ces cartes thermiques était que nous devions réduire le nombre de zones cliquables. Nous devions choisir intentionnellement l'emplacement des liens à l'écran et dans le contenu de la newsletter.

À cette étape, nous voulions également savoir comment d'autres villes des États-Unis publiaient leurs lettres d'information. Après avoir effectué une analyse comparative des lettres d'information publiées par d'autres grandes villes américaines, nous avons constaté que :

• Boston comptait le plus grand nombre de lettres d'information (62 contre une moyenne de 20).
• La plupart des lettres d'information limitent le contenu à sept sujets ou moins, créant généralement une ou deux pages de contenu.
• Soixante-cinq pour cent des villes incluent moins de huit liens dans leurs lettres d'information.

---

Conception d'une solution

Nous avons défini un problème à résoudre pour notre travail. Les rédacteurs de contenu ont besoin d'un meilleur moyen de diffuser les lettres d'information de la ville, qui :

• suivre les meilleures pratiques du secteur
• respecter les directives de conception de la ville, et
• rester accessibles à tous les lecteurs afin d'améliorer l'expérience et le flux d'information auprès des électeurs.

Nous avons également signalé les points sensibles que nous devrions prendre en compte dans notre conception finale :

• Soyez concis (moins de 5 minutes).
• Assurer la cohérence visuelle et éditoriale des publications.
• Impliquez les utilisateurs par des éléments visuels plutôt que par des hyperliens.
• Il est important de se rappeler que les lettres d'information constituent un moyen rapide et informatif de communiquer avec les électeurs.
• La conception doit être responsive et accessible.

Après avoir identifié le problème, il était temps de réfléchir et de faire un brainstorming pour trouver une solution. Grâce à ce processus, nous avons élaboré des esquisses de mises en page et avons ensuite affiné les composants utiles que nous avons mis en place sous forme de maquettes numériques.

Premièrement, nous avons créé trois modèles proposant différentes solutions aux points de friction. Ensuite, nous avons réalisé un test d'utilisabilité pour identifier la réaction des utilisateurs aux nouvelles mises en page. Notre objectif était d'affiner les composants les plus efficaces pour attirer l'attention de l'utilisateur.

---

Concevoir les composants un par un

Afin d'affiner notre conception initiale, nous avons demandé à des utilisateurs d'interagir avec différents composants des newsletters de la ville. Au cours de nos recherches, nous avons continué à itérer sur les sections suivantes du modèle de newsletter :

Structure du texte et de l'image

Nous voulions utiliser un modèle qui permette de mieux contrôler la quantité de contenu et la longueur globale des newsletters. À cette fin, nous avons conçu trois modèles qui structuraient le nombre de caractères à l'aide de cadres et d'autres restrictions. Nous avons également adopté une approche « mobile first » pour le design afin de garantir une lisibilité facile du contenu, même sur les écrans plus petits.

Le deuxième problème que nous voulions résoudre était le nombre d'hyperliens dans les newsletters existantes. Notre solution a consisté à concevoir un bouton simple qui attire l'attention des lecteurs et élimine le contenu cliquable excessif ainsi que la longueur de l'e-mail.

Lors des tests d'utilisabilité, nous avons constaté que les utilisateurs appréciaient l'aspect du texte encadré dans la version 1 (à gauche), mais qu'ils le trouvaient plus difficile à lire que dans les versions 2 et 3. De plus, le texte inséré dans une image n'est parfois pas reconnu par les lecteurs d'écran. Cela limite l'accessibilité du contenu pour les personnes malvoyantes.

Cela nous a amenés à exclure les versions 1 et 3 et à utiliser la version 2 (au milieu), qui suit les recommandations de l'American Disability Act (ADA) .

L'en-tête

Notre processus d'itération de conception comprenait des tests d'utilisabilité sur des composants uniques des newsletters. Ci-dessous, vous pouvez voir les solutions de conception pour les en-têtes de newsletter, tant pour le bureau que pour le mobile.

Bannière d'annonce de la ville

Afin d'assurer une cohérence de contenu dans les lettres d'information et de communiquer les annonces de manière efficace et efficiente, nous avons conçu une bannière. Les graphiques ci-dessous présentent différentes versions du design, utilisant l'iconographie existante de la ville. Cette bannière a été conçue pour s'harmoniser avec les styles de bannières existants sur Boston.gov, dans le but de créer une expérience utilisateur cohérente à la fois dans les lettres d'information et sur le site web de la ville.

Dans le cadre de notre travail, nous avons développé des graphiques cliquables simples avec des éléments de texte et de boutons. Nous voulions comprendre comment les utilisateurs interagiraient avec les différents composants. Les tests ont montré que les icônes placées dans des carrés avec un texte incitatif et des flèches pour rediriger les lecteurs vers Boston.gov étaient les plus efficaces pour attirer l'attention de l'utilisateur.

Les boutons bleus sont les principaux appels à l'action dans les e-mails de la Ville. Nous avons constaté que les boutons bleus dans la bannière des annonces détournaient l'attention de l'utilisateur des boutons situés dans la section principale du contenu de la newsletter. Nous les avons donc supprimés.

Bannière de contenu récurrent par département

L'objectif de l'utilisation d'icônes de composants simples était de raccourcir la longueur de la newsletter en compilant le contenu récurrent dans des icônes cliquables simples :

Pour chaque département, nous avons remarqué que de nombreux bulletins d'information contenaient le même contenu et les mêmes ressources que ceux des autres départements de la ville. Nous avons estimé qu'une solution précieuse aux longs textes serait de créer des icônes cliquables et réutilisables.

En ajoutant ce type de section aux modèles de ville, vous pourriez :

• économiser de l'espace et raccourcir les newsletters, les rendant ainsi plus faciles à lire.
• instaurer des habitudes chez les lecteurs qui les familiarisent avec les icônes, et
• regrouper toutes les informations et ressources nécessaires en un seul endroit dans tous les bulletins d'information de la ville.

---

Dernières réflexions

En réduisant la quantité de texte et en regroupant les actions du lecteur dans chaque section en un seul bouton dans notre conception, nous avons pu rendre les newsletters consultables et lisibles en moins de cinq minutes. Le regroupement des informations à l'aide d'icônes nous a également permis de maintenir la quantité d'informations partagées avec les lecteurs tout en les gardant organisées et accessibles.

Nous espérons que ce nouveau design permettra à la ville de Boston de présenter les informations dans ses lettres d'information de manière plus claire et plus organisée. Nous souhaitons que les résidents de Boston bénéficient d'une expérience cohérente et limpide, avec des informations faciles à comprendre.

---

General Assembly propose des formations accélérées pour acquérir des compétences très demandées dans le secteur technologique. Les étudiants avec lesquels nous avons travaillé faisaient partie du programme intensif de conception d'expérience utilisateur de l'été 2020. Leur travail sur les newsletters de la ville de Boston était un projet final qu'ils ont réalisé en trois semaines. Les étudiants qui ont participé à ce projet étaient Marjorie Mesnis , Max Nagel et Kateryna Zabrodska .