Comment Vidéotron est passer d’un site vitrine à e-commerce pour se transformer en pleine pandémie mondiale ?

Comment Vidéotron est passer d’un site vitrine à e-commerce pour se transformer en pleine pandémie mondiale ?

2020 - 2021 | UPGRADE TON SITE | De la vitrine au e-commerce

Comment Vidéotron est passer d'un site vitrine à e-commerce pour se transformer en pleine pandémie mondiale ?

Vidéotron est un des géants de la télécommunication au Québec : téléphonie mobile, boxes internet, forfaits TV, et autres.

Demande initiale

Lorsque j'ai collaboré avec Vidéotron en pleine pandémie mondiale, l'enjeu était de taille. J'ai rejoins leur équipe de designers dans une période cruciale pour eux, instaurer la vente en ligne sur leur site publique existant. En effet, avant la pandémie, au Québec, prendre un téléphone et son forfait associé ne pouvait se faire qu'en succursale physique pour cette enseigne. S'ils ont fait appel à moi, c'est surtout pour ces 2 raisons principales :

  • Penser les parcours client·e·s efficacement pour rendre le site vitrine publique en mode e-commerce
  • Créer le squelette (wireframes) de chaque écran du parcours, en "mobile-first", avec toutes leurs subtilités : achat d'un téléphone avec ou sans forfait, choix du téléphone, du forfait, du nombre de giga, etc, jusqu'au paiement.

Leur demande : #MobileFirst #Wireframes #Stratégie #ParcoursClient·e·s

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour répondre à leurs attentes.

Extraits de l'audit du site de Margoo

Découverte et analyse

Au démarrage du projet, je me suis intégrée à l'équipe de designers existante, qui avaient démarré le projet depuis quelques semaines sur la phase exploratoire : entrevues client·e·s, personas, objectifs stratégiques et business. J'ai donc pris connaissance de toute leur phase de recherche, compris les enjeux et également découvert leurs contraintes techniques. J'ai ensuite organisé et animé un atelier collectif afin qu'on imagine nos process internes de travail idéaux. 

Conception

J'ai travaillé sur ce projet en binôme UX / UX avec un autre binôme UI / UI. Côté UX, nous nous assurions de concevoir tous les parcours de navigation possibles avec leurs subtilités en créant des prototypes interactifs (au format wireframes) en mobile-first. Chaque écran a été pensé pour se rapprocher le plus possible de la réalité pour les tests utilisateur·rice·s qui suivaient à chaque nouvelle itération et phase du projet.

Tests et itérations

Chaque phase du projet a été testé et amélioré afin de s'assurer d'être au plus proche des besoins réels des client·e·s, grâce à une étroite collaboration avec la chercheuse UX dédiée au projet. Tous les tests utilisateur·rice·s ont été organisés, préparés par mes soins, puis modérés par la chercheuse UX de notre équipe pour qu'il n'y ai aucun risque de biais des résultats.

Extrait de changements réalisés suite à nos tests utilisateur·rice·s

Changements réalisés sur le système de filtres : voici l'avant, après.

Actions réalisées

Pour rendre cette conception la plus centrée utilisateur·rice·s possible

Étude de la concurrence et veille inspirationnelle

J'ai réalisé un benchmark complet sur le secteur pour mieux évaluer le marché de la téléphonie mobile au Québec et comprendre leurs pratiques d'achats en ligne et langage (oui on ne dit pas sur un CTA "acheter" mais plutôt "magasiner").

Respect des bonnes pratiques et conception "mobile-first"

L'équipe de design UX / UI et moi-même avons travaillé main dans la main à la création de tous les écrans du parcours client·e·s de bout-en-bout : de la fiche produit, au tunnel d'achat, en passant par la courriel de confirmation d'achat, jusqu'à l'espace client·e·s

    Tests utilisateur·rice·s modérés

    J'ai réalisé l'ensemble des protocoles de tests et leurs scénarios, puis j'ai visionné en tant qu'observatrice silencieuse les différents tests réalisés afin de les analyser en profondeur et de rendre un dossier complet des résultats observés et mentionnés.

    Mon rôle

    J'ai réalisé ce projet en tant qu'UX Designer principale et ait changé de binôme UX en cours de route, j'ai donc d'abord collaborer avec Michael Descharles, puis Katheleen Lemaire. La chercheuse UX en place qui nous a également accompagné sur le projet était Émilie Bigras.

    Toi aussi, comme Vidéotron, tu aimerais upgrader ton site vers du e-commerce ?

    Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !
    [dsm_button button_one_text="UPRADER SON SITE" button_one_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijk4NzUxMTgzMCJ9fQ==@" button_two_text="Me contacter" button_two_url="mailto:bonjour@petitspas-design.fr" button_alignment="center" _builder_version="4.27.5" _dynamic_attributes="button_one_url" _module_preset="default" custom_button_one="on" button_one_text_color="#F0EFE8" button_one_font="||||on||||" button_one_icon="$||divi||400" button_one_icon_color="#F0EFE8" custom_button_two="on" button_two_border_width="1px" button_two_border_color="#F0EFE8" button_two_icon="$||divi||400" button_two_icon_color="#F0EFE8" locked="off" global_colors_info="{}" button_one_bg_color__hover_enabled="on|hover" button_one_bg_enable_color__hover="on" button_one_text_color__hover_enabled="off|desktop" button_two_text_color__hover_enabled="on|hover" button_two_text_color__hover="#F0EFE8" button_two_bg_color__hover_enabled="on|hover" button_two_bg_color__hover="RGBA(255,255,255,0)" button_two_bg_enable_color__hover="on" button_one_bg_color__hover="RGBA(255,255,255,0)"][/dsm_button]

    Aperçu du projet

    Contexte

    Vidéotron amorçait un virage de digitalisation de ses produits et services conséquent lorsque la pandémie COVID-19 est arrivé. Ils ont alors dû redoubler d'efforts et mettre tout en oeuvre pour rendre la vente en ligne sur leur site fonctionnel rapidement et efficacement. En effet, par exemple, il n'était alors pas possible jusque là de commander un téléphone et de choisir son forfait associé en ligne. Le passage en succursale était obligatoire. Leur site n'était alors qu'une vitrine. C'est dans le cadre de cette refonte que je suis intervenue : rendre leur site e-commerce.

    Demande et objectifs

    En effet, le but global de ce projet était de permettre à n'importe qui d'acheter un de leurs produits ou services depuis leur site web sans avoir à se rendre en boutique physique. Pour ça, l'entreprise a bâti une grande équipe de designers avec un Lead UX, un Lead UI, une chercheuse UX et plusieurs UX et UI designers réparties en binômes sur des sections précises du site :

    • certain·e·s étaient sur la partie vente en ligne des boxes internets et leurs forfaits pour les particuliers ;
    • d'autres sur la partie TV pour les particuliers : routeur et leurs forfaits ;
    • d'autres sur la partie vente en ligne spécifiques aux entreprises ;
    • puis de mon côté, avec mon binôme, nous étions sur la partie vente en ligne pour les particuliers de téléphones mobile et leurs forfaits.

    Il a donc fallut également s'arrimer tous ensemble et travailler entre designers en co-conception pour bâtir un parcours cohérent et aligné entre nos écrans et qui permettent également aux client·e·s de passer d'un tunnel à un autre afin de bénéficier de formules en packs et de rabais possible en fusionnant plusieurs offres entre elles.

    Mon intervention

    Au delà de mon rôle d'UX Designer principale sur ce projet, je suis également intervenu au sein de l'entreprise pour repenser certain·e·s parties des tableaux de bord en ligne utilisés par les commerciaux en succursale pour qu'ils s'adaptent également à la restructuration des offres (personnalisation des forfaits disponibles par exemple) qui sont arrivés tout naturellement avec la e-commercialisation de ces dernières.

    Résultats

    Ventes en ligne constatées dès le déploiement.

    Environnement de travail

    Collaboration collective au sein d'une équipe pluridisciplinaire qui s'est rassemblé à chaque jalon du projet.

     

    Interlocuteur·rice·s

    • Products Owners et équipe de développement externe
    • Lead UX Designer et UX Designers sur le projet
    • Lead UI Designer et UI Designers sur le projet
    • Chercheuse UX
    • Directeur·rice·s et responsables des différentes sections du site
    • Équipe CX

    Outils utilisés

    • Pour les entreveus et les tests : Teams
    • Pour la conception : Figma

    GRATUIT

    Obtiens 25 idées d'actions éthiques
    pour améliorer ton site

    Découvre 25 idées d'actions pour bonifier ton site et le rendre plus durable, inclusif, écologique et performant.

    Si tu as aimé le cas de Vidéotron,
    tu devrais également adorer découvrir celui-ci...

    Image représentant le site Margoo

    Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

    Exemple du revamp de la charte graphique de Margoo, avant et après

    Sobriété numérique

    Donner une seconde vie à son site web rapidement et facilement, c'est possible !

    Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

    → Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

    → La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

    → Ma routine d’analyse de site : comment je mesure l’impact réel de ton site web