Site e-Learning WooCommerce & LearnDash

WKD est une entreprise anglaise d'élevage et dressage de chiens qui propose également des formations pratiques et bon marché en ligne pour changer le comportement des chiens. Leur site web e-learning et son LMS (Learning Management Software) ont été re-designés et repensés pour que les utilisateurs puissent profiter efficacement des cours en lignes principalement proposés sous la forme de vidéos. Nous avons revu l'identité visuelle de WKD et amélioré l'expérience utilisateur pour que leurs clients obtiennent le meilleur service possible. Le site a été développé avec Wordpress, et en particulier les plugins WooCommerce et LearnDash.

Team

1 directeur UX / UI et chef de projet
1 graphiste
1 Web Designer
1 Développeur Front-End
1 Développeur Worpress

Methodology

Atelier UX / UI
Méthodologie de la cascade

Tools

Lark
InVision
TeamWork
Adobe Xd
Adobe Illustrator
Adobe Photoshop

Technologies

HTML5, CSS, JavaScript, PHP, SASS, WordPress, Bootstrap, mySQL

Timeframe

2 mois

Spécifications au niveau design

Notre objectif principal était de rendre le site Web simplement conçu pour accéder plus facilement à la formation, car le site Web obsolète était très lourd avec beaucoup de contenu non organisé et empêchait les utilisateurs de trouver le contenu qu’ils voulaient.

De plus, nous avons cherché à reconstruire l’identité de la marque. Chaque composant du site Web n’était pas harmonisé et ne montrait pas vraiment l’identité de la marque avec de nombreuses couleurs qui ne semblaient pas aller ensemble. Il fallait une palette de couleurs articulée.

Pour le dernier, en plus de la surcharge de contenu, le site n’était pas optimisé pour les mobiles. Pour nous adapter à n’importe quel appareil, nous devions offrir une expérience constante sur différents types d’appareils.

S'assurer que les utilisateurs ont une expérience utilisateur positive

Comme nous l’avons mentionné ci-dessus, l’ancien site Web de WKD n’était pas vraiment convivial avec des contenus surchargés sans aucun système pour permettre aux utilisateurs de comprendre ce qu’ils offrent et de trouver ce que les utilisateurs recherchent. Offrir la nouvelle expérience utilisateur et les stratégies d’utilisabilité était nécessaire. La page du cours de formation était particulièrement démodée avec une mise en page et une séquence de contenu complexes qui semblaient difficiles à comprendre. Lors du prototypage, nous nous sommes concentrés sur les améliorations de l’architecture du site et la localisation des éléments en fonction de l’expérience utilisateur

Excellente conception de l'interface utilisateur afin de refléter l'identité de la marque

Afin de refléter l’identité de la marque et de se démarquer de la concurrence en offrant aux utilisateurs une expérience agréable, nous avons défini des règles de style cohérentes telles que les styles d’icônes, les couleurs et les polices.

Thème des couleurs

Nous avons proposé à notre client un nouveau thème de couleur composé de couleur rose et bleu marine qui peut aider la marque à avoir un grand impact. Ces couleurs se démarquent également de leurs concurrents et sont modernes à la fois. Nous avons défini la couleur rose comme couleur principale pour mettre en évidence les composants importants et nous avons configuré la couleur bleu marine comme couleur secondaire à utiliser principalement pour la police et les boutons secondaires.

Nouvelle ligne directrice de la typographie

WKD n’avait pas de système de lignes directrices pour la typographie tels que les titres, les sous-titres et les paragraphes. Pour la constance ou la conception sur l’ensemble du site Web et pour un meilleur développement, nous avons défini le style de typographie qui est pertinent pour l’identité de la marque et reflète la personnalité de la marque avec la lisibilité.

Éléments d’interface utilisateur reflétant l’identité de la marque

Nous avons appliqué les rectangles ronds – y compris les remplissages et les bordures – pour la plupart des éléments de l’interface utilisateur afin de rester cohérents avec d’autres matériaux de l’interface utilisateur tels que les polices, les couleurs et les icônes.

Technologies que nous avons utilisées pour développer le site Web

Nous avons utilisé HTML5, WordPress-Woocommerce et Learndash- pour ce projet. Nous avons adopté HTML5 car quel que soit le navigateur utilisé par les utilisateurs, le contenu peut être visualisé correctement.

En revanche, WordPress est très simple d’utilisation. Les clients peuvent gérer eux-mêmes leurs sites Web régulièrement. De plus, WordPress est le CMS le plus populaire au monde, il détient de loin la plus grande part de marché des CMS. Y compris woocommerce pour un simple panier / boutique, qui se gère facilement avec WordPress. Et Learndash prend en charge les cours en ligne qui sont plus faciles à personnaliser les leçons et les quiz.

Le résumé du projet

Notre objectif principal était de mettre à jour la structure de l’expérience non utilisateur et la conception obsolète de l’interface utilisateur de leur ancien site Web en une meilleure conception UX et UI avec le reflet de l’identité de la marque. Après la refonte du site Web, ce que les visiteurs doivent faire est plus clair et a l’air visuellement moderne et propre tout en conservant l’identité de leur marque. Notre client est vraiment satisfait de notre travail pour son site Web. Dans l’ensemble, nous avons pu atteindre avec succès notre objectif et nos cibles sur ce projet.