Craigslist

An UX study on an imagined redesign

— Because Craigslist is so widely used throughout the world, I thought it would be a fun challenge to improve the usability and visual appearance of this site by applying UX and UI best practices.

My role: UX, UI, Branding 

Course: NYU User Experience Design I

 
 
 
Craigslist_iMac.png
 

The Brief

Craigslist's business objective is unique in that it has historically resisted any attempt to commercialize itself (beyond using revenue from job listings to cover operating costs). Instead, its main business objective is largely focused on satisfying customer needs. With this understanding, I focused on improving: 

  • navigation

  • content hierarchy

  • tagging and filtering system

  • visual design

 

 

The current Craigslist site


Strategy

Research

To begin, I did research on Craigslist to learn more about the product and its business objectives. I also gathered user feedback in forums in order to gain a general understanding of what people are saying and how they might be using the product. With this knowledge of the existing product, I was able to conduct my own user research.

Planning

From the user interviews, I was able to develop personas and user stories based on the pain and satisfaction points expressed among the participants. In general, users sought improvements in the navigation, filtering system, content hierarchy, and overall visual appearance.

 
 
 
Craigslist_personas.png
 

 

Information Architecture

The results from my research formed my base for rebuilding the information architecture. I first started by doing a card sort with post-it notes, which helped me determine how to reorganize the navigation and content in a clear and consistent way.

 
 
 
Craigslist_card-sort.jpg
 
 
 

 

Wireframes

Once I had a better understanding of the goals I wanted to achieve, I spent some time sketching. Sketching allowed me to quickly iterate before moving on to build details and structure to the user flows via high-fidelity wireframes.

 

Homepage

 

Simplified navigation
The menu offers only key navigation items, search utility, and a single call to action to post an ad.

Dynamic, delightful filters
An interactive search in the hero and search pages allow users to quickly see what’s available in their area.

Card-based UI
Posts are standardized with images and key information. Content is presented in an organized, digestible format for quick and easy viewing.

List Page


Brand Identity

Defining the brand identity

Before jumping into visual design, I worked on redefining the brand identity and vision statement. In determining the tone and personality character of the brand, I decided Craigslist most identified with "The Regular" and "The Creator" archetypes since it champions community, choice, and anti-commercialism.

 

 
 
 
 

 

During this time, I also determined the typography and color scheme. This was essential especially since the fourth user need was to improve overall visual appearance. To complement the primary and background colors, I identified a set of accent colors to apply to the filtering and tagging system.

 

Visual Design

 

In this phase, I was able to apply all the research, planning and visual study to high-fidelity mockups. Feedback from peers allowed me to iterate once again to ensure the concept was meeting user needs.

 

Homepage

 

Color-coded tags
Besides offering visual appeal, color-coded tags help reduce ambiguity by communicating the type of content.

 

Infographics
Statistics further support product value.

 

Social proof
Quotes from real users help build trust and credibility of the brand.

 

Security notice
A special note in the footer eases fear and educates users on web security.


A closer look at the filter

Craiglist_homepage.gif

List Page

Primary search filter
The filter selection is prominently displayed as breadcrumbs at the top of the page.

 

Results
Results are neatly arranged in a grid, list or map view. Color-coded tags help visually distinguish the posts.

Craigslist_list.jpg
 

Secondary filters
A filter selection dynamically populates results. On scroll, the filter section collapses so users can focus on the results.


Detail Page

 

Informative and action-driven layout
The layout allows users to quickly digest content and take action all above the fold.

 

Recommendations
Users are encouraged to continue exploring posts within the same category.

 

Utility menu
This menu organizes all the actions users can take. “Reply to posting” is the most prominent button.

 

Thanks for reading!