Craigslist: A Critique & ReDesign
SCHOOL
INDIVIDUAL
CASE STUDY
REDESIGN
BRIEF OVERVIEW
BRIEF OVERVIEW
ROLE: UX Researcher & Designer
TOOLS: Figma
PLATFORM: Website
TIMELINE: 3 Weeks
ROLE: UX Researcher & Designer
TOOLS: Figma
PLATFORM: Website
TIMELINE: 3 Weeks
PROBLEM
Craigslist works, but it looks outdated, and the way it looks makes it harder to use. First, the home page is almost entirely text, and all of that text is the same font, size, and color, so it's hard to tell where anything is at a glance. Second, the site uses mostly greys and blues, and mostly as plain text, so sections blend into each other and there's very little visual distinction between them. Third, the few visual elements the site does have, like the colored emoji headers and the grey "post an ad" button with green text, don't match each other or anything else on the site. Lastly, once you click into a category, the filters switch between checkboxes, input fields, and graphs, mostly without headers, and some of them show up again under the search bar.
PROBLEM
Craigslist works, but it looks outdated, and the way it looks makes it harder to use. First, the home page is almost entirely text, and all of that text is the same font, size, and color, so it's hard to tell where anything is at a glance. Second, the site uses mostly greys and blues, and mostly as plain text, so sections blend into each other and there's very little visual distinction between them. Third, the few visual elements the site does have, like the colored emoji headers and the grey "post an ad" button with green text, don't match each other or anything else on the site. Lastly, once you click into a category, the filters switch between checkboxes, input fields, and graphs, mostly without headers, and some of them show up again under the search bar.
PROBLEM
Craigslist works, but it looks outdated, and the way it looks makes it harder to use. First, the home page is almost entirely text, and all of that text is the same font, size, and color, so it's hard to tell where anything is at a glance. Second, the site uses mostly greys and blues, and mostly as plain text, so sections blend into each other and there's very little visual distinction between them. Third, the few visual elements the site does have, like the colored emoji headers and the grey "post an ad" button with green text, don't match each other or anything else on the site. Lastly, once you click into a category, the filters switch between checkboxes, input fields, and graphs, mostly without headers, and some of them show up again under the search bar.
DESIGN DIRECTION
DESIGN DIRECTION
DESIGN DIRECTION
My goal was to make Craigslist easier to look at and understand without making it more complicated. I like the way Craigslist lists things out and gives you straightforward, minimal options, so I wanted to keep that. I also didn't want it to end up looking like every other shopping site, like Mercari, Vinted, eBay, or Poshmark, so I went with a bubble look to keep some of the oddity that makes Craigslist feel like Craigslist.
Scope: desktop redesign of the home page and two user journeys, pinning a category and changing your location.
My goal was to make Craigslist easier to look at and understand without making it more complicated. I like the way Craigslist lists things out and gives you straightforward, minimal options, so I wanted to keep that. I also didn't want it to end up looking like every other shopping site, like Mercari, Vinted, eBay, or Poshmark, so I went with a bubble look to keep some of the oddity that makes Craigslist feel like Craigslist.
Scope: desktop redesign of the home page and two user journeys, pinning a category and changing your location.
01
01
01
KEEP IT SIMPLE, DON'T ADD COMPLEXITY
KEEP IT SIMPLE, DON'T ADD COMPLEXITY
KEEP IT SIMPLE, DON'T ADD COMPLEXITY
02
02
02
MAKE THINGS READABLE AT A GLANCE
MAKE THINGS READABLE AT A GLANCE
MAKE THINGS READABLE AT A GLANCE
03
03
03
KEEP IT QUIRKY AND DISTINCT
KEEP IT QUIRKY AND DISTINCT
KEEP IT QUIRKY AND DISTINCT
THE PROCESS
01 UNDERSTANDING THE CURRENT SITE
01 UNDERSTANDING THE CURRENT SITE
Methods: exploratory walkthrough as a user
Methods: exploratory walkthrough as a user
I started by using the site the way a regular user would. I browsed the for sale section, tried to favorite an item, changed my location, and clicked into different categories to see how listings and filters were set up.
I started by using the site the way a regular user would. I browsed the for sale section, tried to favorite an item, changed my location, and clicked into different categories to see how listings and filters were set up.
Key findings
The home page is about 90% text, all in the same font, size, and color
The site mostly uses greys and blues as plain text, so there's little visual distinction between sections
Visual elements like the emoji headers and the "post an ad" button are inconsistent with each other and the rest of the site
Filters on category pages use mixed formats, mostly lack headers, and are sometimes duplicated
There's no way to save a category, only individual items
The location selector leads with a list, and the map is secondary
Overall, the site's simple structure is worth keeping, and most of the problems are in how it looks
Key findings
The home page is about 90% text, all in the same font, size, and color
The site mostly uses greys and blues as plain text, so there's little visual distinction between sections
Visual elements like the emoji headers and the "post an ad" button are inconsistent with each other and the rest of the site
Filters on category pages use mixed formats, mostly lack headers, and are sometimes duplicated
There's no way to save a category, only individual items
The location selector leads with a list, and the map is secondary
Overall, the site's simple structure is worth keeping, and most of the problems are in how it looks
02 CRITIQUE OF THE EXISTING WEBSITE
02 CRITIQUE OF THE EXISTING WEBSITE
Most of the problems I found came from the visual design rather than the structure. The home page matters most here, since it's the first impression people get, and the clutter could keep someone from using the site at all.
Most of the problems I found came from the visual design rather than the structure. The home page matters most here, since it's the first impression people get, and the clutter could keep someone from using the site at all.
Home page color, text, and hierarchy
The home page is almost all text, and every piece of it is the same font, size, and color. The site uses greys and blues for nearly everything, mostly as plain text, so sections run into each other and nothing stands out from anything else. Category headers, subcategories, and links all look the same, so there's no clear place to start and it's hard to find anything without reading through everything.
Emojis
The site heavily utilizes emojis for headers, which don't share a visual style. Some blend into the background, and together they make the site look less polished.
"Post an ad" button
The button is grey with green text, and nothing else on the site uses that styling, so it looks out of place.
Location list
Locations are listed vertically in the same style as the category names, which adds to the clutter and makes it harder to tell locations and categories apart. Changing your location also starts with a long list. The map only shows up if you click into a specific location and open the radius view.
Varying filters
Filters switch between checkboxes, input fields, and graphs, and most of them don't have headers, so it's hard to tell what each one controls.
Duplicate filters
There's a second set of filters under the search bar, and in some cases they repeat the ones in the sidebar.
No way to save a category.
You can favorite individual items, but not a whole category, so finding the categories you use often means going back and navigating through the home page every time.
Design goals
Make the home page easy to scan at a glance
Create visual distinction between sections and types of content
Make visual elements and components consistent across the site
Let users get back to the categories they use most without searching for them
Make changing locations visual first
Keep Craigslist's simple structure and minimal options
Design goals
Make the home page easy to scan at a glance
Create visual distinction between sections and types of content
Make visual elements and components consistent across the site
Let users get back to the categories they use most without searching for them
Make changing locations visual first
Keep Craigslist's simple structure and minimal options
03 DESIGN DECISIONS AND RATIONALE
03 DESIGN DECISIONS AND RATIONALE
I kept Craigslist's layout and category structure mostly the same, since I think they work well, and focused on hierarchy, readability, and consistency.
I kept Craigslist's layout and category structure mostly the same, since I think they work well, and focused on hierarchy, readability, and consistency.
Early Exploration
I started by sketching, and pulling inspiration from things I'd seen before, such as the apple watch home screen layout. One direction I tried was using cards on the home page, sort of like the old Windows phone layout. I went with bubbles in the end, as it was easier to create varied layouts with.
I started by sketching, and pulling inspiration from things I'd seen before, such as the apple watch home screen layout. One direction I tried was using cards on the home page, sort of like the old Windows phone layout. I went with bubbles in the end, as it was easier to create varied layouts with.
Style Guide
Typography
I kept Times New Roman for titles so the site still feels like Craigslist, and used Figtree, a simple, rounded sans serif, for buttons to match the bubble look. I set up text levels with different sizes and weights so category headers, subcategories, and listings no longer look the same, which was one of the main problems on the original home page.
Typography
I kept Times New Roman for titles so the site still feels like Craigslist, and used Figtree, a simple, rounded sans serif, for buttons to match the bubble look. I set up text levels with different sizes and weights so category headers, subcategories, and listings no longer look the same, which was one of the main problems on the original home page.
Color
I kept Craigslist’s purple as the primary color since it’s already part of the brand, and picked complementary to go with it. Each color has a specific job, so sections, buttons, and selected states are easy to tell apart, instead of everything being grey and blue text.
Color
I kept Craigslist’s purple as the primary color since it’s already part of the brand, and picked complementary to go with it. Each color has a specific job, so sections, buttons, and selected states are easy to tell apart, instead of everything being grey and blue text.
Before/After Slideshow
Before - Home
After - Home
Hierarchy: I kept the overall layout but improved the hierarchy so the categories are easier to read and scan. I made sure they are visually distinct and removed the subcategories to reduce visual clutter and confusion.
Bubbles and expanded states: Categories are shown as bubbles that expand to show subcategories when you click them.
Buttons and icons: The current site barely uses buttons, so I added them throughout, with icons so they’re easier to recognize at a glance.
Before - Category Page
After - Category Page
Pinned categories: Users can pin a category from this page, and it shows up in the side navigation bar so they can get back to it quickly.
Filters and duplicate filters: Filters are now more standardized, featuring chips on the side bar and removing them from the top in order to ease confusion. Ranges are changed from input fields to sliders for ease of use.
Before - Location Page
After - Location Page
Map-first selector: Location changes now start with a fun, interactive map instead of a list.
Before - Home
After - Home
Hierarchy: I kept the overall layout but improved the hierarchy so the categories are easier to read and scan. I made sure they are visually distinct and removed the subcategories to reduce visual clutter and confusion.
Bubbles and expanded states: Categories are shown as bubbles that expand to show subcategories when you click them.
Buttons and icons: The current site barely uses buttons, so I added them throughout, with icons so they’re easier to recognize at a glance.
Before - Category Page
After - Category Page
Pinned categories: Users can pin a category from this page, and it shows up in the side navigation bar so they can get back to it quickly.
Filters and duplicate filters: Filters are now more standardized, featuring chips on the side bar and removing them from the top in order to ease confusion. Ranges are changed from input fields to sliders for ease of use.
Before - Location Page
After - Location Page
Map-first selector: Location changes now start with a fun, interactive map instead of a list.
04 USER JOURNEYS
04 USER JOURNEYS
Journey 1: Pinning a Category
Journey 1: Pinning a Category
A user who checks the same category often wants a faster way to get back to it.
A user who checks the same category often wants a faster way to get back to it.
Home —> Category
Housing Expanded
Vacation Rentals
Pin Category
Journey 2: Changing your Location
Journey 2: Changing your Location
A user wants to browse listings in a different city.
A user wants to browse listings in a different city.
Home —> Location Button
Your Location
Interactive Map
Houston, TX
Updated Location
05 EVALUATION OF IMPROVEMENTS
05 EVALUATION OF IMPROVEMENTS
What I'd improve next
I'd like to keep developing the color palette, especially how the purple contrasts with the other colors and what the full palette should be. I'd also like to work on other actions and paths users can take that I didn't get to this time. Furthermore, I'd like to play around more with reimagining the Craigslist brand as a whole rather than just reworking specific pages and color palettes.
What I'd improve next
I'd like to keep developing the color palette, especially how the purple contrasts with the other colors and what the full palette should be. I'd also like to work on other actions and paths users can take that I didn't get to this time. Furthermore, I'd like to play around more with reimagining the Craigslist brand as a whole rather than just reworking specific pages and color palettes.
Original problem
Home page is all same-styled text
———————————————————
System grays and blues blend that clash and together
———————————————————
Few buttons, hard to spot actions
———————————————————
Location selector leads with a list
———————————————————
No way to save a category
———————————————————
Emoji headers are inconsistent and blend into the background
Original problem
Home page is all same-styled text
———————————————
System grays and blues blend that clash and together
———————————————
Few buttons, hard to spot actions
———————————————
Location selector leads with a list
———————————————
No way to save a category
———————————————
Emoji headers are inconsistent and blend into the background
What I changed
Improved hierarchy, bubbles
———————————————————
Purple primary with complementary colors
———————————————————
Buttons with icons
———————————————————
Map-first location selector
———————————————————
Pinned categories in the side nav
———————————————————
Clear, simple, and cohesive icon set for buttons and categories
What I changed
Improved hierarchy, bubbles
———————————————————
Purple primary with complementary colors
———————————————————
Buttons with icons
———————————————————
Map-first location selector
———————————————————
Pinned categories in the side nav
———————————————————
Clear, simple, and cohesive icon set for buttons and categories
How it improves the experience
Easier to scan and find a starting point
———————————————————
More visual distinction between sections
———————————————————
Actions are easier to recognize at a glance
———————————————————
Location is chosen visually
———————————————————
Faster access to frequent categories
———————————————————
Headers look consistent and are easier to spot
How it improves the experience
Easier to scan and find a starting point
—————————
More visual distinction between sections
—————————
Actions are easier to recognize at a glance
—————————
Location is chosen visually
—————————
Faster access to frequent categories
—————————
Headers look consistent and are easier to spot
INTERACTIVE PROTOTYPE
INTERACTIVE PROTOTYPE
To walk through the prototype, follow the user journeys listed above. Start on the home page and click "For sale" and then "Housing" to see the expanded categories. Click "Vacation rentals" to see its listings, then pin the category and head back home. From there, click your location and change it to Houston, TX, then go back home.
To walk through the prototype, follow the user journeys listed above. Start on the home page and click "For sale" and then "Housing" to see the expanded categories. Click "Vacation rentals" to see its listings, then pin the category and head back home. From there, click your location and change it to Houston, TX, then go back home.