Craigslist Redesign

Craigslist is the biggest classifieds advertisements website in the world, devoted to a wide variety of sections.

Unfortunately, the aesthetic and creative level of Craigslist’s website doesn’t match the high recognition of the name brand.

In fact, it looks my neighbor wrote a sign “websites built for $200” and posted it on the street… and Craigslist responded.

After hearing about how awful the interaction design of Craigslist is (and experiencing it, myself), I decided to create a better vision of Craigslist.

Brief

Craigslist is notoriously averse to changing the design of their website. In fact, their founder, Craig Newmark, is often open and public about his disinterest for a redesign. That’s an unfortunate perspective, especially given that Craigslist is one of the world’s most widely-accessed websites in the world.

When the website first went public 1996, their design may have been satisfactory. However, Craiglist’s design has changed little since 2001.

We’ve grown so accustomed to beautiful design in recent years, as online experiences and phone/tablet apps have become a ubiquitous aspect of our everyday lives.

Today’s user not only wants great interactive experiences but expects it, especially from an online heavyweight like Craigslist.

Craigslist : A Brief Visual History

Cognitive Teardown

Yes, Craigslist is functional and reliable, at times, but the creative components and high-level usability aspects are barren.

But what and where are the pain points of Craigslist, exactly?

To start, I examined the Craigslist homepage and performed a cognitive teardown, auditing Craigslist’s biggest problems.

#mk-icon-box-5a30d1de41e2b .mk-box-icon-2-icon { font-size:64px; color:#ffffff;background-color:#4a7489; } #mk-icon-box-5a30d1de41e2b .mk-box-icon-2-icon:hover{ }

80/20 Rule

Craiglist should make its most widely used features – such as the search bar – more noticeable and accessible.

As it stands, Craigslist not only makes most of its elements homogeneous, but also highlights elements that we hardly use at all.

#mk-custom-box-5a30d1de42e75 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de42e75 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Signal-to-Noise Ratio

Putting so much information on one page creates a low signal-to-noise ratio, making it incredibly difficult for us to find what we need and want.

#mk-custom-box-5a30d1de43af5 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de43af5 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Horror Vaccui

Craigslist is filled with an over-abundance of information, with a dizzying amount choices and options available to us.

Recent research shows that as horror vacui increases, perceived value decreases.

#mk-custom-box-5a30d1de445cf { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de445cf .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Entry Point

The main page of Craigslist is filled with links, which can be overwhelming. Once we adjust past the initial shock of content/link overload, we still have some points of entry that are questionable.

For instance, suppose I’m looking for a Mid-Century sofa.

Should I look in the For Sale, Antiques or Furniture section?

I have no idea and that’s a problem.

#mk-custom-box-5a30d1de4512a { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4512a .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Color

Craigslist’s use of color is sparse and has no harmony. In fact, the colors decisions seem arbitrary, at best.

Links are actually in default HTML blue, as they were first introduced when the internet first began.

Yikes!

#mk-custom-box-5a30d1de45d1a { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de45d1a .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Redundancy and Repetition

Normally, redundant elements help mitigate system failures, while repetition serves to increase awareness on important elements with the hope of garnering a response.

Craigslist uses redundancy and repetition for the wrong reasons, especially with multiple links leading to webpages that don’t serve an important goal-oriented target.

It’s a waste of space and can lead to confusion.

#mk-custom-box-5a30d1de466b2 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de466b2 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Iconic Representation

Icons help improve recognition and recall, but there are no instances of iconic representation (not even a search icon for the search bar?!).

Such a shame, since icons could really help improve recall of signs and controls, at a glance, and reduce the cognitive load of its visitors.

#mk-custom-box-5a30d1de474bc { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de474bc .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Flexibility-Usability Tradeoff

In an effort of offer flexibility and show many choices all at once, Craigslist creates an overwhelming visual complexity that ends up sacrificing its usability.

#mk-custom-box-5a30d1de47df5 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de47df5 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Biophilia Effect

There are no natural scenes, environment, imagery or even organic shapes, for that matter.

Craigslist is just a bunch of cold hard boxes and a barrage of text, which induces stress and decreases focus and concentration.

#mk-custom-box-5a30d1de486e7 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de486e7 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Convergence

Craigslist is characteristic of a company that has a stable design (or lack of, according to its founder) and mission.

It’s business model isn’t radical, either – it’s basically an online and global version of the classifieds section you find in your local newspaper.

But Craigslist’s stability and receptivity might be exactly why it has been so resistant to innovation in design and user experience.

#mk-custom-box-5a30d1de49012 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de49012 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Hick’s Law

There is so much information presented with so many options to choose from and multiple alternatives to make a decision with.

The problem is, this increases the time it takes to make such a decision.

In fact, it’s actually paralyzing.

#mk-custom-box-5a30d1de499f4 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de499f4 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Propositional Density

Craigslist has very a very shallow propositional density. As a result, the Craigslist brand isn’t interesting, engaging, or memorable.

Strangely, Craigslist uses a peace-symbol as its browser tab icon, but you never see it anywhere else in the site. It’s unfortunate that they don’t expand this concept further – it could really increase the deeper propositions, especially given the San Francisco connection.

#mk-custom-box-5a30d1de4a497 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4a497 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Picture Superiority Effect

We remember pictures more than words, but there aren’t any images on Craigslist’s homepage, at all.

None. Zip. Zero.

Craigslist could benefit from pictures, in a variety of ways.

#mk-custom-box-5a30d1de4b603 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4b603 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Ockham’s Razor

Again, visual complexity is the major problem for Craigslist. Simplifying how it presents its content  may be be the cure for its visual woes.

#mk-custom-box-5a30d1de4c23b { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4c23b .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Attractiveness Bias

There is nothing attractive about Craigslist, in the slightest: its all dry… its all business… its all generic.

Simply put, the aesthetic landscape is barren, which can leave us not wanting to use Craigslist for that very reason.

#mk-custom-box-5a30d1de4cc15 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4cc15 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Legibility

I’m going to go out on a limb and say that while Craigslist isn’t illegible, it isn’t very legible, either.

But there’s no reason to be satisfied with mediocrity when it can be improved upon.

Craigslist can definitely see big improvements with simple adjustments to text size, text blocks, and spacing.

#mk-custom-box-5a30d1de4d5b6 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4d5b6 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Fitts’ Law

The proximity of the links are so close to each other – and mouse sensitivity is so fast by relation – that it’s easy to select a link unintentionally or mistakenly.

Not to mention, because the links are small, it takes longer to move to a resting position over the right link, ultimately creating a speed-accuracy tradeoff.

#mk-custom-box-5a30d1de4dfc3 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4dfc3 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Von Restorff Effect

Elements in Craigslist are so symmetrical, so unified, so… similar, that nothing sings.

There are a few things are highlighted:

  • the Craigslist name
  • the terms of use new link
  • the privacy policy updated link
  • the craigslist is hiring in sf link

The problem: the special highlights within the links read as odd because they don’t really warrant the highlighting.

#mk-custom-box-5a30d1de4e97d { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d1de4e97d .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }
#mk-icon-box-5a30d1de4fda9 .mk-box-icon-2-icon { font-size:48px; color:#4a7489; } #mk-icon-box-5a30d1de4fda9 .mk-box-icon-2-icon:hover{ }

Oh, the irony

My own presentation of the cognitive teardown above suffers the same Craigslist problems, too.

The irony is not lost on me – for shame!

Research and Conceptualizing

Methods and Research

I began researching other website alternatives to Craigslist to see what their UX strategies the competition employs. I was pretty shocked to find how similar they all look.

I also read articles about Craigslist’s founder, Craig Newmark, and other supporting materials to get an understanding about what the goals and mission of Craigslist.

I also tried to avoid other Craigslist redesigns, because I wanted to see what my own design process would yield on its own, rather than be “tainted” by the work of others. I was really curious how my work would compare, for better or for worse.

The Competition

Brainstorming and Task Analysis

I started brainstorming and created task flow iterations as to how someone would

  • search for something Craigslist
  • post a something on Craigslist
  • inquire about a car on Craigslist
  • inquire about a piece of furniture on Craigslist

This helped me identify key decision points most people make when visiting Craigslist.

Cognitive Buildup

Just as I created a cognitive teardown, where I scrutinized and audited the problems and pain points of Craigslist, I also created a cognitive buildup where I identified and examined where Craigslist employed good use of design and usability principles.

This helped me incorporate and improve on the successful aspects of Craigslist.

To avoid writing another novel, here’s a simple list:

  • alignment
  • hierarchy
  • proximity
  • similarity
  • visibility
  • wayfinding
  • consistency
  • highlighting
  • symmetry
  • affordance
  • forgiveness
  • progressive disclosure
  • contour bias

Wireframing : intial concepts

Using the cognitive buildup, cognitive teardown, lit review, and research, I created low and high fidelity wireframes for a new Craigslist homepage and webpage to purchase an automobile.

Refinement and Evaluative Research

Outcome and Reflection

Reflection

Although I’ve mostly received plenty of positive feedback, especially with the color tweaking, there’s still plenty of room I see that begs refinement.

Overall, though, I believe the mockups hold up much better than the current model of Craigslist.

If we can only convince them…