Scope of work

Références : https://docs.google.com/document/d/18iCsy8jA2EPpmbP1upbJoCXxp8lDljxNSBz6ecvOciU/edit?usp=sharing

Client | Caféine.studio https://www.cafeine.studio/

Déclaration de Travaux (Statement Of Work)

Cette Déclaration de Travaux ("SOW") est conclue entre Poulpo représenté par DIGITALISIME CORP ("Agence") et Caféine.studio ("Client") (collectivement "les parties"). Ce SOW définit les travaux à réaliser dans le cadre du projet spécifique ou de la phase du projet décrite ci-après, à réaliser par Poulpo. Il inclut également les livrables, les échéances pour les deux parties, ainsi que les modalités de la relation de projet.

Aperçu du Projet

Le Client a sollicité Poulpo pour concevoir et développer son nouveau site internet. Poulpo s’engage à créer et développer le site web conformément au cahier des charges établi entre les deux parties.

La durée d'exécution (deadline) de cette Déclaration de Travaux est de 30 jours à partir du lancement du projet.

Phase 1 : Maquettes Figma (UX) (UI)

Objectif :

L’objectif de cette étape est de créer une structure et un design innovants et efficaces pour le site web, en accord avec les besoins du client et les attentes des utilisateurs. Cette phase vise à poser les bases solides pour un site web performant, engageant et visuellement attrayant, en alignant le design avec l'identité de la marque et en optimisant l'expérience utilisateur.

Objectif + :

Mettre en avant les services et la réputation de caféine.studio à travers un site épuré, minimaliste et parfaitement structuré. Le site doit refléter l’étendue de leurs compétences et l'excellence de leur travail et de leur processus d’accompagnement. Il doit démontrer que les solutions proposées par caféine.studio sont les meilleures disponibles (via notamment des études de cas biens structurées)

✓ Ce qui est inclus :

1. Nouvelle structure UX (Figma) :

   • Analyse et Conseil (/!\ important) : Réalisation d'une analyse approfondie des besoins du client et des utilisateurs pour créer une architecture de site intuitive et optimisée. Poulpo devra être force de proposition.

   • Proposition d’un nouveau sitemap (/!\ important) : Par exemple, inclure une page dédiée aux études de cas avec un modèle spécifique, ainsi qu’une page pour les articles de presse, etc. (à définir avec le client)

   • Implémentation de sections dédiées (/!\ important) : Ajout et organisation de sections importantes pour le client, tout en optimisant l'expérience utilisateur pour garantir une navigation fluide et cohérente.

   • Création d’un content map (/!\ important) : Vise à organiser et structurer le contenu du site web de manière logique et cohérente. Cela permet de visualiser l’emplacement de chaque élément de contenu, de comprendre comment les informations seront présentées, et de s'assurer que rien d'important n'est omis.

   • Création d’un wireframe (/!\ important) : Représentation visuelle simplifiée de la structure du site. Il sert de guide pour la disposition des éléments sur les pages et permet de valider la hiérarchie de l'information et la logique de navigation avant de passer à la phase de design détaillé.

2. Copywriting percutant (Figma) :

   • Première ébauche : Suggestions et conseils pour l'élaboration de messages clairs et engageants, alignés sur les objectifs du site, le ton de la marque et du fondateur.

   • Implémentation, exécution :

     1. Analyse initiale : Examen du contenu existant (s'il y en a) pour identifier les points forts et les axes d'amélioration en fonction des objectifs définis.

     2. Développement du contenu : Rédaction de nouvelles propositions de texte en tenant compte des directives établies pour le ton et le style. Cela inclut la création de titres, slogans, descriptions de produits, et tout autre élément textuel essentiel.

     3. Révision et ajustement : Travail collaboratif avec l'équipe pour affiner et ajuster les textes selon les retours. Cela peut inclure des itérations multiples pour atteindre la version finale optimale.

     4. Intégration dans le wireframe : Intégration du contenu finalisé dans les wireframes, en veillant à ce que les textes soient bien disposés et qu'ils complètent efficacement la structure et l'ergonomie du design.

     5. Validation finale et déploiement : Une fois validé par les parties prenantes (client), le contenu est prêt pour être intégré sur les maquettes UI

3. Nouveau design UI (Figma) :

   • Design moderne et attractif : Création d'une interface utilisateur (UI) innovante, tout en respectant la charte graphique actuelle de l'entreprise.

     1. Configuration du Style Guide : Établir les règles de conception visuelle, y compris les couleurs, les typographies, et les éléments graphiques, pour assurer la cohérence à travers tout le projet.

     2. Création de la maquette UI : Développer une version visuelle du produit en utilisant les éléments du Style Guide, en se concentrant sur la disposition des composants et l'expérience utilisateur.

     3. Validation : Examiner la maquette UI avec les parties prenantes pour s'assurer qu'elle répond aux attentes fonctionnelles et esthétiques, et qu'elle est alignée avec les objectifs du projet.

     4. Retouches : Apporter les modifications nécessaires à la maquette en fonction des retours reçus lors de la validation, pour améliorer l'efficacité et l'attrait visuel.

     5. Mise au propre du Design System : Finaliser et documenter les éléments du design (UI, composants interactifs) dans un système unifié, prêt à être utilisé pour le développement et les futures itérations.

   • Qualité visuelle élevée : Rendu professionnel de haute qualité (niveau A), garantissant une esthétique soignée et cohérente.

4. Site animé et interactif :

   • Animation et dynamisme : Intégration d'animations et de transitions pour un défilement dynamique qui enrichit l'expérience utilisateur.

   • Icônes animées : Création d’icônes uniques, avec possibilité d'animation pour ajouter de la vivacité au design.

5. Phase de Validation :

• Validation intermédiaire :

  • Validation de la nouvelle structure, du sitemap et échange d’idées (/!\ important)

  • Validation du Content Map (/!\ important) : Présentation et validation de la structure de contenu avec le client pour s’assurer que les besoins et objectifs sont bien compris.

  • Validation du Wireframe (/!\ important) : Présentation des wireframes au client pour valider la disposition et la structure avant de passer au design détaillé.

• Validation finale :

  • Validation du Design UI : Révision et validation du design final par le client, intégrant les ajustements éventuels suite aux retours intermédiaires.

  • Go-No-Go : Accord final du client pour passer à l’étape d’intégration une fois toutes les validations obtenues.

x Ce qui n'est pas inclus :

1. Brandboard :

   • La création ou la révision complète du brandboard (document regroupant les éléments visuels de la marque tels que logos, typographies, palettes de couleurs, etc.) n'est pas incluse dans cette phase de projet.

Besoins pour la Step 1 : Conception du site web

1. Charte graphique existante :

   • Accès à la charte graphique actuelle (logos, couleurs, typographies) pour s'assurer que le nouveau design UI est en harmonie avec l'identité visuelle existante.

2. Contenus de base/deck/présentation commerciale du service :

   • Fourniture des textes initiaux ou des informations clés pour la rédaction de contenus, même si le copywriting final n’est pas inclus.

3. Exemples de sites inspirants :

   • Références ou exemples de sites web que le client trouve inspirants pour aligner la vision créative et les attentes.

4. Éléments de branding :

   • Logos, icônes spécifiques, éléments visuels qui doivent être intégrés dans le design.

Assets livrés :

• Templates Figma (UX, UI)

• Icônes utilisés

• Images/photos utilisées

Phase 2 : Intégration (Framer)

Objectif :

Cette étape vise à traduire le design et la structure définis à l’étape précédente en un site web fonctionnel et interactif, en utilisant l'outil Framer. Framer permet de créer des sites web au rendu fluide, avec des animations avancées et une forte interactivité. Poulpo est un partenaire officiel de Framer, l'un des rares en France (https://framer.com).

✓ Ce qui est inclus :

1. Configuration du projet Framer :

   • Initialisation : Mise en place de l’environnement de travail Framer, création de la structure de base du projet.

   • Paramétrage global : Définition des styles globaux, intégration des polices de caractères, palettes de couleurs et autres éléments issus de la charte graphique.

2. Intégration du design UI :

   • Importation des éléments graphiques : Import et optimisation des maquettes et des assets visuels créés lors de l’étape de design.

   • Construction des pages : Reproduction fidèle des maquettes pour toutes les pages du site, en respectant les spécifications de design (typographie, couleurs, espacements, etc.).

3. Développement des animations et interactions :

   • Animations et transitions : Intégration des animations d’éléments (textes, images, boutons) pour enrichir l’expérience utilisateur, y compris le scrolling dynamique.

   • Interactions avancées : Mise en place des fonctionnalités interactives, telles que les effets au survol, les déclencheurs d’animations, les menus déroulants, etc.

4. Responsivité :

   • Adaptation mobile et tablette : Optimisation du design et des fonctionnalités pour qu’ils soient entièrement compatibles avec différents formats d’écran (desktop, tablette, mobile).

   • Tests de compatibilité : Vérification de l’affichage et du fonctionnement du site sur différents navigateurs et appareils.

5. Optimisation de la performance :

   • Minimisation des temps de chargement : Optimisation des images, des fichiers CSS et JavaScript pour garantir une performance optimale du site.

   • SEO de base : Mise en place des balises essentielles pour le référencement naturel (titres, descriptions, balises alt pour les images).

6. Validation et ajustements :

   • Revue finale : Contrôle qualité complet du site pour identifier et corriger d'éventuels bugs ou incohérences.

   • Ajustements : Effectuer les dernières modifications en fonction des retours du client pour s'assurer que le site correspond parfaitement aux attentes.

x Ce qui n'est pas inclus :

• Création de contenu supplémentaire : La création ou l'ajustement de contenu additionnel après la phase d'intégration, comme la rédaction de nouveaux textes ou la création de visuels non prévus, n'est pas inclus.

• Maintenance post-lancement : Le suivi, les mises à jour ou les corrections après la mise en ligne du site sont considérés comme un service distinct, pouvant faire l'objet d'une autre phase du projet.

Besoins pour la Step 2 : Intégration du site web avec Framer

1. Design final validé :

   • Les maquettes UI/UX validées par le client, prêtes à être intégrées dans Framer.

2. Contenus définitifs :

   • Textes, images, vidéos, et autres éléments multimédias définitifs pour être intégrés directement dans le site.

3. Accès aux ressources d'hébergement :

   • Informations sur l'hébergement et les noms de domaine pour configurer le site une fois l'intégration terminée.

4. Informations techniques :

   • Accès aux outils tiers ou aux API qui doivent être intégrés au site (comme des systèmes de gestion de contenu, des services d'analytique, etc.).

Ces éléments aideront à assurer que chaque étape se déroule sans encombre et que le produit final répond aux attentes.

Assets fin de projet :

• Template Framer

• Vidéo de formation (structure des pages, “bonne méthodes”)

• Icônes utilisés

• Images/photos utilisées

Process & Timeline

STEP 1 : Paiement de l’acompte & signature NDA

• Description : Confirmation du démarrage du projet avec le paiement de l'acompte et la signature du contrat de confidentialité (NDA)

• Responsable : Client

• Durée : 1 jour

• Livrables : Confirmation de paiement

STEP 2 : Appel Kick-start - Creative workshop

• Description : Réunion de lancement pour discuter des idées et affiner le projet (structure & design)

• Responsable : Agence / Client

• Durée : 1 jour

• Livrables : Brief de lancement, notes de réunion

Phase 1 : Maquettes Figma
Durée totale : 14 jours

STEP 3 : Nouveau sitemap, Content Map & Wireframe

• Description : Proposition d’un nouveau sitemap, création du content map et des wireframes pour structurer le contenu et la navigation du site.

• Responsable : Agence

• Durée : 5 jours

• Livrables : Sitemap, content map, wireframes

STEP 3.1 : Validation intermédiaire

• Description : Présentation et validation du sitemap, content map et des wireframes par le client.

• Responsable : Agence / Client

• Durée : 1 jour

• Livrables : Feedback client, ajustements

STEP 4 : Design UI

• Description : Création du design UI moderne et attractif en accord avec la charte graphique de l'entreprise.

• Responsable : Agence

• Durée : 5 jours

• Livrables : Maquettes UI complètes dans Figma

STEP 4.1 : Validation finale

• Description : Révision et validation du design final par le client, ajustements éventuels.

• Responsable : Agence / Client

• Durée : 2 jours

• Livrables : Feedback client, ajustements finaux

STEP 5 : Validation globale

• Description : Accord final du client pour passer à l’étape d’intégration.

• Responsable : Client

• Durée : 1 jour

• Livrables : Validation finale

Phase 2 : Intégration (Framer)
Durée totale : 14 jours

STEP 6 : Initialisation du projet

• Description : Mise en place de l’environnement de travail Framer, création de la structure de base du projet.

• Responsable : Agence

• Durée : 2 jours

• Livrables : Structure de base configurée

STEP 7 : Intégration UI

• Description : Importation des éléments graphiques et construction des pages du site selon les maquettes validées.

• Responsable : Agence

• Durée : 4 jours

• Livrables : Pages intégrées, structure et style respectés

STEP 8 : Animations & Interactions

• Description : Développement des animations et des fonctionnalités interactives du site.

• Responsable : Agence

• Durée : 2 jours

• Livrables : Animations intégrées, interactions fonctionnelles

STEP 9 : Responsivité

• Description : Optimisation du site pour une compatibilité mobile, tablette, et divers navigateurs.

• Responsable : Agence

• Durée : 2 jours

• Livrables : Site responsive

STEP 10 : Validation & Ajustements

• Description : Revue finale, ajustements selon les retours du client, préparation pour la mise en ligne.

• Responsable : Agence / Client

• Durée : 2 jours

• Livrables : Feedback client, ajustements finaux

STEP 11 : Livraison & Déploiement

• Description : Livraison finale de tous les éléments et mise en ligne officielle du site.

• Responsable : Agence

• Durée : 1 jour

• Livrables : Site en ligne, tous les assets livrés

STEP 12 : Appel de fin de projet & Contrat de cession

• Description : Réunion de clôture pour faire un point final sur le projet et discuter des prochaines étapes et signer le contrat de cession.

• Responsable : Agence / Client

• Durée : 1 jour

• Livrables : Rapport final, feedback, recommandations

Modalités tarifaires

Prix : 4.400€ (HT | Exempt de TVA) (6.000€)

Moyen de paiement : Virement bancaire

Modalités :

• 20% d’acompte avant le début du projet

• 40% après la “Phase 1”

• 40% à la fin du projet, après livraison de tous les assets et mise en ligne “Phrase 1 & 2”

Plus (-> réduction du prix) : 

• Témoignage vidéo du Founder de Caféine.studio : sera publié sur le site de notre studio

• Publication LinkedIn + Newsletter : Mise en avant de la collaboration

• Mention dans le footer (optionnel) : "Conçu avec ♥ par Poulpo"