UX Case Study: Craigslist

As a UX/UI designer apprentice at Bloc, I was recently tasked to conduct my very first(!) case study and determine how I would redesign the Craigslist website.

Craigslist, a local exchange marketplace, is considered one of the most popular websites in the US, ranking at #14 at the time of this writing. The website serves millions of users with classified ads — such as jobs, housing, personals, for sale, services, community, gigs, and résumés — as well as, discussion forums. As a brand, Craigslist is instantly recognizable for its clarity of purpose, simple website design and quick load speed. To its credit, the company has adhered strictly to an ultra-basic layout while successfully bucking industry trends over the last two decades.

I have been a fan of Craigslist since its inception and often use the website. Earlier this year during my annual spring cleaning, I posted online some old photography equipment to sell to eager local buyers. I enjoyed the process, as the website is accessible, fast, reliable, and ad-free. However, despite its simplicity, the website could improve in terms of consistency and usability. Because it does not offer an intuitive layout of its services, I believe many new users could easily become frustrated and annoyed in the learning process, just as I had been at first.

The Process

Typically, the steps involved in conducting a real-world case study span multiple phases, which include discovering, defining, developing, and delivering a solution to the client. In this assignment, I was directed to simply define the website’s weaknesses and demonstrate my thought process in creating an alternate design.

I decided to preserve Craigslist’s minimalist legacy, given its design history and the brand loyalty of its user base, and only improve on the aesthetics and information architecture. I focused on the desktop and mobile versions of the Los Angeles page and reimagined the following areas: navigation, layout, typography, and logo.

_craigslist_before
Current design for Craigslist’s desktop (L) and mobile (R) websites.

I made a printout of the image above and scribbled the following notes:

craigslist-design-notes
My notes regarding the problem areas in the current design.

Using a process that was loosely inspired by the 6-8-5 sketching game, I brainstormed some of the following ideas:

The Results

Once I had defined the problems and iterated a few solutions, I began working in Sketch. First, I created a style guide that would inform my choices throughout the redesign.

Craigslist Style Guide 2
Style guide for the Craigslist redesgn.

I selected Montserrat and Ubuntu as the standard typefaces for the logo and body, respectively. Both fonts have simple, clean and even lines that convey an enduring and straight-forward aesthetic. This design choice faithfully aligns with the Craigslist brand and its singular vision.

While I originally planned to create only a text-based logo — similar to the approach taken by Calvin Klein, FedEx, and many others — I later reconsidered and included an icon I especially liked from my sketches.

craiglist-logo-horizontal
Three iterations of the logo.

I’m most drawn to the last version on the right because it emphasizes the relationship between the purple letter “i” and the icon. With three “i’s” horizontally stacked on each other, the icon shares a similar appearance with the well-known “list” icon and, consequently, reinforces Craigslist’s service as a publishing platform of classified ads.

craigslist-old-header
The old header.

Next, I created a mockup of the header element. I restyled the links “post to classifieds” and “my account” as buttons and moved them to the top right corner of the window. I then created tabs in the top horizontal bar which contain the links from the lower half of the left sidebar. Each tab contains a drop down menu of items grouped by their category. This decision reduces the amount of clutter that would normally distract users and allows them to easily interact with the content as needed. I kept the search bar and links of Los Angeles districts in the header for quick access. With this new header, the website maintains consistency when the user moves from desktop to mobile, and vice versa.

craigslist-desktop-header-2
The new header with an open drop down menu.

In the mobile redesign, I tucked away the menu tabs into the Craigslist logo. As a clever detail, the logo rotates 90-degrees when tapped on by the user and all content shifts to the right to reveal a drop down menu. This placement gives the header a clean appearance.

Below are the final mockups of the desktop and mobile experience laid out side-by-side. I restyled the main body by creating a drop down menu of each category and placing the content inside. By hiding the content in sliding boxes that can be expanded or collapsed, I increased the whitespace and minimized the overwhelming experience of seeing too much text at once.

In the footer, I repeated some content from the header and listed out the links instead of using drop down menus. I also included new links that were important, but not necessarily a priority to the user and his immediate goal of reading posts or publishing an ad.

craigslist-footer-old
Original footer design.

Because the links are organized in two formats — first as drop down menus in the header, then as a list of links in the footer — the website can accommodate more variances in how a user prefers to receive content.

Conclusion

Through this project, I gained a greater understanding of the iterative process in design. By changing only the website’s content organization and appearance while preserving its simple design, it became more appealing and intuitive to navigate. This case study highlights the significance that small changes can make to improving the user experience.

Advertisements