A UX/UI case study overhauling Craigslist’s key pages. Can’t wait? Skip down to the final site.
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.
Key website pages, iOS application homepage
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
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.
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?
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.
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
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.
For Sale Blue
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
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.
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.
Craigslist’s already robust search functionality can be further highlighted by visual tweaks and cleaner organization.
- 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
- 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.
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.
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
Categories expand on tapping to reveal subcategories.
- 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.
- “Craigslist Cracks $1 Billion in Annual Revenue, AIM Group Finds.” NBC 2, 11 Jan. 2019. Retrieved April 15, 2019.
© 2019 Ayushee Aithal