Craigslist.com is a huge collection of Ads ranging from housing to cars to jobs. You can find an ad regarding anything you can think of in Craigslist. Craigslist mostly serve local Ads which means it has a separate website for most of the popular cities in the United States and around the world.

Craigslist is a wonderful tool while looking for properties, jobs and local activities. But the design of the website is mediocre. The website is just a list of all the Ads it contains. When you open the landing page, you will be overwhelmed with the amount of information shown on the site. You might even get confused as to where to click and how to proceed. From the top left of the window to bottom right corner, it is filled with links to Ads. It pretty much resembles a newspaper.

Craigslist.com

Back when it was created in 1995, there was a reason for making the site very flat. Making the site just a collection of Ads would make it possible for search engines to easily show Craigslist posts on any search engine results. Even today, nobody usually goes to Craigslist on their own to find something. Its usually that one is looking for something on Google and Google finds it listed on Craigslist and then we are led to Craigslist. This is the whole idea or purpose of having a flat design. This technique made sense in ’95. But now, although we have means to optimize search engine visibility, Craigslist hasn’t evolved much over time. It has remained the same. Because of the high usage of Craigslist and how much it is a part of our lives, I decided to give Craiglist a new look!

The Problem

First lets discuss the irregularities in the original Craigslist design:

Lack of proper categories: Craigslist Ads are not well categorized. Upon landing on the homepage users can see a whole lot of categories. This makes it very hard for the users to easily navigate through the content to find what they want. With so many categories shown to the user, one might even miss clicking the right one. Lack of visual representation: There is no visual representation of any category on Craigslist. This is not user friendly for someone who does not know the language. Even otherwise, showing icons or representative images will facilitate users to quickly make choices instead of reading the text. Lack of responsive design: Craigslist does not follow state of the art design patters like usage of grids or flexbox to make the site responsive for various display sizes. The site gets cluttered when tried to access on devices with smaller display sizes. Lack of personalization: There is no way users can get personalized Ads on Craigslist. Personalization is a very important feature to have in the advertising domain since nobody wants to see ads that they are not interested in. Targeted ads is the way forward and the design on the site should have the facility to show targeted ads.

Upon clicking any link on the landing page, the user will see all the listings this way

What do the users want?

Craigslist users are usually those who need a quick way to find something. When I spoke to a few people who have been using it for a while now, said that they use it because of its minimalist design. It’s a very simple website. Nothing fancy. No heavy weight HTML/CSS/Javascript stuff. Loads quickly and works best even when the bandwidth is low because it serves only text and very few images or multimedia content. Thinking on the same lines, I have come up with my new design…

The Solution

The new design solves them!

Distinct categories: The landing page will have top categories. These are the main few categories under which all the ads can be classified. Each of these categories will be very distinct so that no two categories should confuse the user while looking for a particular ad. Icon usage: I emphasize the usage a visual representation in the new design. This will not only enhance the visual aesthetics of the site, but also facilitate the user in quickly navigating through the content. Icons can be quickly understood by the brain than a line of text. The categories are all represented by icons or images. Even sub categories will also contain representative icons for the same reason. Responsive design: Usage of grids in the design helps make the site highly responsive. The core content of each page which will be the actual listings will be in a flex-box which will smoothly slide one below the other on smaller displays. This makes the site compatible with any display sizes with minimal code changes. Personalization: There is a login at the top right of the site. After login it continues to display the username. This feature will make the site stateful so the user can see curated content. It also makes the user feel connected to the site.

The most important aspect of the new design is to maintain the minimalist design of the original Craigslist. The background color is slightly dimmed compared to the original site. The feel of the website is still the same as the original one. Users should not feel like they have landed in a totally different site altogether. Keeping the same feel and vibe, I have brought in subtle changes that can enhance the user experience to a great extent.

Lets take a look at the new design…

The below screens are a sequence of events when a user is looking for an apartment listing:

Landing page

The top and bottom of the site should remain the same as far as possible. Only the core or center of each page should change depending on what the user clicks. This will make the user not feel lost at any point of time and will also reduce the amount of data that is downloaded from the server each time.

Upon clicking the “Properties” category

Different apartment listings with filtering options

The menu bar at the top will give the user quick access to Home, Top Selling, Top Discounts and Post an Ad. These are some of the common and most used functionalities of an advertising platform and having them handy on the site will make life easy for the users. The core of central part of the page is distinctly marked with a different color so that the user can identify this space. The mild sky blue shade blends well with the overall off-white background of the site. This is the area which changes with each page. It shows categories and sub categories and finally the ad listings. This space is consistent across all pages. The search bar is carefully placed above the central part of the page so that the user can expect the results to be displayed in this region.

Actual Ad

I also felt that the original design lacked the social influence. So I decided to bring in the social media bar on each page, so that user can easily share the content or search results on popular social media site which can be linked because of the login feature.

The choice of colors and fonts make the site look pleasant. The font colors contrast the background colors so that the content is legible and visually pleasing. The top menu and the filtering feature on each page are the only highlighted parts so that they draw the attention of the user so that the user knows about them and will use them.

Conclusion

This design will be a smooth transition from the original design of the Criagslist. This is an important design paradigm. When users are exposed to a sharp change or a complete revamp, they tend to get confused. My design keeps up with the spirit of Craigslist. It is self-explanatory and intuitive for users to easily navigate through the ads. Please share what you think about this design. I would love to hear your feedback.