All Posts By

Claire Lavergne

Atelier avec Badsender : concevoir son interface utilisateur

By | Stratégie de communication | No Comments

Badsender est une agence de conseil spécialisée dans l’emailing et plus largement dans la mise en place de campagne eCRM.

Nous avons travaillé autour de sa problématique :

Comment articuler le blog à forte audience et le site de l’agence moins connu afin de favoriser de nouvelles visites ?

—–

Pour répondre à cette problématique, un travail en co-conception de leur équipe et de la nôtre a été mis en œuvre.
Notre mission : concevoir une nouvelle interface utilisateur créative, fonctionnelle et flexible.

L’atelier s’est déroulé sur 2 jours :

« Comprendre, diverger, décider, prototyper »

  • Jour 01
    ETAT DES LIEUX : projet global 

    Faisons un point sur le projet afin que nous en décelions tous les enjeux.
    – Origine et raisons de la demande
    – Mise au point sur le cahier des charges
    – Définition de la problématique

    DIVERGER ET DÉCIDER : site de l’agence

    Ouvrons le plus de portes possibles afin de répondre à la problématique définie :
    – Chercher, analyser, organiser l’interface
    – Se mettre d’accord sur la / les solutions les plus pertinentes


PROTOTYPER : site de l’agence

Construisons l’ergonomie, l’architecture de l’interface sous forme de croquis

  • Jour 02
    DIVERGER ET DÉCIDER : le blog
    PROTOTYPER : le blog

    PLANIFIER
    Organisons la production des 2 interfaces.

JOUR 01

Ice breaker

Nous commençons toujours nos ateliers par un ice breaker pour briser la glace, se détendre et se mettre en condition. Rien de tel pour faire connaissance rapidement !

Notre ice breaker : BANDIDO

Bandido est un jeu collaboratif. Ensemble, l’équipe unit ses forces pour empêcher le bandit de s’évader de prison.

Bon d’accord, ce jour-là Bandido a réussi à nous avoir, mais il n’aura pas cette chance la prochaine fois !

Etat des lieux

On se met tous autour de la table et c’est à Jonathan, le fondateur de Badsender, de nous parler de son entreprise, de ses missions et de nous expliquer ses besoins ainsi que ses problématiques.
C’est parti pour des questions, des reformulations et un échange sur la définition du besoin et sur l’existant.
Marion, son associée, intervient également pour amener une autre approche très intéressante.

Diverger

Nous sommes ensuite passé à la présentation du Mind map réalisé par Jonathan pour le site de l’agence.

Pour se faire, nous utilisons l’outil MindMeister.

Un mind map, c’est quoi ? C’est un outil pour représenter visuellement l’arborescence du site : les rubriques, les pages, le contenu…

De cette manière, nous pouvons profiter d’une vue d’ensemble du site ce qui nous permet facilement de pouvoir prendre du recul sur celui-ci.

Nous projetons cette map, tout le monde debout et on chamboule tout !
On se questionne sur le nom des rubriques, sur les contenus imbriqués dans ces catégories, tout en prenant soin de penser à l’optimisation de l’expérience utilisateur.

Décider

Des décisions font suite à ces échanges.

Jonathan et Marion n’étaient pas forcement d’accord sur certains choix, nous étions là avec Annabelle (chef de projet) pour les guider et les recentrer sur le besoin.

Prototyper

C’est le moment de prendre les feutres et du papier pour prototyper les pages du site de l’agence.

Un prototype, c’est quoi ? Ici nous réalisons un prototype du site web sous forme d’esquisses pour détailler la construction de chaque page ainsi que le placement du contenu.

On commence par une page inter standard puis nous passons ensuite aux pages spécifiques. On met en place les éléments récurrents, le haut (header) et le bas (footer) de la page.

Nous terminons par la page d’accueil (home), vitrine du site. Celle-ci doit mettre en valeur le contenu le plus important pour l’utilisateur.

Nous faisons bien attention à ce que nous appelons « la zone chaude » en haut de page. Il s’agit de la partie de la page qui sera la plus visible et par conséquent la plus regardée. Enfin, on hiérarchise et on définit des zones pour inviter l’internaute à visiter les pages inters.

Un travail de construction commun et efficace qui nous permettra de nous projeter dans une interface dynamique.

Le premier jour d’atelier est terminé, on se retrouve demain pour la conception de l’arborescence et du prototype du blog 🙂

JOUR 02

Après un bon café et un récap du premier jour, nous voilà reparti sur l’étape « Diverger et décider » concernant l’arborescence du blog.

Ensemble, nous validons le Mind map de l’arborescence puis passons au prototypage. Ces étapes représentent moins de temps de travail que le jour précédent car le blog a une structure moins complexe que le site de l’agence.

Une fois le prototype finalisé, nous travaillons sur la problématique la plus ardue :
Comment proposer une expérience agréable et une navigation fluide aux utilisateurs entre le blog et l’agence ?
Notre challenge est de coupler les 2 interfaces, une personne arrivant sur le blog devra pouvoir aller facilement sur l’agence et vice versa.

Notre solution : créer une page portail à la première visite de l’internaute qui proposera 2 entrées.

Pour valider l’aspect technique, Jean-Baptiste, développeur et expert WordPress, est intervenu durant l’atelier pendant 1 heure. Le prototype des 2 interfaces lui a été présenté. Cet échange a permis d’affiner notre concept et de valider celui-ci.

Il est essentiel pour la conception d’une interface complexe de valider celle-ci avec la personne en charge du développement du site.

La communication entre le client, le chef de projet, le designer et le développeur est primordiale pour la réussite d’un projet.

Le + de l’atelier ?

Cet atelier nous a permis de mettre en évidence les bonnes questions, d’y répondre de manière collaborative et d’élaborer un concept adapté au besoin.

Réaliser un atelier en amont d’un projet est un réel gain de temps et gage de qualité pour la suite. Nous savons clairement, clients et équipes internes, quelles lignes directrices nous devons suivre.

Cette ambiance de travail positive et dynamique est propice au bon déroulé de la suite du projet.

Prochaine étape, le design et le développement de ces 2 interfaces.

Merci à Badsender pour leur confiance 🙂

Kraft and You – Comment aider mes utilisateurs à commander un produit adapté ?

By | Etude de cas | No Comments

Badsender est une agence de conseil spécialisée dans l’emailing et plus largement dans la mise en place de campagnes eCRM. Nous avons travaillé autour de sa problématique :

Comment articuler le site de l’agence moins connu
et le blog qui a une forte audience ?

—–

Pour répondre à cette problématique, un travail en co-conception de leur équipe et de la notre a été mis en oeuvre.
Notre mission : concevoir une nouvelle interface utilisateur créative, fonctionnelle et flexible.
« Comprendre, diverger, décider, prototyper »

Nous avons organisé un atelier sur 2 jours :

  • Jour 01
    ETAT DES LIEUX : projet global 
    comprendre de quoi nous parlons :
    – origine et raisons de la demande
    – mise au point sur le cahier des charges
    – définition de la problématique

    DIVERGER ET DÉCIDER : site agence

    ouvrir le plus de portes possible :
    – chercher, analyser, organiser l’interface
    – se mettre d’accord sur la / les solutions les plus pertinentes afin de répondre à la
    problématique posée

    PROTOTYPER : site agence

    construire l’ergonomie l’architecture de l’interface sous forme de croquis
  • Jour 02
    DIVERGER ET DÉCIDER : blog
    PROTOTYPER : blog

    PLANIFIER
    organiser la production des 2 interfaces

badsender

JOUR 01

Ice breaker

Nous commençons toujours nos ateliers par un ice breaker pour briser la glace, se détendre et se mettre en condition.

Notre ice breaker : BANDIDO
Bandido tente encore de s’évader de prison, unissez vos forces pour l’arrêter !
10 min de jeu c’est parti ! Bon Bandido s’est échapper mais nous n’avons pas dit notre dernier mot 🙂

Etat des lieux

On se met tous autour de la table et c’est à Jonathan le fondateur de Badsender de nous parler de son entreprise, ces missions et expliquer son besoin et ses problématiques.
C’est parti pour des questions, des reformulations et un échange sur la définition du besoin et sur l’existant.
Marion, son associée, intervient également pour amener une autre approche très intéressante.

Diverger

Nous sommes ensuite passé à la présentation du Mad map réalisé par Jonathan pour le site de l’agence. Pour réaliser un Mind map nous utilisons gloomaps 
https://vimeo.com/212103232 / MINDMEISTER

Un mind map c’est quoi ? C’est un outil pour représenter visuellement l’arborescence du site : les rubriques, les pages, le contenu

On projette cette map, tout le monde debout et on chamboule tout !
On se questionne sur le nom des rubriques, qu’est ce qu’il y a derrière, comment améliorer l’experience utilisateur.

Décider

Jonathan et Marion n’étaient pas forcement d’accord sur certains choix, nous étions là avec Annabelle (chef de projet) pour les guider et recentrer sur le besoin.

Prototyper

C’est le moment de prendre les feutres et du papier pour prototyper les pages du site de l’agence.

Un prototype c’est quoi ? Ici nous réalisons un prototype du site web sous forme d’esquisses pour détailler la construction de chaque page et son contenu.

On commence par une page inter standard puis les pages spécifiques. On met en place les éléments récurrents, le haut (header) et le bas (footer) de la page.

On termine par la page d’accueil (home) vitrine du site, elle doit mettre en forme le contenu le plus important pour l’utilisateur. On fait bien attention à la zone chaude en haut de page qui sera la plus visible. On hiérarchise et défini des zones pour inviter l’internaute à visiter les pages inters.

Un travail de construction commun et efficace qui nous permettra de nous projeter dans une interface dynamique.

Le premier jour d’atelier est terminé, on se retrouve demain pour la conception de l’arborescence et du prototype du blog 🙂

JOUR 02

Après un bon café et un récap du premier jour, nous voilà reparti sur « diverger et décider » l’arborescence du blog. Réalisation et validation du Mind map puis on se lance sur le prototypage.

Une fois le prototype finalisé, nous travaillons sur la problématique la plus complexe :
Comment proposer une expérience agréable et une navigation fluide aux utilisateurs entre le blog et l’agence ?
Notre challenge est de coupler les 2 interfaces, une personne arrivant sur le blog devra pouvoir aller facilement sur l’agence et vice versa.

Solution : créer une page portail à la première visite de l’internaute qui proposera 2 entrées.

Pour valider l’aspect technique, Jean-Baptiste développeur et expert WordPress est venu durant 1 heure. Nous lui avons présenté le prototype des 2 interfaces. Cet échange a permis d’affiner notre concept et de valider celui ci.

Il est important pour la conception d’une interface complexe de valider avec la personne en charge du développement du site. La communication entre le client, le chef de projet, le designer et le développeur est primordiale pour la réussite d’un projet.

Conclusion

Ces ateliers nous ont permis d’élaborer un concept pertinent répondant avec plus de précision aux besoins de notre client.

Nous avons également créer un lien de confiance avec celui-ci et une ambiance de travail positive et dynamique.

Prochaine étape, le design et le développement de ces 2 interfaces.

Merci à Badsender pour leur confiance 🙂

Badsender – Comment réorganiser l’experience utilisateur de nos 2 sites web ?

By | Etude de cas | No Comments

Badsender est une agence de conseil spécialisée dans l’emailing et plus largement dans la mise en place de campagnes eCRM. Nous avons travaillé autour de sa problématique :

Comment articuler le site de l’agence moins connu
et le blog qui a une forte audience ?

—–

Pour répondre à cette problématique, un travail en co-conception de leur équipe et de la notre a été mis en oeuvre.
Notre mission : concevoir une nouvelle interface utilisateur créative, fonctionnelle et flexible.
« Comprendre, diverger, décider, prototyper »

Nous avons organisé un atelier sur 2 jours :

  • Jour 01
    ETAT DES LIEUX : projet global 
    comprendre de quoi nous parlons :
    – origine et raisons de la demande
    – mise au point sur le cahier des charges
    – définition de la problématique

    DIVERGER ET DÉCIDER : site agence

    ouvrir le plus de portes possible :
    – chercher, analyser, organiser l’interface
    – se mettre d’accord sur la / les solutions les plus pertinentes afin de répondre à la
    problématique posée

    PROTOTYPER : site agence

    construire l’ergonomie l’architecture de l’interface sous forme de croquis
  • Jour 02
    DIVERGER ET DÉCIDER : blog
    PROTOTYPER : blog

    PLANIFIER
    organiser la production des 2 interfaces

badsender

JOUR 01

Ice breaker

ice breakerNous commençons toujours nos ateliers par un ice breaker pour briser la glace, se détendre et se mettre en condition.

Notre ice breaker : BANDIDO
Bandido tente encore de s’évader de prison, unissez vos forces pour l’arrêter !
10 min de jeu c’est parti ! Bon Bandido s’est échapper mais nous n’avons pas dit notre dernier mot 🙂

 

Etat des lieux

On se met tous autour de la table et c’est à Jonathan le fondateur de Badsender de nous parler de son entreprise, ces missions et expliquer son besoin et ses problématiques.
C’est parti pour des questions, des reformulations et un échange sur la définition du besoin et sur l’existant.
Marion, son associée, intervient également pour amener une autre approche très intéressante.

Diverger

Nous sommes ensuite passé à la présentation du Mad map réalisé par Jonathan pour le site de l’agence. Pour réaliser un Mind map nous utilisons gloomaps 
https://vimeo.com/212103232 / MINDMEISTER

DIVERGERUn mind map c’est quoi ? C’est un outil pour représenter visuellement l’arborescence du site : les rubriques, les pages, le contenu

On projette cette map, tout le monde debout et on chamboule tout !
On se questionne sur le nom des rubriques, qu’est ce qu’il y a derrière, comment améliorer l’experience utilisateur.

Décider

Jonathan et Marion n’étaient pas forcement d’accord sur certains choix, nous étions là avec Annabelle (chef de projet) pour les guider et recentrer sur le besoin.

Prototyper

C’est le moment de prendre les feutres et du papier pour prototyper les pages du site de l’agence.

prototype

Un prototype c’est quoi ? Ici nous réalisons un prototype du site web sous forme d’esquisses pour détailler la construction de chaque page et son contenu.

On commence par une page inter standard puis les pages spécifiques. On met en place les éléments récurrents, le haut (header) et le bas (footer) de la page.

prototypeOn termine par la page d’accueil (home) vitrine du site, elle doit mettre en forme le contenu le plus important pour l’utilisateur. On fait bien attention à la zone chaude en haut de page qui sera la plus visible. On hiérarchise et défini des zones pour inviter l’internaute à visiter les pages inters.

Un travail de construction commun et efficace qui nous permettra de nous projeter dans une interface dynamique.

Le premier jour d’atelier est terminé, on se retrouve demain pour la conception de l’arborescence et du prototype du blog 🙂

 

JOUR 02

Après un bon café et un récap du premier jour, nous voilà reparti sur « diverger et décider » l’arborescence du blog. Réalisation et validation du Mind map puis on se lance sur le prototypage.

Une fois le prototype finalisé, nous travaillons sur la problématique la plus complexe :
Comment proposer une expérience agréable et une navigation fluide aux utilisateurs entre le blog et l’agence ?
Notre challenge est de coupler les 2 interfaces, une personne arrivant sur le blog devra pouvoir aller facilement sur l’agence et vice versa.

Solution : créer une page portail à la première visite de l’internaute qui proposera 2 entrées.

Pour valider l’aspect technique, Jean-Baptiste développeur et expert WordPress est venu durant 1 heure. Nous lui avons présenté le prototype des 2 interfaces. Cet échange a permis d’affiner notre concept et de valider celui ci.

Il est important pour la conception d’une interface complexe de valider avec la personne en charge du développement du site. La communication entre le client, le chef de projet, le designer et le développeur est primordiale pour la réussite d’un projet.

Conclusion

Ces ateliers nous ont permis d’élaborer un concept pertinent répondant avec plus de précision aux besoins de notre client.

Nous avons également créer un lien de confiance avec celui-ci et une ambiance de travail positive et dynamique.

Prochaine étape, le design et le développement de ces 2 interfaces.

Merci à Badsender pour leur confiance 🙂

Concevoir votre Interface utilisateur

By | Interface utilisateur

“Comprendre, diverger, décider, prototyper”

Mettre en place votre interface utilisateur consiste à travailler l’architecture de votre site internet.
Dans le cas d’un lancement de projet ou d’une entreprise existante.

1

COMPRENDRE

- De quoi parle-t'on : origines et raisons de votre demande
- Faisons le point sur votre cahier des charges
- Définissons la problématique

2

DIVERGER ET DÉCIDER

- ouvrons le champ des possibles : chercher, analyser, organiser votre interface
- se mettre d’accord sur la / les solutions les plus pertinentes afin de répondre à la problématique posée
3

PROTOTYPER

- Construire le prototype (ergonomie) de votre interface pour valider l'expérience utilisateur avant de passer à l'action.

Tarif
pour 1 à 4 personnes

650€HT

Ce tarif comprend :
• Préparation de l’atelier en amont
• Animation d’une session de 2h dans vos ou dans mes locaux
• Animation en binôme avec Annabelle, chef de projet digital
• Récapitulatif écrit de l’atelier
2 ou 3 cessions sont généralement nécessaire pour cet atelier car le prototypage demande du temps en fonction de la complexité du projet.
Je peux adapter cet atelier sur-mesure

Promesse

Pendant l’atelier vous apprendrez à cibler vos objectifs stratégiques sur vos utilisateurs, à définir votre arborescence, et mettre en forme l’architecture de votre site. Vous serez prêt à lancer le design et le développement de votre site.

Rendu

  • Récapitulatif de l’atelier
  • Conclusion de l’atelier
  • Prototype de votre interface web (croquis)

Options

Pour optimiser le bénéfice de cet atelier :
• Réaliser un prototypage dynamique pour mieux tester votre interface et l’expérience utilisateur
• Réaliser des tests utilisateurs pour valider la structure

Cet atelier correspond
à vos besoins ?

Contactez moi pour en savoir plus
ou pour fixer la date de l’atelier 🙂

Cadrer votre projet de site internet

By | Site internet

“Cadrer, analyser, structurer”

Avant de lancer la réalisation de votre site internet il est nécessaire de cadrer votre demande en réalisant un cahier des charges.
Dans le cas d’un lancement de projet ou d’une entreprise existante.

1

CADRER

- De quoi parle-t'on : origines et raisons de votre demande
- Faisons le point sur vos objectifs, vos demandes spécifiques, vos freins, votre organisation
- Définissons un cadre idéal à la réussite de votre projet
2

ANALYSER

- analysons ensemble le cadre établi pour prioriser les actions
- ouvrons le champ des possibles : voir les options et évolutions sur le long terme pour un site évolutif
- se mettre d’accord sur la / les solutions les plus pertinentes afin de répondre à la problématique posée
3

STRUCTURER

- expliquer clairement et simplement votre demande
- lister vos besoins opérationnels
- établir un pré-planning
- choisir la technologie adaptée à votre projet

Tarif
pour 1 à 4 personnes

650€HT

Ce tarif comprend :
• Préparation de l’atelier en amont
• Animation d’une session de 2h dans vos ou mes locaux
• Animation en binôme avec Annabelle, chef de projet digital
• Récapitulatif écrit de l’atelier
Une deuxième cession peut être nécessaire en fonction de vos besoins.
Je peux adapter cet atelier sur-mesure

Promesse

Pendant l’atelier vous apprendrez à cadrer votre demande pour aider à la réussite de votre projet web. Vous aurez la matière pour monter votre cahier des charges.

Rendu

  • Récapitulatif de l’atelier
  • Conclusion de l’atelier, pré-requis pour réaliser votre cahier des charges

Options

Pour optimiser le bénéfice de cet atelier :
• Réaliser un cahier des charges par un professionnel (moi par exemple !)

Cet atelier correspond
à vos besoins ?

Contactez moi pour en savoir plus
ou pour fixer la date de l’atelier 🙂

Faire naître votre Identité de marque

By | Identité de marque

“Découvrir, valoriser, cibler, dessiner ”

Un atelier pour vous aider à trouver une image de marque sur-mesure. Un logotype avec des valeurs fortes et pertinentes.
Dans le cas d’un lancement de projet ou d’une entreprise existante

1

DÉCOUVRIR

- De quoi parle-t'on : découvrir votre histoire et celle de votre entreprise
- Faisons le point sur vos besoins identitaires, vos valeurs différenciantes
2

VALORISER ET CIBLER

- définissons vos valeurs, listons des mots clés pour définir votre entreprise, votre marque
- cibler votre image pour un message et une image claire et impactante
3

DESSINER

- croquer les premières idées
- affiner les pistes

Tarif
pour 1 à 4 personnes

650€HT

Ce tarif comprend :
• Préparation de l’atelier en amont
• Animation d’une session de 2h dans vos ou dans mes locaux
• Animation en binôme avec Annabelle, chef de projet digital
• Récapitulatif écrit de l’atelier
Une deuxième cession peux être nécessaire en fonction de vos besoins.
Je peux adapter cet atelier sur-mesure

Promesse

Pendant l’atelier vous apprendrez à simplifier votre présentation, ordonner vos idées, et imager votre entreprise. Vous aurez la matière pour réaliser un logotype pertinent qui s’appui sur des valeurs fortes.

Rendu

  • Récapitulatif de l’atelier
  • Conclusion de l’atelier, pistes et pré-croquis

Options

Pour optimiser le benefice de cet atelier :
• Faire réaliser vos pistes créatives par un professionnel (moi par exemple ! )

Cet atelier correspond
à vos besoins ?

Contactez moi pour en savoir plus
ou pour fixer la date de l’atelier 🙂

Monter votre stratégie de communication

By | Stratégie de communication

“Dresser un état des lieux, définir des objectifs, élaborer une stratégie”

Un atelier dans lequel vous apprendrez à déterminer vos besoins stratégiques pour mettre en place en plan de communication.
Dans le cas d’un lancement de projet ou d’une entreprise existante.

1

ETAT DES LIEUX

- De quoi parle-t'on? : votre offre / vos cibles / vos concurrents / votre positionnement / vos valeurs
- Faisons le point sur votre image de marque/ les supports en place / les actions déjà menées / vos ressources / votre projet / vos ambitions
2

OBJECTIFS

- Définissons vos objectifs / les contraintes, les freins / vos besoins réels à court et à long terme
3

STRATEGIE

Établir une ligne directrice, choisir les actions à mener et les prioriser.

Tarif
pour 1 à 4 personnes

900€HT

Ce tarif comprend :
• Préparation de l’atelier en amont
• Animation d’une session de 2h dans vos ou mes locaux
• Animation en binôme avec Laure experte en communication d’entreprise depuis 15 ans
• Récapitulatif écrit de l’atelier
Une deuxième cession peut être nécessaire en fonction de vos besoins.
Je peux adapter cet atelier sur-mesure.

Promesse

Pendant cet atelier, vous apprendrez à définir vos besoins et à mettre en lumière les éléments nécessaires pour vous aider à monter une stratégie de communication efficience.

Rendu

  • Récapitulatif des différentes étapes de l’atelier
  • Conclusion et clés pour votre stratégie 

Options

Pour optimiser le bénéfice de cet atelier :
• Faire une réunion de restitution permettant d’amorcer le travail sur les supports de communication ou la mise en place d’un plan de communication.
• Réaliser un Plan de communication sur 1 an

Cet atelier correspond
à vos besoins ?

Contactez moi pour en savoir plus
ou pour fixer la date de l’atelier 🙂