Logo David Ronchaud
mackbook pro container iPhone 6S plus container
Stratégie de marque
ui / ux design
Intégration web
Design de documents

Refonte totale d'une plateforme bien-être

person
Client

Lifemotiv

update
Date

janvier - avril 2016

important_devices
Résultat du projet

lifemotiv.net

Description

Lifemotiv est la plateforme de bien-être en France. J'étais en collaboration avec un développeur back-end pour réaliser le MVP (Minimum Valuable Product) de cette plateforme.
Après un benchmark design de la concurrence et des plateformes de vente de contenu numérique, j'ai proposé plusieurs pistes graphiques. Partant sur le material design, j'ai réalisé les maquettes des écrans principaux (accueil, page de recherche, page d'auteur, page de présentation des parcours, pages de consommation de contenu, etc.) en trois tailles d'écrans : ordinateur de bureau, tablette et mobile. Pour ce faire, j'ai dû retoucher chaque image pour qu'elle soit dans l'atmosphère du site. J'ai aussi détouré certaines photos pour pouvoir les adapter au design.
Ensuite, j'ai intégré les maquettes sur symfony2 en utilisant Twig (petit frère du PHP et surtout moteur de template de symfony2), Sass (avec Gulp pour la compilation en css) et jQuery pour les animations et certains éléments d'interactions.

Lifemotiv maquette page d'accueil

Maquette de la page d'accueil en version desktop. Vous remarquerez que cette page a évolué depuis la création de cette maquette graphique, voir sur le site lifemotiv.net.

Lifemotiv page produit

Création de plusieurs fonctions jQuery pour animer le site et améliorer l'expérience utilisateur. Par exemple, sur cette page, la sidebar contenant les CTA de conversion suit le scroll pour toujours rester visible (elle s'arrête de descendre lorsque l'on atteint une section qui prend toute la largeur de l'écran : ici les sections "avis" ou "nous vous recommandons également"). Je vous invite à aller voir le site : lifemotiv.net/partner-yoga.

Lifemotiv page d'inscrpition

Design et intégration de toutes les pages annexes (inscription / connexion / paiements / mot de passe perdu / CGU / Aides / mes achats / profil utilisateur / etc.)

Lifemotiv page de recherche

Lifemotiv responsive

La plateforme est totalement responsive et fonctionne sur tous navigateurs (jusqu'à IE 9).