mrv
srd
Durée

Mars - Août 2020

Role

UX, UI, Strategie

Outils

Figma + GSuite
(Google Analytics)

Team

1 Designer
2 Devs

Fit-Plans : refonte de site

Introduction

Fit-Plans est une entreprise spécialisée dans la préparation et la livraison de plans journaliers et de plats mesurés à la calorie près, à destination des pratiquants de sport.
Basée à Montréal depuis 4 ans, l'équipe est constituée du CEO qui occupe également le poste de CTO, d'une responsable des opérations, et d'un chef coordonnant une équipe de 10 cuisiniers.
La plupart des utilisateurs préfèrent appeler directement l’entreprise pour commander au lieu d’utiliser le site, ce qui constitue une perte de temps pour le staff.

Process
1. Découverte 2. Définition 3. Design 4. Test

Process

Découverte

Analytics
Audit
Questionnaire

Définition

Personas
Userflow
Priorisation matrix

Design

Wireframing
UI Design
Prototyping

Test

Usability testing
5 second test

Problematique
Comment redesigner le site afin de le rendre plus facilement utilisable ?
  • Réfléchir aux différentes parties du site et les assembler de manière homogène
  • Produire une expérience égale sur desktop et mobile
  • S'assurer que la refonte convienne aux besoins des utilisateurs

1. Découverte

Analytics - Audit - Tests - Questionnaire
The “before”

Le site précédent avait été conçu par le CEO, sur son temps libre. Il n’avait jamais été une priorité jusqu’alors. Les améliorations à implémenter ne restaient qu’au stade de projet.

Anciennes pages du site Fit-Plans
Anciennes pages de détail d'un plan, de sélection des plats, et de personnalisation d'un plan du site Fit-Plans

Après avoir analysé le site, il était nécessaire de recueillir des avis auprès des utilisateurs.

Questionnaires

J'ai mis en place un programme de fidélité afin d’obtenir les avis des utilisateurs contre des codes de réduction.
Le questionnaire a été divisé en 3 thèmes :

  • Habitudes des clients, motivation et comportement
  • Avis sur le service
  • Avis sur le site
STATISTIQUES
84% des utilisateurs

trouvent les plats trop difficiles à commander, le parcours trop long, et préfèrent commander par téléphone

2. Definition

Personas - Userflow- Priorisation matrix
Le parcours idéal

L’ancien parcours oblige l’utilisateur à passer par 6 étapes pour commander un plan.
Avec le nouveau parcours, le nombre d’étapes est divisé par 2. L’utilisateur peut directement accéder au produit qui l'intéresse à partir de la page d’accueil et sélectionner son plan. La dernière étape consiste à ajouter ou supprimer des plats précis directement à partir de la page de détail du plan.

3. Design

Wireframing - UI Design - Prototyping
Fit-Plans home page wireframe
1. Explication claire du concept

La première phrase visible du site explique de façon claire la proposition de valeur du service.

2. Définition des étapes

La section secondaire indique les différentes étapes de commande

3. Lien direct vers les offres

Les utilisateurs sont menés directement vers les produits.

Fit-Plans product page wireframe
4. Filtre

Le filtre permet de personnaliser les résultats de recherche

5. Lien vers le calculateur de calories

Le calculateur de calories guide les utilisateurs indécis vers un plan adapté

6. Localisation

Avant de pouvoir commander, le système s’assure que la localisation de l’utilisateur soit bien prise en charge

Fit-Plans detail page wireframe
7. Informations

Des informations sur le plan dans son ensemble sont affichées

8. Sélection des plats

L’utilisateur sélectionne directement les plats dans la page

Fit-Plans mobile redesign

Le site a également été réalisé en version mobile

Fit-Plans mobile redesign

4. Test

Usability testing - 5 second test
S’assurer que le site soit naviguable

Deux tests ont été menés en remote avec un prototype afin de s’assurer que l’interface soit bien utilisable

STATISTIQUES
92% des utilisateurs testés

jugent l'explication du concept et le bouton menant à la commande comme des éléments importants

Pour en savoir plus sur le projet

Vous pouvez visiter le site en beta ou consulter le cas pratique en entier

Voir le cas pratique détaillé
Accéder à la bêta