Produit mobile

Mobile Product

@AlexJubienAlexandre

Jubien

[email protected]

[email protected]

Pioneer of mobile development

2003 - 2007

[email protected]

Games Apps

Deezer Viadeo

[email protected]

(main competitor of Spotify) (main competitor of Linkedin)

2008 - 2012

ThinkMobileMobile & Tablets Consulting

Passion Expertise Commitment

Social Strategy Monetization M-Commerce

Webapps Innovation iPad Apps Product iPhone Usage

Android Agile R&D Blackberry Multiplatform Windows Phone

Massive Downloads Marketing Appstores

Investment Audit Solutions

ThinkMobile.fr

http://www.ThinkMobile.fr/

Mobile Product= Product

Mobile Product= Product

• Qui sont vos utilisateurs ?

• Qui sont vos clients ?

• Quel(s) problème(s) ont-ils ?

• Quelles sont les solutions ?

• …

Build the right product

+

Build it right

Product that people love =

Customer development / Lean

+

Build it right



+

Agile / Scrum



+

Agile / Scrum


SVPG.com (Silicon Valley Product Group)

http://svpg.com/

Lean Startup

• Livre d’Eric Ries, mouvement Lean

• ‘‘Fail fast, suceed faster’’

• Rencontrer les vrais besoins

• Pivots

• Eviter le gâchis

http://theleanstartup.com/

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

http://mag.wdpm.org/2012/09/17/une-definition-lean-startup/

http://www.youtube.com/watch?v=WAdikBfKeD8

Build – Measure – Learn

MVP

• Minimum Viable Product

• Preuve de concept

• Valider les hypothèses, décrouvrir

• On itère dessus ensuite

Release early

• Se confronter au plus tôt : Aux utilisateurs Aux problèmes Aux risques

• Rationaliser, prouver, confronter - attention aux intuitions !

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

Agile

• SCRUM, Kanban, eXtreme Programming…

• Des pratiques et des outils pas trop embêtants, que l’équipe choisit d’utiliser

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

http://www.youtube.com/watch?v=XU0llRltyFM

A

B

C

Itératif = droit au changement

changement

Lean, Agile, Design Thinking…

Un point commun :

l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents

Lean, Agile, Design Thinking…

Un point commun :

l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents

=> Inclure les développeurs !

Transition

Smartphones ?

Smartphones ?45%

Trafic web mondial ?

Trafic web mondial ?10 à 20%

Plus de SIMs activées que d’hommes sur terre

Mobile guru @TomiAhonen

Plus adopté que le stylo !!!

Mobile guru @TomiAhonen

Révolutionnaire

Pourquoi ?

Partout, tout le temps

Même là – 75% !

Parité

There’s an app for that

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

Compagnon de vie

Compagnon de vie

Vie

=gens moments lieux objets

Compagnon de vie

Vie

=gens moments lieux objets

Facebook Path Foursquare Pinterest

Design for interruption

PC/Tablet = Scubadiving Mobile = Snorkeling

Rachel @Hinman

https://twitter.com/Hinman




• Attention partielle

• Prévoir les interruptions => sauvegarder les états

• Prévoir le retour à l’application


• Attention partielle

• Prévoir les interruptions => sauvegarder les états

• Prévoir le retour à l’application

• Et n’interrompez pas trop non plus ! (notifs)

Monde digital / Monde physique

Monde digital / monde physique

Code barre

Code barre

Chasse aux trésors

Scanbucks

Code barre

Comparateur de prix

Prixing

QR Code

30%

http://bit.ly/AlexJubien

QR Code

• Catalogue papier (But)• Magazines (Inrocks)• Affiches• Emballage Produits

(colle Pater)• Street marketing• …http://bit.ly/AlexJubien

Réalité augmentée

Réalité augmentée Géoloc


M-Paiement


M-Commerce M-Paiement

M Commerce

Tesco virtual supermarket in a subway station - South Korea

http://www.designboom.com/technology/tesco-virtual-supermarket-in-a-subway-station/

Ancrez dans le monde réel

Butler mode

• John Paul

Butler mode

• John Paul

• Et si votre service était une personne ?

• Ex Deezer, Viadeo

Instantanéité

5 h

TV

Météo

5 h

TV Web

5 m

Météo

5 h

TV Web

5 m

Mobile

5 s

Météo

Vos désirs exaucés


5 sEnvie d’écouter

une musique

Deezer


5 sEnvie d’écouter

une musique

Besoin d’appelerun contact pro

5 s

Deezer

Viadeo

Quelle est la plus grosse contrainte ?

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

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, …

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 !

Latence

Conne

xion

au s

erve

ur

tempsR

écupération

des données

Latence

2G : jusqu’à 5 secondes !

Conne

xion

au s

erve

ur

tempsR

écupération

des données

LatenceExp

érie

nces

Etude

s

Compé

tenc

es1 sec 2 sec 3 sec

Latence => GroupingExp

érie

nces

+ é

tude

s

+ co

mpé

tenc

es

1 sec 2 sec 3 sec

Grouping + compression(zip)

Expér

ienc

es +

étu

des

+ co

mpé

tenc

es

1 sec 2 sec 3 sec

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

Vitesse perçue

A minima, améliorer la perception de l’utilisateur :• Chargement d’un minimum

de données en amont• Actions possibles

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

Réduire les points de friction

La friction

Ce qui empêche nos utilisateurs / consommateurs d’avancer

Techcrunch: Reduce Friction, Increase Happiness

http://techcrunch.com/2011/10/16/reduce-friction-increase-happiness/









Location de voiture entre particuliers

Pb = récupérer les clés











Location de voiture entre particuliers

Pb = récupérer les clés

Getaround Carkit











Anti friction services

Solution :Customer development

Customer development / customer communication

• Vital sur mobile

• Commentaires app stores = la jungle

• Communication directe / support

• Learn

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

InApp feedback

Etes-vous satisfait ?

InApp feedback


Notez l’app !

Oui

App store

InApp feedback


Notez l’app !

Donnez-nous votre feedback

Oui Non

App store

InApp feedback


Notez l’app !

Donnez-nous votre feedback

Oui Non

App store

http://www.apptentive.com/

Hub des capteurs

Le Webdes objets connectés

miCoach

Adidas miCoach

Suivi entrainement sportif

Thermostat Nest

On ajoute des capteurs, on se rajoute des pouvoirs

Des supers pouvoirs ?

Qui est télépathe ?

Transmission de pensée 1.0 :

• Latence de 30 secondes

• Nécessite de parler à voie haute

• Ne marche pas toujours => messagerie

Pouvoirs

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

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

Pouvoir Version Mobile powered


Omniscience 0.8

Télékinésie 0.1





Voler 0.5

Téléportation 0.2

+ 3D printing

Donnez du (super)pouvoir à vos utilisateurs !

Pouvoir Version Mobile powered


Omniscience 0.8

Télékinésie 0.1





Voler 0.5

Téléportation 0.2

Conscience / intelligence collective 2.0

Mobile & Social

Réseaux sociaux

• 819M d’utilisateurs mobiles Facebook

• 60 à 80% des utilisateurs deTwitter

Réseaux sociaux

• 819M d’utilisateurs mobiles Facebook

• 60 à 80% des utilisateurs deTwitter

• Intégrés nativement

Facebook AppCenter

Social2App

Social2App

AppStore

Les partages génèrent des downloads

Social2App

AppStore

App

Social2App

AppStore

App

Smart App Banner

Social2App

• Mécanique « partage consommation »

• Puissant, moteur d’acquisition et de rétention

• Moteur de croissance virale

• Un peu lourd techniquement / coûteux

Facilité d’utilisation

Quelques don’ts

En mettre trop

Transposer ou encapsuler du web

= vouloir faire rentrer le web dans le mobile

@tomiahonen

Fire and Forget

Vouloir (trop) innover sur l’UI/UX

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, …

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

Ne pas adapter par plateforme

Getting traction

Apps que les gens aiment –

Qu’est ce qui est le plus important ?

+ important

• Speed!

• 1ère impression

• Accomplir des tâches facilement

Découverte (app store)

Cycle de vie


1ère ouverture / 1ères impressions

Cycle de vie



Tâches simples

Cycle de vie



Tâches simples

Tâches Complexes

Cycle de vie



Tâches simples

Mise à jour

Tâches Complexes

Cycle de vie

On boarding

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

• Tester régulièrement l’expérience pour un nouvel utilisateur

• Upsell features / call to action

On boarding

Accomplir des tâches facilement

Etapes

• Mobile Ready : Web services / APIs !

• Démarche produit

• Prototype fonctionnel

• Alpha / Beta

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, …

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)

Personas

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

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



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, …)

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

Ordre de conception

• Cas d’usages prioritaires

Ordre de conception


• Cas d’usages secondaires

Ordre de conception



• Choix de navigation (home, topbar, menu, …)

Ordre de conception



• Choix de navigation (home, topbar, menu, …)

• Patterns des sous-écrans

• Ecrans des contenus

Flux

Home News Profil

Flux VS Ecran

Concevoir des flux plutôt que des écrans

Design Studio

• Conception en team (pluri-disciplinaire)

• Extraire les bonnes idées

• Sketching

Design Studio : tellement UX … tellement créatif … tellement agile !

http://www.qualitystreet.fr/2012/09/21/design-studio-tellement-ux-tellement-creatif-tellement-agile/

http://www.qualitystreet.fr/2012/09/21/design-studio-tellement-ux-tellement-creatif-tellement-agile/

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

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

Nice but costly

Menu Path Timer Path

Nice but costly

Menu Linkedin

Customisationex. Toolbar

Message Mail Message Viadeo Playlist Deezer

Prototype fonctionnel

• Explorer les pbs techniques

• Réduire les risques

• Tests utilisateurs

• Faire Alpha / Bêta tester

Prototype fonctionnel

• Explorer les pbs techniques

• Réduire les risques

• Tests utilisateurs

• Faire Alpha / Bêta tester

http://hockeyapp.net/features/

https://testflightapp.com/

Mobile 1st

Source : Infographie UX by Octo : Responsive et Mobile First

http://blog.octo.com/infographie-ux-by-octo-responsive-et-mobile-first/

Clarity.fm

Web Desktop

http://Clarity.fm/

Produit mobile

Documents

Transcript of Produit mobile