Conception UX, création des interfaces de la web application mobile motion

  • Ui Design
  • Ux design

Web application innovante, Mobilemotion permet d’indiquer l’adresse de son site internet pour générer automatiquement une version et une application mobile. Sa technologie permet de comprendre la structure du site, ses composants, ses textes et visuels pour proposer une version fidèle que l’on peut consulter sur téléphone mobile. L’utilisation et les parcours utilisateurs étant assez complexe, Mobilemotion ont fait appel à mes services pour les rendre simples, intuitifs, inspirants, et amener l’utilisateur en bout de parcours à créer une version originale de son site internet en version mobile.

 

Mobile-motion---Mise-en-situation---Logo

 

Conception et prototypage du service.

Les parcours se décomposent en 3 étapes simples, composées de sous ensemble. La première étape consiste à renseigner l’adresse de son site internet et d’indiquer son secteur d’activité. Mobile motion analyse et récupère votre site et décompose automatiquement la structure des pages et des menus. Que vous pouvez modifier, éditer, supprimer. Une fois cette étape d’onboarding effectuée vous arrivez dans le configuration de votre version mobile, ou vous retrouvez toutes les pages et arborescence de votre application et pouvez configurer les couleurs, textes, pictogrammes, visuels et modifier les blocs et composants de votre Design. Une fois configuré, vous passez à l’export et la consultation de votre version mobile et le règlement du service. Il était essentiel ici de tracer les plans, de créer un prototype fonctionnel pour valider ces parcours et s’assurer de la bonne ergonomie de l’ensemble.

 

Mobile-motion---UX-Design---Wireframes

 

Création de l’identitée visuelle du service

Mobile Motion est un service nouvel génération, orienté vers un publique grand publique adepte aux outils informatiques. L’image développée ici est clair, simple, épuré, permettant de ne garder que l’essentiel et ce qui est utile à la compréhension et aux interactions avec Mobile motion. Des touches de couleurs attire l’attention vers des éléments importants et la sobriété permet de s’adapter à toute catégorie socio professionnelle.

 

Mobile-motion---UI-Design---Mise-en-situation

UI Design, création des interfaces

Nous avons constitué un Design système simple, permettant de capitaliser les différents composants des interfaces et de créer un grand nombre d’interfaces rapidement. Il était important de garder des visuels inspirationnels tout au long du parcours pour garder l’attention de l’utilisateur, de le projeter dans la version mobile de son site internet, et de lui donner envie d’aller au bout du parcours. Les interfaces sont sobres et élégantes et dégage une image de simplicité, les couleurs sont utilisées judicieusement pour attirer le regard sur des points importants de l’ergonomie: étapes, validation, éléments sélectionnés.

Mobile-motion---UI-Design---Interfaces

UI Design des composants mobiles

Le service propose une version automatisée de son site internet, mais l’utilisateur peut à tout moment revenir sur ce qu’il lui est proposé et configurer lui mêmes les différents composants qui constitue ses pages, leur ordre, les couleurs, les textes, etc… Un travail particulier à été fait pour proposer un catalogue fournis de composants, de blocs et de templates mobile pour donner un vaste choix à l’utilisateur, ordonné par thématiques pour qu’il s’y retrouve rapidement.

 

 

Mobile-motion---UI-Design---Mise-en-situation-composants

 

 

UI Design des composants mobiles

60 interfaces de ces composants ont été conçues et créées, réparties par familles, afin de donner à l’utilisateur du service un large choix pour son application mobile. Cette variété de composants lui permet de créer l’application mobile qui lui plait et répond à ses besoins. Il peut les sélectionner très facilement en un simple clic et ainsi constituer son application.

 

 

Mobile-motion---UI-Design---Composants