Craigslists

Prioritize visibility for local ads and events.

UI/UX, Web Design

vweb ©2025

Project Overview

Goal: To merge the Craigslist homepage and “For Sale” page into a single, visually consistent interface to improve discoverability, navigation, and local engagement.

Main issues addressed

  1. Fragmented experience: Users bounced between the homepage and category pages (e.g., “For Sale”) to view listings.
  2. Outdated navigation: Sidebar links cluttered the user interface, obscuring essential actions like posting ads.
  3. Low local visibility: Events were hidden in a calendar, limiting visibility of city events.

Design process

Research and Discovery

Audited competitors (Airbnb, Facebook Marketplace) to identify trends in visibility and map-based user interfaces. Focused on merging fragmented pages and improving the visibility of local events.

Visual design

Custom SVG icon design, Inter font choice, and application of a trust-focused blue (#3852EF) to highlight calls to action such as “Post an Ad” and search.

Definition and structuring

Merged the homepage and “For Sale” page, relocated the sidebar links to a top bar, and structured a 4×3 grid for the ads and horizontal event carousel.

Visual design

Custom SVG icon design, Inter font choice, and application of a trust-focused blue (#3852EF) to highlight calls to action such as “Post an Ad” and search.

Prototype and test

Designed a Figma prototype focused on button interactions, persistent filters, and geolocation drop-down menu behavior for usability testing.

Research and Discovery

Objective: Identify the competition’s weaknesses and prospects.

  • Competitor Audit: Analysis of Airbnb (listings), Facebook Marketplace (discoverability of the home page) and Adlin (main search bar).
  • User pain points:
    Fragmented navigation (homepage + “For Sale” page).
    Local events buried in a calendar.
    Cluttered sidebar, reducing focus on key actions.
  • Technical constraints: Retain existing Craigslist filters and back-end logic.

Current Craigslist Site Pages

Home Page (Montreal)

Listing page

Define the objectives

Key objectives:

  • Merge the homepage and the “For Sale” page into a single interface.
  • Prioritize the visibility of local announcements and events.
  • Modernize the user interface with icons and card-based layouts, without disrupting existing users.

Visual design

Key activities:

  • Page Consolidation: Sketching out layouts merging the home page and categories.
  • Navigation redesign:
    • Moved sidebar links to a top bar.
    • Prioritizing “Post an Ad” as the primary call to action.

  • Card-Based UI: Exploring Airbnb-Inspired Grid Layouts (4×4 vs. 3×3).

  • Abandoned ideas:
    • Keep the sidebar (contrary to accessibility goals).

    • Video header (choice of a static accelerated image for performance reasons).

Wireframes

High definition designs

Prototype

Key interactions:

  • Search category drop-down menu + geolocation selector
  • Hover/active states of buttons (Post Ad, Filters, Favorites).
  • Dynamic filtering (Category: All → Gallery View → Sort by: Newest).

Full Feed: Filtered ad grid, horizontal event carousel, and footer security links for seamless navigation.