Case Study: Craigslist Redesign (2024)

As part of a bid for a contract, I was asked to redesign the popular classified ads site, Craigslist. Here is how I approached the problem, using my design knowledge, research, and my favorite tool, Figma.

Craigslist is an American classified advertisem*nt website with sections devoted to jobs, housing, for sale, items wanted, services, community service, gigs, resumes, and discussion forums.

The current homepage features several columns of links that are hard to read, a search bar that is difficult to locate for users, and making a listing involves a clunky interface with multiple steps.

With other marketplaces to choose from, such as Facebook Marketplace and eBay, we need to ensure that Craigslist offers a seamless experience.

To start building a solution, I began with light user research. I interviewed afrequent Craigslist user, instructing them to perform common tasks on the Craigslist website.

While the user could complete tasks, such as finding or creating listings, they remarked that the site felt clunky and old-fashioned. They gave essential insight that helped create excellent solutions to user problems. Please read on below.

User Research Results

Task #1: Find a listing for an outboard engine

• Selects proper location
• Selects ‘for sale’ > ‘boat parts’ > utilizes search bar within category with query, ‘outboard engine’
• Scrolls through listings to find a suitable outboard engine

Pain Points

• “I wish I could just Google boat parts and Craigslist would come up.” The user did not realize there was a search bar on the Craigslist home page due to the design, and sorted through long lists of categories first
• Mentioned that there are too many menus and categories to click through, and that this should be easier.

Task #2: Create a listing

• Selects ‘create a posting’
• Goes through several pages inputting information such as post title, description, and uploading photos for a mock posting

Pain Points

• “The form to create a posting looks clunky, but functions fine.”
• The user can fill out the form, but would like a sleeker, easier to read post creation form to sell items

Wireframing Phase

• Create the “Google experience”, but for Craigslist.
• Ensure clear calls to action.
• The simplicity of Facebook publishing, but for making listings.

Designing the Search Results Page

• I took a leaf from Facebook’s Marketplace and adopted a tile format for displaying listings
• The listings are much more visual here, giving users a sneak peek into a listing before clicking on it
• The accessible sidebar is similar to the current Craigslist sidebar, allowing users to quickly toggle location, price range, delivery method, and categories to filter their search query
• I removed CTAs for creating a listing, since most users looking for items and services likely aren’t listing items and services

Designing the Listing Layout

• When a user chooses a listing, the tile will expand and take up the page
• Upon expanding the listing, users can click through images at the top to survey quality of items being sold
• The ‘Reply’ CTA is clearly visible for users to click through and respond to ads
• Like the old site, users can easily favorite, hide, or save a post. I adjusted language to reflect what most apps like Instagram or Facebook would use

Redesigning the Create a Listing Experience

• The current Craigslist user journey for creating a listing is functional, but clunky
• I decided to create one full page, rather than a series of pages to click through, in order for users to create a listing
• Similar to Facebook Marketplace, the new design is clean and can be completed without clicking through multiple pages
• Upon completion of creating a listing, users can choose to view their listing or browse the home page

Creating a Familiar but Fresh Brand Style Guide

• Craigslist is entirely powered by user content, and I didn’t want to create distracting branding
• I decided to stick with sans serif, but a modern typeface (Open Sans) with multiple weights available for visual hierarchy
• Colors were kept simple and familiar, incorporating the original purple and a softer blue found on the current site
• White, gray, and black act as neutral secondary colors

Designing and redesigning any product starts and ends with users. Design for them, solve their problems, and make tech a better tool for all. You can read the original case study here.