Return to flip book view
Design Thinking & web project© Nathalie RAMANANTSOA-FRATLa Boîte à outils
Design Thinking : une approche collaborative de co-création appliquée, client-centrique et itérativeBBooîîttee àà oouuttiillssDesign créatif& Facilitation visuellePosture d’ouvertureEntrer en EMPATHIECADRAGE(Point de vue)IDEATION(Co-création)PROTOTYPE(Show + Buildto learn!)TEST& learnLancementIdentifier la bonne problématiqueBrainstormingChoix12345EXPLORER & COMPRENDREJobs-to-be-doneIdentifier le «pourquoi?»•Observation, interview, •RechercheIdentifier le « pourquoi? »Retour d’expérience utilisateursDEPLOYERMVPBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRATOrganisationDiagnostic de l’existantCarte d’empathieRecherche de sensParcours ClientBrainstormingPrototypage visuelStoryboardingPriorisationEvaluationVision futureFeuille de routeArbitrages Go / No Go
Table des matièreso TK1 – Carte d’empathie p. 4o TK2 – Persona p. 5o TK3 – Context Map p. 6o TK4 – Consumer Trends Canvas p. 7o TK5 – Parcours client & mapping d’expérience client p. 8o TK6 – Jobs-to-be-done p. 9o TK7 – Jobs map p. 10o TK8 – Innovation de valeur / Courbe de valeur p. 11o TK9 – Hiérarchie des critères de Design p. 14o TK10 – Matrice de Porter p. 15o TK11 – PESTEL p. 16o TK12 – Chaîne de valeur p. 17o TK13 – Grille V.R.I.O p. 18o TK14 – Analyse SWOT p. 19o TK15 – Golden circle p. 20o TK16 – Plateforme de marque p. 21o TK17 – Proposition de valeur p. 23o TK18 – Business Model Canvas p. 24o TK19 – Vision-Cover-Story Canvas p. 25o TK20 – Briques d’un cahier des charges type p. 26o TK21 – Wireframes p. 27o TK22 – Table périodique du SEO p. 28Boîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Persona / segment client :Carte d’empathieCe qu’il craint (Irritants / Frustrations / Obstacles et problèmes rencontrés) :oooCe à quoi il aspire (Désirs / besoins / Attentes / criètres de réussite …) :oooCe qu’il penseCe qu’il voitCe qu’il ditCe qu’il faitCe qu’il entendCe qu’il ressentCe qu’il penseCe qu’il entendCe qu’il faitCe qu’il ressentCe qu’il ditCe qu’il voitAdapté de l’Empathy Map de Dave Gray – Xplane, développé dans l’ouvrage GamestormingMINDSETINFLUENCESACTIONSCATALYSEURS
PersonaBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Context MapVotre entrepriseCe qu’elle apporte au client :Comment le client la perçoit+ -Contexte sociodémographique• Parcours académique• Profil marital• Facteurs économiques susceptibles d’affecter le contexte du client• …Contexte règlementaire• Evolutions du cadre susceptibles d’affecter le client• …Contexte économique• Facteurs impactant directement le client• …Contexte concurrentiel• Y a-t-il de nouveaux entrants?• Comment les concurrents s’ajustent et influencent le client?• …Contexte Technologique• Quels changement d’environnement techno s’opèrent?… Quelles technos arriveront à maturité sous peu?• Vos clients seront-ils précurseurs ou suiveurs?• …Besoins clients• Comment les besoins clients sont-ils susceptibles de se réorienter dans un futur proche?• …Incertitudes• Pressentez vous de potentiels éléments de disruption?• Des facteurs impactant dont les futurs effets sont difficiles à déterminer?• …Contexte environnemental• Changement de donne susceptible de toucher le client• …Boîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Consumer Trends Canvas(Tendance : ___________________________)Besoins ancrésAPPLIQUERAspirations émergentesCatalyseurs du changement ciblesInspirationsPotentiel d’innovationSource : https://trendwatching.com/trends/consumertrendcanvas/Piste(s)d’innovation(s)
DéclencheursAttentes & motivationsPoints de contact + Activités & circonstancesEtat d’esprit( / / )-IrritantsSéquences ClientEnchanteursuStimuli (vs. marque et/ou besoin)uInfluence (information / recommandations …)u…uDisponibilité offreuAutorité & influenceu…uFacilité d’achatu…uQualité du Service Client et du SAVuAppréciation uRetour d’expérience et partage d’avis u…u1èreexpérienceuQualité de serviceuConfortu…uRationneluEmotionneluRelationnelu…uBénéfices escomptésuCaractéristiquesu…APRESAVANTPENDANT L’ACHATUtiliserProlonger / Maintenir Recommander …Disposer InstallerUtiliserAcheterEvaluer & choisirEntrer en relation (engagement)EnvisagerDécouvrirRechercherSélectionnerEtre sensibilisé+SatisfactionBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT+ 5+ 4+ 3+ 2+ 1- 1- 2- 3- 4- 5Mapping d’expérience & parcours Client
Jobs-to-be-done needs / job maps frameworksTMSource : https://strategyn.com/jobs-to-be-done/
L’innovation de la valeur transcende les interpretations traditionnelles des besoins clientsL’innovation de la valeur : une approche résolument centrée ClientBesoin non perçupar le clientBesoin identifié mais pas articulépar le clientBesoin connu et formulépar le clientIdentification de la courbe de valeurAnalyse de la courbe de valeur actuelleAttributs(issus des besoins clients)Valeur Client(de chaque attribut)-+=Design d’offre & reconfiguration de la courbe de valeurCourbe de valeur de l’offre-+=Valeur Client élevéeValeur Client nulleAttributsRéponse forteRéponse moyenneRéponse faibleValeur Client moyenne
Source: C. Kim, R. Mauborgne, Harvard Business Review (1997)Quels sont les facteurs clés de succès traditionnels qu’il faut oublier?Quels facteurs faut-il minimiser par rapport aux standards de l’industrie?Quels facteurs doivent excéder les standards historiques?Evolution de la courbe de valeurAttributsActeurs traditionnels Acteur innovant Valeur+-1970sL’innovation passe par la reconfiguration de la courbe de valeurÀ éliminer À réduireQuels nouveaux facteurs faudrait-il considérer?À développer À créer
Exemple : courbes de valeur librairies —Perception prixAssortiment completCurationEliminerAttributsLibrairie LVValeur Pour les clients+-Positionnement Mass MarketRéduire Développer—Brand awarenessConcept magasin attrayantEvènements—————ExclusivitéServiceCommunauté affinitaire————Expérience clientDiversification de l’offre—CréerIndépendant Chaînes InternetLibrairie LVBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Hiérarchie des critères de DesignSource : https://jobs-to-be-done.com/quantify-your-customers-unmet-needs-fda5b20fce54Must Haves Eléments obligatoires à inclure / Non négociablesShould Haves Eléments complémentaires importants pour se différencier Could Haves Eléments optionnels (cerise sur le gâteau)Won’t Haves Eléments à éviter à tout prix (Non négotiables)1234
Matrice de PorterSource : M. Porter – L’avantage concurrentiel - 1979Menaces de nouveaux entrantsPouvoir de négociation des clientsPouvoir de négociation des fournisseursMenaces de produits de substitutionIntensité concurrentielleEn novembre 2014, M. Porter a effectué une mise à jour majeure des concepts qui l’ont rendu incontournable. Selon le célèbre professeur de Harvard, l’Internet des objets transforme en profondeur le paysage concurrentiel. Pour en savoir plus : https://youtu.be/No9spNdOCck
PESTELPolitiqueEconomiqueTechnologiqueEnvironnementalLégal+-•• •••••• ••••Boîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
o Outil d’analyse stratégique inventé par M. Porter (cf. l’avantage concurrentiel-1979, la chaîne de valeur permet d’identifier les différentesactivités créatrices de valeur pour le client et génératrices de marge pour l’entreprise. o M. Porter la présente comme une succession séquentielle d’activités permettant d’aboutir à un produit ou un service.o Pour l‘optimiser il faut :ü Comprendre comment chaque activité, (i.e. chaque maillon qui compose l’entreprise), crée ou lui fait perdre de la valeurü Allouer les ressources de sorte à rendre l’entreprise plus compétitive sur son marché.o Pour identifier la marge compétitive de l’entreprise, il faut associer un coût de mise en œuvre à chaque activité.Chaîne de valeurLa chaîne de valeur : 5 activités de base et 4 activités de soutien.o L’enchaînement des activités, peut différer selon l’entreprise, ses produits ou services voire selon son mode de distribution.o L’analyse de la chaîne de valeur, et sa maîtrise fine, permet de prendre des décisions d’ordre stratégique, pour positionner le ou les produits et services sur le marché et identifier les sources d’avantages concurrentiels les plus décisifs (cf. coûts vs. différenciation vs. spécialisation sur une niche)• Infrastructure de l’entreprise• Gestion des RH• Développement technologique• AchatsActivités de baseActivités de soutienLogistique entranteOpérationsLogistique sortanteMarketing - VentesServicesMARGEMARGE
Grille VRIOClassez vos ressourcesDe Valeur? Rare ? Inimitable? Organisé?Avantage compétitif?Ressources tangiblesRessources intangibles
Handicaps AtoutsMMaattrriiccee FFoorrcceess--FFaaiibblleesssseess//MMeennaacceess--OOppppoorrttuunniittééss ((SWOT))Pistes d’actions (hiérarchisées)uuuINTERNEEXTERNEuFORCESMENACESFAIBLESSESOPPORTUNITES
Golden CircleComment?Quoi?Pourquoi?PourquoiQuel est votre raison d’être?QuoiQuel résultat visez vous?Quelle est votre offreCommentQuels processus mettez vous en œuvre?Avec quelles ressources (humaines, techniques, financières…)Source Simon SINEK – Golden Circle
Plateforme de marque (1/2)Singularité & proposition de valeur Concept stratégique Charte de Marque & Corpus culturel VISIONEXTERIORISATIONINTERIORISATION-1-VALEURS& CultureMission & Promesse• Liens, idées fortes et expérience partagées entre la marque et le client• (climat de transaction)• Ce que pense le client / utilisateur lorsqu’il choisit la marque• Raison d’être de la marque • Eléments de différenciation tangibles et de valorisation (USP)• Traits de “caractère”• Aspects sociaux & psychologiques2Personnalité4Mentalisation5Univers / Territoire3RelationPhysiqueReflet 687• Caractéristiques saillantes visibles et objectives• Attributs fonctionnels• Clients / acheteurs types ciblés• Persona• Domaines de légitimité / savoir-faire & champs de compétences• HistoireBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Plateforme de marque (2/2) – Illustration NESPRESSOEXTERIORISATIONINTERIORISATION-1-Valeurs Authenticité, qualité, exigenceCulture : Hédonisme, sélectivité, innovationUnivers / Territoire• Intimiste• Proximité• Culture du service• Je suis raffiné et exigeant• Sentiment d’appartenance (Nespresso Club)• Je suis unique• Café ‘portionné’ et haut-de-gamme, • distribution sélective• Love brand / Style de vie• Elégant• Unique• Désinvolte / auto dérision2Personnalité3Mentalisation4Mission & Promesses5RelationPhysiqueReflet 687• Dosettes• Style épuré et design• Egérie• Consommateur moderne• International• Offrir l’expérience d’un café haut de gamme à tous• Fiabilité et constanteOrchestrer le renouvellement du marché du café en transcendant un geste quotidien!Concept : système machine + capsuleExpérience sensorielleMarqueurs ‘Premium’Boîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Proposition de ValeurSubstituts ? :Concurrence ? :Solution : Produits & Services / positionnementGénérateurs de gains / BénéficesExpérience / Anti-stressØ CaractéristiquesMarché(s) cible(s)•Différenciation Avantage compétitif•Raison d’êtreJobs to be done••ClientBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
RESSOURCES CLESBusiness Model CanvasPARTENAIRES CLES ACTIVITES CLES PROPOSITION de VALEUR RELATION CLIENTCANAUX (distribution & communication)SEGMENT(S)CLIENT(S)DRIVERS de COÛTS DRIVERS de REVENUSSource : Business Model New Generation – A. Osterwalder & Y. Pigneur
Vision-Cover-Story CanvasAdapté de Couverture médiatiqueGros Titres L’interview cléCe que l’opinion publique retiendraCitations#Hashtags populaires
Cahier des charges web : 23 dimensions à couvrir-11-Promotion du site web-12-Contraintes techniques-13-Sécurité-14-Prototypes & tests-15-Référence-ment & Analytics-16-Maintenance & évolutivité-17-Back ups-18-Hébergement-19-Prise en main & administra-tion-20-Juridique-21-Calendrier-22-Budget & équipes-7-Fonction-nalités clés & wireframes-8-UX-9-CMS & intégration-10-Compatibilité (navigateurs & devices)-4-Brief créa-5-Ressources (fournies / à créer)-6-Architecture du site-2-Objectifs & contexte du projet-3-Benchmark concurrence-1-Présentation de l’entreprise-23-Prochaines étapesBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Les wireframes : outil de prototype de votre projet de Web DesignBoîte à outils Design Thinking & Web Project © Nathalie RAMANANTSOA-FRAT
Table périodique du SEOSource : Search Land Engine