SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
Ixda Feedback #1 :
L’intégration du design au sein d’entreprises innovantes



Mathilde Maître
designer, af83

mathilde.maitre@af83.com
@mathildem
Sommaire

1. Contexte
2. «Apprentissage»
3. Process, méthodologie et outils
4. Retour d’expérience
1. Contexte
  1. Présentation d’af83
1. Contexte
                     2. Etats des lieux :
                         Premières impressions : des devs




C’est une équipe de développeurs qui sont tous passionnés par le code, qui ont leur propre langage et systèmes de communication. La passion dépasse
leur engament professionnel en étant actifs dans des communautés open source par exemple.
1. Contexte
                     2. Etats des lieux :
                         Premières impressions : des devs et.. Moi




Diplômée de l’ENSCI en mai 2009, je rentre chez af83 le 11/01/2010. Je n’ai pas d’expérience dans la création d’application web mais ma formation m’a
permis de me confronter à différents territoires `; design objet, produits, interfaces et d’acquérir une culture de «projet».
=>Il faudra passer par une phase d’apprentissage de compréhension du milieu, pour pouvoir m’insérer dans le process, concevoir, voire innover.
1. Contexte
                     2. Etats des lieux :
                         Méthodologie de projets




Concrètement le design se définit en termes de livrables : wireframes, spécifications fonctionnelles. Des documents qui vont permettre aux clients
d’avoir une première représentation de son site et qui permettront de donner des bases pr les autres corps de métiers (développeurs, graphistes)
=> Collaborer avec tous pour veiller à la faisabilité entre autres.
2. Apprentissage
                       1. Des languages, un environnement technique

                                  AVANT                                                                 MAINTENANT




     Peut-on mettre du texte dans les
    champs de formulaires pour aider
                         l'utilisateur ?                                                      Peut-on mettre des
                                                                                   placeholder sur les inputs pour
                                      Hum, il faut voir, il y a p.e. une                         favoriser le UI ?
                  Une gem ?           gem pour ça mais pas sûr...                                                      A oui, il doit y avoir un plugin
       ça semble pas gagné...                                                                                          jQuery ou une gem pour ça
                                                                                        Merci, ça peut faire un bon
                                                                                                    pattern en plus
                                                                                                                         ;)




Une phase assez longue pour comprendre les termes techniques, comment se structure, s’architectire des applications : voir du code, appréhender les
langages.
=> mon objectif n’est pas du tout de coder, mais de parler le même langage, d’être au coeur de la construction pour ne pas se limiter qu’à designer l’ar-
chitecture de l’information et enfin de comprendre les innovations techniques afin de construire l’expérience utilisateur.
3. Process, méthodologie et outils
  1. Le process



                                         7
                                 Exécution           Finaliser




         3                                     1
    Prototyper                               Idées
           5                            2
                  interruption       Scénariser




               4
           Argumenter,                                   6
             discuter                                Sélectionner
3. Process, méthodologie et outils
                                    2. Les livrables
Après que l'admin ait validé les changements de "Customize workspace", les autres utilisateurs sont notifiés des changements dans la salle


              Logo
              Logo                                                                                                                                            Quit the meeting
        U.C.Engine meeting


    2
            Information                                                                                                   Meeting facilitation
        Meeting's Name       Lorem ipsum                                                                              Users connected (55)
        Description          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus.
                                                                                                                            <Unnamed> You                 5      Request lead 3
                             Suspendisse tristique. Cras et sem at odio porttitor mattis.
    1
                                                                                                                            Me22 Owner
            Conversations                                                                                                   Ben123 Speaker
        Chatrooms                                                                                                           Pier
        All users (1)
white                                                                                                                       Abigail123        4
boar
 d                                                                                                                          <Unnamed>              5


                                                                                                                          Files
                                                                                                                      List of files :   All l Your files           Upload a file


                                                                                                                            name1.pdf - 08-25-10 by Abigail
                                                                                                                                       Vue et Comportement du widget - Statut de l'utilisateur : Attendee
                                                                                                                            Share l Download

        Tweets
                                                                                                                                               3       Au clic sur le bouton "Request lead", une demande de
                Add hashtag                                                                                                                            prise de parole est envoyée à l'admin.
        #                          Add


                                                                                                                                               4       Au roll sur le pseudo d'un widget, s'affiche le picto "Conversation privée".
                                                                                                                                                       Au clic, se lance une conversation privée entre les deux users dans le widget
                                                                                                                                                       Conversations.
                                                                                                                          Video
                                                                                                                                               5       L'utilisateur peut modifier son pseudo (par défaut
                                                                                                                                                       "Unnamed")
                                                                                                               Post

                                                                                                                                                       Au roll, s'affiche le contour du champ
            Sharing                                                                                                                                    Au clic, le champ à le focus pour renseigner le pseudo
                                                                                                                                           player video

         Name1.pdf                                                                                    Download

            1   /25                                                                                                                            5
                                                                                                                                                                 Meeting facilitation                                 5.1        Meeting facilitation
                                                                                                                                                              Users connected (55)                                            Users connected (55)

                                                                                                                                                                      <unnamed>        5.1        Request lead                                          Request lead

                                                                                                                                                                     Me22 Owner                                                        Me22 Owner

                                                                                                                                                                     Ben123 Speaker                                                    Ben123 Speaker

                                                                                                                                                                     Pier                                                              Pier

                                                                                                                                                                     Abigail123                                                        Abigail123

                                                                                                                                                                     <Unnamed>                                                         <Unnamed>
3. Process, méthodologie et outils
                      3. Un exemple d’outils : la bibliothèque de patterns




Construire une librairies ux de patterns ux et ui illustrés par des exemples dont le bénéfice est de définir des bonnes pratiques et des bases sur les-
quelles s’appuyer pour construire la platefrome.
=> L ’exemple est celui des libriries utilisées par les devs comme «JqueryUI» : ne pas reinventer la roue sur des workflows standards et se concentrer
sur les points sur lesquels il y a matiere à innover.
4. Retour d’expérience




          Spécifications                  Développement                     Recette client




Cadrage                    Architecture                   Recette interne                    Production
mathilde.maitre@af83.com
@mathildem

Contenu connexe

Similaire à Ixda Feedback #1 : L’intégration du design au sein d’entreprises innovantes : Mathilde Maître, designer af83

Projet COM02.ppt
Projet COM02.pptProjet COM02.ppt
Projet COM02.pptPtidej Team
 
Mockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilMockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilNormandy JUG
 
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Guillaume RICHARD
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2Cap'Com
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013Jean-Luc Peuvrier
 
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010LINAGORA
 
Des conférences à voir et à revoir
Des conférences à voir et à revoirDes conférences à voir et à revoir
Des conférences à voir et à revoirAnthony Maison
 
Intérêt des réseaux sociaux d'entreprises (rse)
Intérêt des réseaux sociaux d'entreprises (rse)Intérêt des réseaux sociaux d'entreprises (rse)
Intérêt des réseaux sociaux d'entreprises (rse)Marc Akoley
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Ardesi Midi-Pyrénées
 
Le livre de recette du design et de l'ergonomie pour le développeur
Le livre de recette du design et de l'ergonomie pour le développeurLe livre de recette du design et de l'ergonomie pour le développeur
Le livre de recette du design et de l'ergonomie pour le développeurMicrosoft
 
Comment marche la visioconference
Comment marche la visioconferenceComment marche la visioconference
Comment marche la visioconferenceHusseinAlarab1
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicEmmanuel Hugonnet
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Microsoft
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...Sid Ahmed Benkraoua
 
Jabes 2007 - Atelier 5, CR atelier ergonomie
Jabes 2007 - Atelier 5, CR atelier ergonomieJabes 2007 - Atelier 5, CR atelier ergonomie
Jabes 2007 - Atelier 5, CR atelier ergonomieABES
 
Gestion d"une société de transit avec openerp
Gestion d"une société de transit avec openerpGestion d"une société de transit avec openerp
Gestion d"une société de transit avec openerpHORIYASOFT
 

Similaire à Ixda Feedback #1 : L’intégration du design au sein d’entreprises innovantes : Mathilde Maître, designer af83 (20)

Projet COM02.ppt
Projet COM02.pptProjet COM02.ppt
Projet COM02.ppt
 
Nlle présentation
Nlle présentationNlle présentation
Nlle présentation
 
Mockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilMockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice Duteil
 
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
Tutoriel java
Tutoriel javaTutoriel java
Tutoriel java
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
 
LMO02.ppt
LMO02.pptLMO02.ppt
LMO02.ppt
 
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010
Séminaire LINAGORA - " Le poste de travail libre : enfin mature !", juillet 2010
 
Des conférences à voir et à revoir
Des conférences à voir et à revoirDes conférences à voir et à revoir
Des conférences à voir et à revoir
 
Intérêt des réseaux sociaux d'entreprises (rse)
Intérêt des réseaux sociaux d'entreprises (rse)Intérêt des réseaux sociaux d'entreprises (rse)
Intérêt des réseaux sociaux d'entreprises (rse)
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
 
Le livre de recette du design et de l'ergonomie pour le développeur
Le livre de recette du design et de l'ergonomie pour le développeurLe livre de recette du design et de l'ergonomie pour le développeur
Le livre de recette du design et de l'ergonomie pour le développeur
 
Comment marche la visioconference
Comment marche la visioconferenceComment marche la visioconference
Comment marche la visioconference
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...
 
Jabes 2007 - Atelier 5, CR atelier ergonomie
Jabes 2007 - Atelier 5, CR atelier ergonomieJabes 2007 - Atelier 5, CR atelier ergonomie
Jabes 2007 - Atelier 5, CR atelier ergonomie
 
Stage GFC Atlantic
Stage GFC AtlanticStage GFC Atlantic
Stage GFC Atlantic
 
Gestion d"une société de transit avec openerp
Gestion d"une société de transit avec openerpGestion d"une société de transit avec openerp
Gestion d"une société de transit avec openerp
 

Ixda Feedback #1 : L’intégration du design au sein d’entreprises innovantes : Mathilde Maître, designer af83

  • 1. Ixda Feedback #1 : L’intégration du design au sein d’entreprises innovantes Mathilde Maître designer, af83 mathilde.maitre@af83.com @mathildem
  • 2. Sommaire 1. Contexte 2. «Apprentissage» 3. Process, méthodologie et outils 4. Retour d’expérience
  • 3. 1. Contexte 1. Présentation d’af83
  • 4. 1. Contexte 2. Etats des lieux : Premières impressions : des devs C’est une équipe de développeurs qui sont tous passionnés par le code, qui ont leur propre langage et systèmes de communication. La passion dépasse leur engament professionnel en étant actifs dans des communautés open source par exemple.
  • 5. 1. Contexte 2. Etats des lieux : Premières impressions : des devs et.. Moi Diplômée de l’ENSCI en mai 2009, je rentre chez af83 le 11/01/2010. Je n’ai pas d’expérience dans la création d’application web mais ma formation m’a permis de me confronter à différents territoires `; design objet, produits, interfaces et d’acquérir une culture de «projet». =>Il faudra passer par une phase d’apprentissage de compréhension du milieu, pour pouvoir m’insérer dans le process, concevoir, voire innover.
  • 6. 1. Contexte 2. Etats des lieux : Méthodologie de projets Concrètement le design se définit en termes de livrables : wireframes, spécifications fonctionnelles. Des documents qui vont permettre aux clients d’avoir une première représentation de son site et qui permettront de donner des bases pr les autres corps de métiers (développeurs, graphistes) => Collaborer avec tous pour veiller à la faisabilité entre autres.
  • 7. 2. Apprentissage 1. Des languages, un environnement technique AVANT MAINTENANT Peut-on mettre du texte dans les champs de formulaires pour aider l'utilisateur ? Peut-on mettre des placeholder sur les inputs pour Hum, il faut voir, il y a p.e. une favoriser le UI ? Une gem ? gem pour ça mais pas sûr... A oui, il doit y avoir un plugin ça semble pas gagné... jQuery ou une gem pour ça Merci, ça peut faire un bon pattern en plus ;) Une phase assez longue pour comprendre les termes techniques, comment se structure, s’architectire des applications : voir du code, appréhender les langages. => mon objectif n’est pas du tout de coder, mais de parler le même langage, d’être au coeur de la construction pour ne pas se limiter qu’à designer l’ar- chitecture de l’information et enfin de comprendre les innovations techniques afin de construire l’expérience utilisateur.
  • 8. 3. Process, méthodologie et outils 1. Le process 7 Exécution Finaliser 3 1 Prototyper Idées 5 2 interruption Scénariser 4 Argumenter, 6 discuter Sélectionner
  • 9. 3. Process, méthodologie et outils 2. Les livrables Après que l'admin ait validé les changements de "Customize workspace", les autres utilisateurs sont notifiés des changements dans la salle Logo Logo Quit the meeting U.C.Engine meeting 2 Information Meeting facilitation Meeting's Name Lorem ipsum Users connected (55) Description Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. <Unnamed> You 5 Request lead 3 Suspendisse tristique. Cras et sem at odio porttitor mattis. 1 Me22 Owner Conversations Ben123 Speaker Chatrooms Pier All users (1) white Abigail123 4 boar d <Unnamed> 5 Files List of files : All l Your files Upload a file name1.pdf - 08-25-10 by Abigail Vue et Comportement du widget - Statut de l'utilisateur : Attendee Share l Download Tweets 3 Au clic sur le bouton "Request lead", une demande de Add hashtag prise de parole est envoyée à l'admin. # Add 4 Au roll sur le pseudo d'un widget, s'affiche le picto "Conversation privée". Au clic, se lance une conversation privée entre les deux users dans le widget Conversations. Video 5 L'utilisateur peut modifier son pseudo (par défaut "Unnamed") Post Au roll, s'affiche le contour du champ Sharing Au clic, le champ à le focus pour renseigner le pseudo player video Name1.pdf Download 1 /25 5 Meeting facilitation 5.1 Meeting facilitation Users connected (55) Users connected (55) <unnamed> 5.1 Request lead Request lead Me22 Owner Me22 Owner Ben123 Speaker Ben123 Speaker Pier Pier Abigail123 Abigail123 <Unnamed> <Unnamed>
  • 10. 3. Process, méthodologie et outils 3. Un exemple d’outils : la bibliothèque de patterns Construire une librairies ux de patterns ux et ui illustrés par des exemples dont le bénéfice est de définir des bonnes pratiques et des bases sur les- quelles s’appuyer pour construire la platefrome. => L ’exemple est celui des libriries utilisées par les devs comme «JqueryUI» : ne pas reinventer la roue sur des workflows standards et se concentrer sur les points sur lesquels il y a matiere à innover.
  • 11.
  • 12. 4. Retour d’expérience Spécifications Développement Recette client Cadrage Architecture Recette interne Production