circle-loader

Transports en commun, trains, bus, VTC, vélos, taxis, trottinettes, autopartage, covoiturage, … Les utilisateurs sont actuellement submergés par un grand nombre de services de mobilité. Contraint de passer d’une application à l’autre, c’est de ce constat qu’est né le MaaS. L’objectif : Regrouper au sein d’une même plateforme une multitude de services de mobilité. Mais qui dit “unification de plusieurs services”, implique forcément “expériences et interfaces différentes”. 

application-MaaS

Se pose alors la question de savoir comment optimiser au mieux une application de MaaS, en matière d’UX et UI design. Notre Lead Designer, Igor Tcherepoff, s’est ainsi penché sur la question en préparant un guide explicatif. Scindée en 3 articles, la première partie a pour but de clarifier les notions de MaaS et d’UX et UI design appliquées aux applications de mobilité. Pour ensuite, dans un deuxième temps, passer de la théorie à la pratique. Et enfin, terminer en vous dévoilant la présentation de notre prototype d’application MaaS.

En route vers les applications MaaS

La révolution de l’expérience de mobilité

Beaucoup plus centré sur l’expérience utilisateur, ce concept tout droit venu des pays nordiques, prône une mobilité servicielle. D’où l’acronyme “Mobility as a Service”. Le but : Simplifier et fluidifier le parcours utilisateur. Véritable “assistant de voyage”, l’utilisateur pourra ainsi planifier et réserver son trajet porte-à-porte. Le tout sur une même plateforme mobile, quel que soit le type de trajet intermodal ou multimodal. Pour en savoir plus, n’hésitez pas à consulter notre article consacré exclusivement au MaaS.

banner-article-lyko-tech

Les quatre niveaux d’applications MaaS

Convoitée à la fois par les utilisateurs, les villes ou encore l’industrie du tourisme, il est important de rappeler qu’il existe différents niveaux de plateformes MaaS. Ces différents paliers ont été notamment définis par Joël Hazan, Nikolaus Lang et Hind El Abassi Chraibi, du Boston Consulting Group. Au nombre de quatre, chaque niveau est incrémenté d’une fonctionnalité supplémentaire.

  • Niveau 1 : « planification », application avec pour seul but de s’informer sur son itinéraire. C’est notamment le cas de Google Maps, la nouvelle version d’Apple Plans, Mappy ou encore Moovit.
  • Niveau 2 : « planification + vente de billets », caractérisé par les plateformes agrégeant différents services de mobilité. L’utilisateur a la possibilité de les réserver et des commissions sont générées sur chaque vente. C’est notamment le cas de l’agence de voyage Trainline ou encore avec la future application d’Île-de-France Mobilités d’ici fin 2020.
  • Niveau 3 : « planification + vente de billets + tarification », distingué du niveau 2 avec la possibilité d’établir une véritable stratégie d’acquisition client via la tarification des opérateurs. C’est notamment le cas de Whim, application référence du MaaS, surnommée le « Netflix de la Mobilité ». Ou encore le Pass Citymapper. Ces deux acteurs ont mis en place un abonnement mensuel permettant à l’utilisateur d’utiliser différents modes de transport mis à sa disposition.
  • Enfin, Niveau 4 : « planification + vente de billets + tarification + incitations », dernier pallier avec la mise en place de stratégies incitant l’utilisateur à opter pour l’utilisation de leur application MaaS ou encore de modifier l’usage de ses modes de transport habituels.

Comme nous pouvons le voir avec cette pyramide, une application complète de MaaS se doit de combiner différentes fonctionnalités essentielles. De la planification, à la réservation en passant par le paiement ou l’incitation, il est primordial de se pencher sur l’aspect UI/UX design afin de déployer la plateforme la plus fonctionnelle et fluide possible. De ce fait, il sera possible de présenter une application entièrement au service de l’utilisateur.

UI et UX Design, déterminants dans l’expérience mobilité

Seule une lettre change et pourtant l’UI et l’UX Design sont deux notions complémentaires mais différentes. Encore trop souvent confondus, ces deux concepts abordent le design produit, mais sous différents angles. Rien de mieux que de l’illustrer avec un objet de la vie courante. À savoir, le flacon de ketchup Heinz.

ui-ux-design-ketchup-heinz

Comme illustré, nous avons affaire à deux flacons de ketchup, et pourtant la manière de l’utiliser diffère. En effet, avec la première bouteille de ketchup, il est plus difficile de venir récupérer le reste du produit quand la bouteille est presque fini. Cela peut rendre l’utilisation du produit désagréable. Cependant, du point de vue esthétique, la première bouteille peut être considérée comme plus attractive.
Bien que le design peut sembler moins attrayant, avec la deuxième bouteille de ketchup, il est plus facile pour l’utilisateur d’utiliser le produit, même en fin de vie. C’est de là que naît l’UX Design. Acronyme anglais de User Experience Design, l’UX Design revient à concevoir un produit ou un service, en se concentrant sur l’expérience utilisateur.

Deux entités différentes…

L’UX designer se focalise donc sur la manière dont l’utilisateur interagit avec le produit, dans notre cas, une application. Il faut ainsi savoir anticiper les réactions émotionnelles de l’utilisateur face à votre produit. En bref, l’UX designer est chargé de déterminer le fonctionnement de l’application. Cela passe majoritairement par : la recherche utilisateur, la définition de personas, l’architecture de l’information, l’arborescence, les interactions, le prototypage et les tests utilisateurs. Comme souligné par Travis Carter et Tom Gilovich dans « Journal of Personality and Social Psychology », « pour un même prix, l’homme favorise l’achat d’une expérience agréable auquel il s’est lié sentimentalement plutôt qu’un achat matériel sans émotion. » Là est le Graal de l’UX designer.  

Mais qu’en est-il de l’UI Design ? Acronyme anglais de User Interface Design, l’UI revient donc à penser côté interface. En effet, cela se traduit à rendre le produit le plus attrayant possible. Il faut que l’application soit stimulante visuellement, et que l’utilisateur ait envie d’interagir avec l’application. Cela passe notamment par la charte graphique, les illustrations, la typographie, la composition des écrans, les couleurs, les animations ainsi que le design des boutons et des éléments de navigation.

…mais indissociables

De ce fait, vous l’aurez compris, l’UX et l’UI sont deux entités indivisibles. Et cela s’applique également dans la conception d’une application MaaS. Effectivement, l’apparence de l’interface de votre plateforme MaaS joue un rôle important dans l’expérience utilisateur. Ce dernier doit se sentir en confiance. Il sera ainsi plus enclin à réserver et payer ses différents modes de transport, directement depuis votre application de mobilité. C’est cette expérience qui permettra d’apporter une image de confiance à votre application et ainsi de le fidéliser. Il est donc indispensable d’établir une réelle stratégie en amont autour du parcours utilisateur. Créer une synergie entre l’UI et l’UX Design, c’est s’assurer d’offrir à son client une application MaaS ergonomique, avec un maximum de confort, efficacité et praticité.

Pour résumer en quelques mots, afin d’avoir une expérience utilisateur réussie, il faut que votre application ait un visuel attrayant (UI) avec une utilisation intuitive (UX).

Décomposition du processus de réflexion et production

Lors de la conception d’une application mobile MaaS, c’est toute une équipe qui se mobilise. De l’UX Designer au UI Developer en passant par le Full-Stack Developer, la création de la solution MaaS passe généralement par 3 grandes étapes clés. À savoir, la « R&D », la « Création » et « la Production ».

1) Recherche & Développement d’une solution MaaS

Commençons donc par le R&D, prémisse du projet. Il fait principalement intervenir L’UX Designer. Ce dernier a pour mission dans un premier temps d’établir la stratégie utilisateur en définissant les 4 critères suivants :

  • La stratégie : comprendre et mettre en lumière les attentes des utilisateurs concernant l’application MaaS idéale mais aussi la manière dont nous allons y répondre.
  • L’environnement : définir le contexte et les fonctionnalités que doit avoir de notre produit. C’est également le moment opportun pour penser aux contraintes et problématiques qui peuvent notamment découler du MaaS. Comme par exemple, les processus de réservation qui diffèrent entre un service de VTC et de trottinettes. 
  • Le squelette : avec la conception des zonings (la structure des pages clés) et des wireframes (animations, fonctionnement de la page et le type de contenus qui composent chaque grande zone).
  • Et enfin, la surface, avec la création d’une maquette, incluant les différents screens de l’application mobile MaaS.

2) La création de l’application MaaS

Vient ensuite, l’étape dite de « création ». Cette deuxième phase fait principalement intervenir le Graphic Designer. Il a pour mission d’établir l’environnement graphique, lié aux valeurs de la marque. Il est important d’immerger l’utilisateur dans un univers propre à votre identité. C’est donc dans ce sens que le Graphic Designer va chercher à déterminer :

  • La Charte graphique, avec la définition des couleurs, typographies, formes, textures, …
  • Les Visuels, par le biais de photos, illustrations, vidéos, iconographie, logotype, …
  • La composition des pages, avec le design des éléments de l’interface tels que les boutons, menu burger, …
  • Les Animations : avec le Motion design, animations, transitions de pages,…

3) La production de l’application mobile MaaS

C’est à cette étape que le Designer Graphic et l’UI Developer s’unissent dans le projet. En effet, l’UI Developer a pour mission de déployer les maquettes et animations pensées par l’équipe Design. C’est à ce moment que l’on rentre dans l’étape de production. L’interface va alors pouvoir voir le jour avec le « développement Front ». Une fois fini, c’est au tour du Developer Full-Stack de rentrer en jeu. C’est lui qui va principalement travailler sur le Back Office, partie invisible côté utilisateur. Il est en général en charge de la mise en place, de la configuration, de la maintenance du serveur et de la base de donnée.

Pour conclure cet article, retrouvez ci-dessous un récapitulatif du cheminement de production d’une solution MaaS.

Découvrez dès maintenant la deuxième partie de cet article. Au sommaire : Comparaison de 5 applications de mobilité en matière d’UX/UI Design suivie de la conception de notre prototype de notre application MaaS.

À lire ensuite : [DESIGN] Imaginons & Imageons l’application MaaS de demain (Partie 2/3)

Tags:

Post a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *