Craigslist Redesign

A UX/UI case study overhauling Craigslist’s key pages. Can’t wait? Skip down to the final site.

Role

For this case study I mined secondary research on the existing Craiglist site and brand, refreshed the Craigslist information architecture, completed new wireframes and visual design.

Deliverables

Key website pages, iOS application homepage

Tools

Photoshop, MindNode

Identifying The Need

Let’s acknowledge one thing. Craigslist is not broken.

It continues to have a strong user base (7th most viewed site in the US with 60 million US users and 50 billion page views per month¹) and remains the leader of peer-to-peer marketplaces, making tons of money in the process.

 

Year over year Craigslist sales estimate

$396 million

in 2015

$694 million

in 2016

$1 billion

in 2018

Estimated sales by The AIM Group, which has calculated Craigslist revenue since 2007. 75% increase between 2015 and 2016 attributed to the fact that Craigslist bumped job posting fees in certain cities and instituted them for the first time in others²

But What Would It Look Like If It Were Even Better? 

By improving site organization to clarify selling and shopping processes and revamping the brutalist visual design to lower the “sketchiness” factor we hope to attract new members who may be more risk-averse than the current Craigslist user. At the same time, we need to avoid alienating current Craigslist users and navigate their preferences by remaining authentic to Craigslist’s functional brand. 

Craigslist should be like Craig.
That is, Craig Newmark, its now billionaire founder.

Basic, functional, resourceful, efficient, savvy, and kind of quirky

Sifting Through the Craigslist Maze: An Information Architecture Challenge 

Craigslist’s existing architecture is vast yet easy to identify due to its comprehensive (or to some, busy) homepage. I realigned the volumes of content by stripping away unnecessary information and combining existing categories to build 5 streamlined, mega-categories.

The Initial Look

Initial concept screens exploring an interactive design involving the mega-categories displayed as flippable cards. In all likelihood, users would not be looking for antiques/collectibles while also applying to a TV/Film job. Assuming one search query per visit, a card flipping model to reveal the secondary navigation under each mega-category would be less overwhelming than the current model.

Redesigning Craiglist

Craiglist is iconic and pervades pop culture. Unfortunately, the running joke is that Craigslist is a bit “shady.” However, redesigning the whole site is not the solution. What can we retain from the original Craigslist site to maintain the trust of current users?

The Logo
Craigslist’s current favicon can replace “craigslist” as the logo. Since Craigslist is already such an iconic brand, association with an icon should be relatively easy to form.

The Palette
Although Craigslist does not have an explicit color scheme, its hyperlinks and greyscale backgrounds lend themselves to a color palette made up of cool blues and purples. These colors, paired with the peace sign logo, come together to create a distinct, sedate aesthetic.

The Basic Design
The goal of this redesign is not to add bells and whistles. If possible, we want to streamline Craigslist even further, maintaining its bare bones look and feel while improving user experience and visual features. 

Craiglist’s Visual Design

Color Palette 

Brand & Primary Colors
The brand color originated from Craiglist 1.0’s favicon. It is used in CTA buttons.

This palette is a play on Craigslist’s unintentional color scheme created by hyperlinks. These colors are used to represent Craigslist’s mega-categories. 

#6b4696

Peaceful Purple

#669acc

For Sale Blue

#336799

Jobs Blue

#c5d6eb

Personals Blue

#beaad1

Housing Purple

#9fc7f2

Community Blue

Typography 
Two forms of Sofia Pro were chosen to ensure simplicity. Sofia Pro Light is used for body copy and less important buttons. Sofia Pro Semi Bold is used for more important buttons and headlines. The typeface is intended to be inviting and friendly to complement the conversational copy on the site, yet legible for the large quantities of information that Craigslist presents.

Sofia Pro Light

Sofia Pro Semi Bold

City Typeface
To bring an element of interest to the otherwise basic site, the typeface indicating the city will be a decorative, display font. This is to add personalization and tie back to Craiglist’s quirky spirit without obstructing any vital information.

Upon launch of the site redesign, locals will be asked to vote for their city’s typeface. With this, city pride is leveraged in order to encourage participation and increase awareness of the site redesign.

 

The Craiglist location page can be vastly improved by leveraging location technologies. The “Take me to the Los Angeles list” button is based on IP. If no IP address is detected, these buttons are adapted accordingly. Clicking the “I want to choose another location” button opens the country list. Countries are blurred and become clear on hover. There is also an option to see the comprehensive location list in the bottom right corner.

On clicking, each country becomes dark grey and an autocomplete, pull-down menu emerges from beneath the country.

Home Page 

The main task when revamping the homepage is to remove unnecessary visual clutter and irrelevant information. Category sections flip like cards to reveal subcategories when clicked. When “filter” is clicked it reveals filter options (rolls from under the search bar). Cards can be flipped independently of each other to reduce the amount of text on the page so that the user does not feel overwhelmed by irrelevant options. X’s are clicked on the bottom right of each card to flip it back over. 

Search Process 

Craigslist’s already robust search functionality can be further highlighted by visual tweaks and cleaner organization.

Nav Bar

  • Stars are “Favorites”. The star next to the “My Account” button is tally of favorites clicked. When clicking the star in isolation, user is taken to the “Favorites” page

Search Listings

  • Icons next to listings indicate if a picture and/or map is available for the listing
  • Breadcrumbs are adaptable to alter the search mid-process
  • Left side filters change based on category
  • If click ALL for any category, an additional, expandable filter of subcategories is added so user can search among many subcategories. When the filter list is too long for the screen, a scrolling bar is added to the left-hand bar which is independent from the scrolling bar next to listings

Ability to change view to gallery.

On hover, arrows and image number pops up so user can view images as slideshow.

    Item Page

    The item page can be easier to navigate, leading to more transactions. The card on the right imitates a retail site layout and makes price a more prominent, CTA feature. The right-hand bar is sticky.

    Craigslist users will need to acclimate to the specific function of all icons. Hovering provides a description of each icon. The “Favorite” (star) and “Best of” (heart) icons are light gray when not selected and become “peaceful purple” when selected.

      Post Wizard

      Cards flow up in the wizard. The user can go back in the process by clicking the up arrow above the card.

      Categories are colored by their corresponding card color on the homepage.

      Note: Subcategories and post details form fields will vary based on category.

      • For example, in Housing it will be replaced with square feet, rent, availability, bedrooms, bathrooms, housing type, laundry, parking, pets, furnished, no smoking, wheelchair
      • In For Sale it will be replaced with condition, make/manufacturer, model name/number, size/dimensions
      • For Events, event features such as kid-friendly, outdoor, sale, etc. will be options. Event date, duration and venue will be form fields as well
      • For Personal/Romance body, height, status, other attributes, age will be form fields

      Mobile App

      Categories expand on tapping to reveal subcategories.

        1. Curtin, Melanie. “In 7 Words, Craiglist’s Craig Newmark Lays Out the Best Advice He Ever Got.” Inc., 10 April 2019. Retrieved April 15, 2019.
        2. “Craigslist Cracks $1 Billion in Annual Revenue, AIM Group Finds.” NBC 2, 11 Jan. 2019. Retrieved April 15, 2019.

        © 2019 Ayushee Aithal