Craigslists

Donnez la priorité à la visibilité des annonces et des événements locaux.

Design Web, UI/UX

vweb ©2025

Aperçu du projet

Objectif : fusionner la page d’accueil de Craigslist et la page « À vendre » en une interface unique et visuellement cohérente pour améliorer la découvrabilité, la navigation et l’engagement local.

Principaux problèmes abordés

  1. Expérience fragmentée : Les utilisateurs jonglaient entre la page d’accueil et les pages de catégories (par exemple, « À vendre ») pour consulter les annonces.
  2. Navigation obsolète : Les liens de la barre latérale encombraient l’interface utilisateur, occultant des actions essentielles comme la publication d’annonces.
  3. Faible visibilité locale : Les événements étaient masqués dans un calendrier, limitant la visibilité des événements de la ville.

Processus de conception

Recherche et découverte

Audit de concurrents (Airbnb, Facebook Marketplace) afin d’identifier les tendances en matière de visibilité et d’interfaces utilisateur basées sur des cartes. Priorité donnée à la fusion de pages fragmentées et à l’amélioration de la visibilité des événements locaux.

Conception visuelle

Conception d’icônes SVG personnalisées, choix de la police Inter et application d’un bleu axé sur la confiance (#3852EF) pour mettre en valeur les appels à l’action tels que « Publier une annonce » et la recherche.

Définition et structuration

Fusion de la page d’accueil et de la page « À vendre », relocalisation des liens de la barre latérale vers une barre supérieure et structuration d’une grille 4×3 pour les publicités et le carrousel d’événements horizontal.

Conception visuelle

Conception d’icônes SVG personnalisées, choix de la police Inter et application d’un bleu axé sur la confiance (#3852EF) pour mettre en valeur les appels à l’action tels que « Publier une annonce » et la recherche.

Prototype et test

Conception d’un prototype Figma axé sur les interactions avec les boutons, les filtres persistants et le comportement du menu déroulant de géolocalisation pour les tests d’utilisabilité.

Recherche et découverte

Objectif : Identifier les points faibles et les perspectives de la concurrence.

  • Audit de la concurrence : Analyse d’Airbnb (annonces par fiches), de Facebook Marketplace (découvrabilité de la page d’accueil) et d’Adlin (barre de recherche principale).
  • Points faibles des utilisateurs :
    Navigation fragmentée (page d’accueil + page « À vendre »).
    Événements locaux noyés dans un calendrier.
    Barre latérale encombrée, réduisant la concentration sur les actions principales.
  • Contraintes techniques : Conservation des filtres et de la logique d’arrière-plan existants de Craigslist.

Pages actuelles du site Craigslist

Page d’accueil (Montréal)

Page des annonces

Définir les objectifs

Objectifs clés :

  • Fusionner la page d’accueil et la page « À vendre » en une seule interface.
  • Privilégier la visibilité des annonces et des événements locaux.
  • Moderniser l’interface utilisateur avec des icônes et des présentations basées sur des cartes, sans perturber les utilisateurs existants.

Conception visuelle

Activités clés :

  • Consolidation des pages : Esquisse de mises en page fusionnant la page d’accueil et les catégories.
  • Refonte de la navigation :
    • Déplacement des liens de la barre latérale vers une barre supérieure.
    • Priorisation de « Publier une annonce » comme principal appel à l’action.

  • Interface utilisateur basée sur des cartes : Exploration des mises en page en grille (4×4 vs. 3×3) inspirées d’Airbnb.
  • Idées abandonnées :
    • Conservation de la barre latérale (contraire aux objectifs d’accessibilité).
    • En-tête vidéo (choix d’une image accélérée statique pour des raisons de performances).

Wireframes

Conceptions haute définition

Prototype

Interactions clés :

  • Menu déroulant de catégorie de recherche + sélecteur de géolocalisation
  • États de survol/actifs des boutons (Publier une annonce, Filtres, Favoris).
  • Filtrage dynamique (Catégorie : Tout → Vue Galerie → Trier par : Plus récent).

Flux complet : Grille d’annonces filtrées, carrousel d’événements horizontal et liens de sécurité en pied de page pour une navigation fluide.