Les slides du workshop "Produit mobile", qui fait partie du programme "ThinkMobile Workshops for Startups" - cf http://www.thinkmobile.fr

1. Mobile Product
Alexandre
Jubien
@AlexJubien

2. myself@moi.me

3. myself@moi.me
Pioneer of mobile development

4. myself@moi.me
2003 - 2007
Games
Apps

5. myself@moi.me
2008 - 2012
Deezer
(main competitor of Spotify)
Viadeo
(main competitor of Linkedin)

6. ThinkMobile
Mobile & Tablets Consulting
Passion Expertise Commitment
Strategy Monetization M-Commerce
Webapps Innovation iPad Apps Product iPhone Usage
Android Agile R&D Blackberry Multiplatform Windows Phone
Massive Downloads Marketing Appstores
Social
Investment Audit Solutions
ThinkMobile.fr

7. Mobile Product
= Product

8. Mobile Product
= Product
• Qui sont vos utilisateurs ?
• Qui sont vos clients ?
• Quel(s) problème(s) ont-ils ?
• Quelles sont les solutions ?
• …

9. Product that people love =
Build the right product
+
Build it right

10. Product that people love =
Customer development / Lean
+
Build it right

11. Product that people love =
Customer development / Lean
+
Agile / Scrum

12. Product that people love =
Customer development / Lean
+
Agile / Scrum
SVPG.com (Silicon Valley Product Group)

13. Lean Startup
•
•
•
•
•
Livre d’Eric Ries, mouvement Lean
‘‘Fail fast, suceed faster’’
Rencontrer les vrais besoins
Pivots
Eviter le gâchis

14. Philosophie Lean
• Processus de découverte
• Ce que veulent les clients n’est pas
forcément ce qu’on a imaginé
• Il faut pouvoir lâcher prise
• Une définition intéressante ici
• Une vidéo <3mns ici

15. Build – Measure – Learn

16. MVP
•
•
•
•
Minimum Viable Product
Preuve de concept
Valider les hypothèses, décrouvrir
On itère dessus ensuite

17. Release early
• Se confronter au plus tôt :
 Aux utilisateurs
 Aux problèmes
 Aux risques
• Rationaliser, prouver, confronter attention aux intuitions !

18. http://fr.slideshare.net/brainmates/what-is-product-management-4905498

19. Agile
• SCRUM, Kanban, eXtreme Programming…
• Des pratiques et des outils pas trop
embêtants, que l’équipe choisit d’utiliser

20. SCRUM
•
•
•
•
•
Vidéo Scrum in under 10 mns
Sprints de 2 semaines (reco)
Features in Product Backlog
Rituels : daily / weekly, sprint planing, démos
Rétrospectives

21. Itératif = droit au changement
changement
B
A
C

22. Lean, Agile, Design Thinking…
Un point commun :
l’équipe pluri-disciplinaire
/ la collaboration d’experts de métiers différents

23. Lean, Agile, Design Thinking…
Un point commun :
l’équipe pluri-disciplinaire
/ la collaboration d’experts de métiers différents
=> Inclure les développeurs !

24. Transition

25. Smartphones ?

26. Smartphones ?
45%

27. Trafic web mondial ?

28. Trafic web mondial ?
10 à 20%

29. Plus de SIMs activées que
d’hommes sur terre
Mobile guru @TomiAhonen

30. Plus adopté que le stylo !!!
Mobile guru @TomiAhonen

32. Révolutionnaire

33. Pourquoi ?

34. Partout, tout le temps

35. Même là – 75% !

36. Parité

37. There’s an app for that

38. 1er appareil connecté
qu’on a toujours sur soi

39. Compagnon de vie

40. Compagnon de vie
Vie
=
gens
moments
lieux
objets

41. Compagnon de vie
Vie
=
gens
moments
lieux
objets
Facebook
Path
Foursquare
Pinterest

42. Design for interruption
PC/Tablet = Scubadiving
Mobile = Snorkeling
Rachel @Hinman

43. Design for interruption
• Attention partielle
• Prévoir les interruptions
=> sauvegarder les états
• Prévoir le retour à l’application

44. Design for interruption
• Attention partielle
• Prévoir les interruptions
=> sauvegarder les états
• Prévoir le retour à l’application
• Et n’interrompez pas trop non plus !
(notifs)

45. Monde digital / Monde physique

46. Monde digital / monde physique

47. Code barre

48. Code barre
Chasse aux trésors
Scanbucks

49. Code barre
Comparateur de prix
Prixing

50. QR Code
30%
http://bit.ly/AlexJubien

51. QR Code
•
•
•
•
http://bit.ly/AlexJubien
Catalogue papier (But)
Magazines (Inrocks)
Affiches
Emballage Produits
(colle Pater)
• Street marketing
• …

53. Réalité augmentée

54. Réalité augmentée
Géoloc

55. Réalité augmentée
Géoloc
M-Paiement

56. Réalité augmentée
M-Commerce
Géoloc
M-Paiement

57. M Commerce
Tesco virtual supermarket in a subway station - South Korea

58. Ancrez dans le monde réel

59. Butler mode
• John Paul

60. Butler mode
• John Paul
• Et si votre service était
une personne ?
• Ex Deezer, Viadeo

61. Instantanéité

62. Météo
TV
5h

63. Météo
TV
Web
5h
5m

64. Météo
TV
Web
Mobile
5h
5m
5s

65. Vos désirs exaucés

66. Vos désirs exaucés
Envie d’écouter
une musique
Deezer
5s

67. Vos désirs exaucés
Envie d’écouter
une musique
5s
Besoin d’appeler
un contact pro
5s
Deezer
Viadeo

68. Quelle est la plus grosse
contrainte ?

69. Réseaux mobiles
• A considérer : différencier le comportement
de l’appli en fonction du réseau
• Ex. pour une appli de réseau social :
 Wifi : pré-caching des contacts et images de contacts
en tâche de fond, données en https car peu sécurisé
 3G : fonctionnement standard, pas de https (trop lourd)
 2G / Edge : fonctionnement dégradé, pas de
chargement des images

70. Caching de contenu
• Certains contenus sont accessibles en
offline (caching ou synchronisation)
• On peut utiliser ces contenus
immédiatement
• L’application démarre en offline puis elle
se connecte dans un 2nd temps
• Ex. : Deezer, Pocket, Viadeo, …

71. Actions instantanées
et offline
• L’action est ‘enregistrée’ immédiatement
• La requête est envoyée à la prochaine
connexion
• Exemples dans Pocket et Mail : envoi,
tags, marquage lu, …
• On peut agir même sans réseau !

72. Latence
temps

73. Latence
temps
2G : jusqu’à 5 secondes !

74. Latence
1 sec
2 sec
3 sec

75. Latence => Grouping
1 sec
2 sec
3 sec

76. Grouping + compression
(zip)
1 sec
2 sec
3 sec

77. Compression
•
•
•
A considérer : lors de la requête
pour une liste, charger les
données des éléments
Grâce à la compression, ça ne
coûte pas trop cher côté réseau
Mais impact côté serveur

78. Vitesse perçue
A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Actions possibles

79. Vitesse perçue
A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Actions possibles
• Chargement de données
secondaires

80. Réduire les points
de friction

81. La friction
Ce qui empêche nos utilisateurs /
consommateurs d’avancer

82. Techcrunch: Reduce Friction, Increase Happiness

83. Techcrunch: Reduce Friction, Increase Happiness
Location de voiture entre
particuliers
Pb = récupérer les clés

84. Techcrunch: Reduce Friction, Increase Happiness
Location de voiture entre
particuliers
Pb = récupérer les clés
Getaround Carkit

85. Anti friction services

86. Solution :
Customer development

87. Customer development /
customer communication
• Vital sur mobile
• Commentaires app stores = la jungle
• Communication directe / support
• Learn

88. Trend: InApp feedback
• Eviter les commentaires négatifs sur les app
stores
• Récupérer retours et suggestions, le tout
avec le contact de l’utilisateur pour
investigations
• Des infos, des utilisateurs contents
=> Learn et early adopters

89. InApp feedback
Etes-vous satisfait ?

90. InApp feedback
Etes-vous satisfait ?
Oui
Notez l’app !
App store

91. InApp feedback
Etes-vous satisfait ?
Oui
Notez l’app !
App store
Non
Donnez-nous votre
feedback

92. InApp feedback
Etes-vous satisfait ?
Oui
Notez l’app !
App store
Non
Donnez-nous votre
feedback

94. Hub des capteurs

95. Le Web
des objets connectés

96. Adidas miCoach
Suivi entrainement
sportif
miCoach

97. Thermostat Nest

98. On ajoute des capteurs,
on se rajoute des pouvoirs

99. Des supers pouvoirs ?

100. Qui est télépathe ?

101. Transmission de pensée 1.0 :
• Latence de 30 secondes
• Nécessite de parler à voie haute
• Ne marche pas toujours => messagerie

102. Pouvoirs

103. Pouvoir
Transmission de pensée
Omniscience
Télékinésie
Maîtrise du temps
Prévoir l’avenir
Etre invincible / guérir
Lancer des éclairs
Voler
Téléportation

104. Pouvoir
Version
Transmission de pensée
1.0
Omniscience
0.8
Télékinésie
0.1
Maîtrise du temps
0.3
Prévoir l’avenir
0.1
Etre invincible / guérir
0.1
Lancer des éclairs
0
Voler
0.5
Téléportation
0.2

105. Pouvoir
Version
Transmission de pensée
1.0
Omniscience
0.8
Télékinésie
0.1
Maîtrise du temps
0.3
Prévoir l’avenir
0.1
Etre invincible / guérir
0.1
Lancer des éclairs
0
Voler
0.5
Téléportation
0.2
+ 3D printing
Mobile powered

106. Donnez du (super)pouvoir
à vos utilisateurs !

107. Pouvoir
Version
Transmission de pensée
1.0
Omniscience
0.8
Télékinésie
0.1
Maîtrise du temps
0.3
Prévoir l’avenir
0.1
Etre invincible / guérir
0.1
Lancer des éclairs
0
Voler
0.5
Téléportation
0.2
Conscience / intelligence collective
2.0
Mobile powered

108. Mobile & Social

109. Réseaux sociaux
• 819M d’utilisateurs mobiles Facebook
• 60 à 80% des utilisateurs deTwitter

110. Réseaux sociaux
• 819M d’utilisateurs mobiles Facebook
• 60 à 80% des utilisateurs deTwitter
• Intégrés nativement

111. Facebook AppCenter

112. Social2App

113. Social2App
AppStore
Les partages génèrent des downloads

114. Social2App
AppStore
App

115. Social2App
AppStore
Smart App
Banner
App

116. Social2App
• Mécanique « partage  consommation »
• Puissant, moteur d’acquisition et de
rétention
• Moteur de croissance virale
• Un peu lourd techniquement / coûteux

118. Facilité d’utilisation

119. Quelques don’ts

120. En mettre trop

121. Transposer ou encapsuler
du web

122. = vouloir faire rentrer
le web dans le mobile
@tomiahonen

123. Fire and Forget

124. Vouloir (trop) innover sur
l’UI/UX

125. Vouloir (trop) innover sur
l’UI/UX
• Risqué, demande de l’expertise, coûteux !
• Se concentrer sur le cœur de métier pour
la différentiation
• Contre exemples / besoins de
différentiation : Flipboard, Fantastical,
Mailbox, Any.do, Path, …

126. Ne pas réinventer
la roue
• Apple, Google, MS… ont investi des
millions dans l’UI/UX des OS
• Utilisez les guidelines / composants de
base au maximum
• Vos utilisateurs s’y retrouveront
• Validation et potentielle mises en avant

127. Ne pas adapter
par plateforme

128. Getting traction

129. Apps que les gens aiment –
Qu’est ce qui est le plus
important ?

130. + important
• Speed!
• 1ère impression
• Accomplir des tâches facilement

131. Cycle de vie
Découverte
(app store)

132. Cycle de vie
Découverte
(app store)
1ère ouverture /
1ères impressions

133. Cycle de vie
Découverte
(app store)
1ère ouverture /
1ères impressions
Tâches simples

134. Cycle de vie
Découverte
(app store)
1ère ouverture /
1ères impressions
Tâches simples
Tâches
Complexes

135. Cycle de vie
Découverte
(app store)
1ère ouverture /
1ères impressions
Mise à jour
Tâches simples
Tâches
Complexes

136. Cycle de vie
Découverte
(app store)
1ère ouverture /
1ères impressions
Mise à jour
Tâches simples
Tâches
Complexes

137. On boarding
Mettre plus de travail sur les
1ers contacts avec le service
(login, inscription, home, …)

138. On boarding
•
Tester régulièrement l’expérience
pour un nouvel utilisateur
•
Upsell features / call to action

139. Accomplir des tâches
facilement

140. Etapes
• Mobile Ready : Web services / APIs !
• Démarche produit
• Prototype fonctionnel
• Alpha / Beta

141. Démarche produit
• Regarder ce que font les autres
(compétiteurs, apps similaires, autres
domaines, …)
• Reviews sur les apps stores
• Interviews utilisateurs et autres outils Lean
• Conception : use cases, fonctionnalités,
UX/UI, …

142. Personas
• Personnages fictifs qui ont des vrais
problèmes
• Issus du monde réel (interviews, data, …)
• Prisme pour penser à d’autres utilisateurs
qu’à soi-même
• Outil de conception et de marketing (mesure,
segmentation, ciblage / message)

143. Personas
Source : http://mobile.smashingmagazine.com/2013/07/04/top-ten-app-part-1-idea-and-design/

144. Répondre au 3 principaux
use cases
• Les problèmes que votre service résout /
points de friction résolus via mobile
• Rechercher ces cas en situation de mobilité /
pas forcément les mêmes que sur le web
• Ex. Mobile comme compagnon du service
(validation, alertes, …)

145. Répondre au 3 principaux
use cases
• Les problèmes que votre service résout /
points de friction résolus via mobile
• Rechercher ces cas en situation de mobilité /
pas forcément les mêmes que sur le web
• Ex. Mobile comme compagnon du service
(validation, alertes, …)
=> Fonctionnalités

146. Ordre de conception
• Cas d’usages prioritaires

147. Ordre de conception
• Cas d’usages prioritaires
• Cas d’usages secondaires

148. Ordre de conception
• Cas d’usages prioritaires
• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)

149. Ordre de conception
• Cas d’usages prioritaires
• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)

150. Ordre de conception
• Cas d’usages prioritaires
• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)
• Patterns des sous-écrans
• Ecrans des contenus

151. Flux
Home
News
Profil

152. Flux
Home
News
Profil

153. Flux
Home
News
Profil

154. Flux
Home
News
Profil

155. Flux VS Ecran
Concevoir des flux
plutôt que des écrans

156. Design Studio
• Conception en team (pluri-disciplinaire)
• Extraire les bonnes idées
• Sketching
Design Studio : tellement UX … tellement
créatif … tellement agile !

157. Itérer sur l’UI
• Commencer avec une UI simple
• Evoluer au fur et à mesure
• Se garder de vouloir obtenir tout de suite
une UI « trendy » comme celles des apps
phares que vous utilisez

158. Animations et effets ‘Wow!’
• Plus tard
• Ca ne fait pas le produit
• Tjrs plus impactant que prévu niveau charge
(réglages, allers / retours, …)
• Vous avez mieux à faire de votre temps / argent

159. Nice but costly
Menu Path
Timer Path

160. Nice but costly
Menu Linkedin

161. Customisation
ex. Toolbar
Message Mail
Message Viadeo
Playlist Deezer

162. Prototype fonctionnel
• Explorer les pbs techniques
• Réduire les risques
• Tests utilisateurs
• Faire Alpha / Bêta tester

163. Prototype fonctionnel
• Explorer les pbs techniques
• Réduire les risques
• Tests utilisateurs
• Faire Alpha / Bêta tester

164. Mobile 1st
Source : Infographie UX by Octo : Responsive et Mobile First

165. Clarity.fm
Web Desktop