A UX/UI case study overhauling Craigslist’s key pages.
For this case study I mined secondary research on the existing Craigslist site and brand, refreshed the Craigslist information architecture, and completed new wireframes and visual design.
Key website pages, iOS application homepage
Photoshop, MindNode
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:
in 2015
in 2016
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²
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’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.
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.
Craigslist 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 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.
The brand color originated from Craigslist 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.
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.
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 Craigslist’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 Craigslist 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.
Nav Bar
Search Listings
The user also has the ability to change the view to gallery. On hover, arrows and the image number pops up so user can view images as a 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.
Categories expand on tapping to reveal subcategories.
