Client: Reflex teinte

Nouveau site web de Reflex Teinte

J'ai prépapré une proposition d'architecture d'information, de contenu et de wireframes pour leur nouveau site web.

mes responsibilités
  • Conception de l’expérience
  • Wireframes
  • Concept visuelle
mon Équipe

4 personnes (Product Owner, UX Designer, 2 développeurs).
Contexte Agile.

plateforme

Application web responsive

résumé du projet

Ce projet visait la conception et le développement d'un nouveau site web pour Reflex Teinte

1

Élaboration d'un nouveau concept visuel pour le site web.

2

Simplifier le contenu du site web et faciliter la découverte de l'information.

3

Élaboration d'une nouvelle architecture d'information optimisée pour le SEO.

4

Remplacer les plugins de simulateurs propriétaires difficiles à adapter en français.

Le problème

Le site web actuel présente les problématiques suivantes :

Problématiques en expérience utilisateur

Absence de parcours utilisateur clair: la structure de la page ne guide pas efficacement l’utilisateur vers une action principale.

Surcharge d’information: le contenu est dense, et les blocs de texte sont trop lourds, rendant la lecture difficile.

Division visuelle confuse: le site tente de présenter deux services (vitres teintées et pare-pierres) simultanément, ce qui crée une division visuelle confuse et force l'utilisateur à "choisir un côté”.

Duplication des formulaires et simulateurs: plusieurs formulaires dupliqués et simulateurs redondants apparaissent sur une même page.

Contraste insuffisant: le contraste texte/fond est insuffisant dans certaines sections, nuisant à la lisibilité.

Problématiques en conception visuelle

Incohérence typographique: les polices, les tailles de police et les styles varient d’une section à l’autre, perturbant l’uniformité visuelle et nuisant à la lisibilité.

Alignement et espacement irréguliers: les éléments ne sont pas toujours alignés correctement, et les espacements entre les sections sont irréguliers, ce qui donne une apparence désorganisée.

Boutons d’appel à l’action (CTA) peu visibles: les boutons, tels que « Envoyer » et autres appels à l’action, manquent de contraste et de visibilité, réduisant leur efficacité.

Utilisation excessive d’images de fond: les images de voitures, bien que visuellement attrayantes, occupent trop d’espace et ne guident pas efficacement l’utilisateur vers une action précise.

Incohérence dans les couleurs et styles: les couleurs et les styles visuels varient d’une section à l’autre, et le manque d’espacement adéquat aggrave cette incohérence.

Le processus

Ce projet de 50 heures a inclus la recherche, l'idéation et la création de wireframes à fidélité moyenne

Processus de conception : définir, rechercher, ideation, prototyper et tester.
1
  • Analyser le site actuel.
  • Réalisation d'une vigie concurrentielle.
  • Création de moodboards pour le nouveau concept visuel.
  • Révision de l'architecture d'information existante et proposition d'une version optimisée.
2
  • Rédaction de contenu textuel ("copy") pour structurer les pages.
  • Création des gabarits de pages pour l'accueil, la page hub de produit, la page de détail d'un produit, la page de contact, la page d'erreur 404 et celle de Termes et conditions.
3
  • Conversion des gabartis en wireframes à fidélité moyenne.
  • Adaptation des wireframes en fonction des commentaires du client.
  • Transfert des livrables au designer d'interface utilisateur.
solution de conception

La solution de conception proposée pour résoudre le problème comprenait les éléments suivants:

Une proposition d’architecture d’information conçue pour répondre aux besoins des utilisateurs tout en alignant les tâches avec les objectifs d’affaires.

Diagramme d'architecture d'information

Tâches clés et questions de l'utilisateur

  • Comprendre comment localiser un produit spécifique.
  • Clarifier les options disponibles et saisir l’étendue des offres proposées sur le site Web.
  • Illustrer comment choisir facilement une teinte de film teinté ou un pellicule de protection de peinture.
  • Se faire une idée du caractère, de la personnalité et des services offerts par Reflex Teinte.

Objectifs d'affaires

  • Aider les utilisateurs à choisir leur produit et les guider vers un formulaire pour obtenir une estimation.
  • Optimiser le site pour le référencement afin de bien se classer dans les moteurs de recherche.
  • Prioriser les informations clés sur les produits et services en utilisant une navigation claire et intuitive.
solution finale

Site de Reflex Teinte

Vous souhaitez en savoir plus ?

Lisez le projet complet pour une analyse détaillée du processus, des idées de conception, des tests d'utilisation, de la résolution des problèmes et des conclusions.

Lire le projet complet