De-cluttering the
Craigslist home page

A case study for a concept project

OVERVIEW

Craigslist is an American classified advertisements website with sections devoted to jobs, housing, for sale, items wanted, services, community service, gigs, résumés, and discussion forums.

The brief was to refresh the design of the Craigslist homepage, taking into account modern design sensibilities and making rational decisions about information priority.

 

TEAM

Sole Designer

DURATION

4 day design sprint

METHODS

Competitive/ comparative analysis, user interview, user survey, information architecture

 

Brands I've worked with

  • BCBG MaxAzria

  • James Perse

  • Ariat

Approach

  • Research to find out what user’s goals and frustrations are when using Craigslist.

  • Research competitors to understand what users are familiar with. 

  • Synthesize research and determine design direction. 

  • Look into information architecture. 

  • Explore layouts with lo-fi wireframes. 

  • Think about the visuals and how to approach the visual design without alienating existing users. 

  • Develop the high fidelity wireframes and prototype.

Survey to find out user goals, likes, and frustrations

textured background(1).png

I sent out a survey to friends and my school network. 9 responses were received. 

What are users familiar with?

  1. Both Zillow and Hotpads has prominent search bars. 

  2. Facebook Marketplace and Hotpads has ‘new post’ or ‘listing’ button, and log in account information at top right corner.

  3. Use of icons

Design Hypothesis

By making the home page simpler through adjusting the information architecture, and applying search and filtering that is familiar to users, this should remove some of the friction that users experience, and enable them to find the information that they are looking for more easily.  

Organizing features and categories

  1. These are the important features of the site that is needed. 

  2. These are main categories of the website. I have sorted them where some categories have been combined. 

  3. This is information about the website that can be included in the footer. Some of the pages have been condensed into a sub-page. 

  4. These links can be removed. Weather, Quake and Tide links, although interesting, is not information that users access Craigslist for. The Craigslist blog has not been updated since 2017. 

Exploring layouts

  • Played around with how to feature the categories for browsing. 

  • Thought about if home page was similar to Facebook Marketplace where products are immediately visible in home page. 

  • Thought about whether to have user location already determined, or have user enter it. A brief user interview determined user prefers to enter location if they are searching for something out of town, prefers that the site doesn’t already know where they are. 

Visual Considerations

  • Keep main blue color and similar greys for recognizability for existing users. 

  • Keep all lower-case text as original craigslist site. Seems like a small detail, but contributes a lot to recognizability or familiarity of the site to existing users. 

  • Updated header font to Rockwell- the slab serif evokes feelings of throwback, but contemporary at the same time. 

Results Breakdown

  1. Large centered header in updated font. Helps to establish the site feel.

  2. ‘Account’ and ‘Post’ in upper right, in line with competitive research. 

  3. Prominent search bar, in line with competitive research. 

  4. Decided to let user enter location information, in line with the user interview in lo-fi wireframe stage. 

  5. Highlighted call to action button

    • Draws user’s eyes and tells them what they can do on the site.

  6. Subtle icon pattern background: 

    •  breaks up the color and adds some whimsy.

    • The icons can be things that can be found in Craigslist.

    • In the survey response, one user mentioned that sometimes, there are funny posts. This is a nod to the sometimes funny or whimsical easter eggs that can be found in Craigslist. 

    • Alternately explored using a photo background, but what image can be used for a site that has everything?

  7. Categories 

    • Can be used to browse if user is not searching for something specific, with further filters to be found once getting into the category page. 

    • Icons used, in line with competitive research, contributes to a less text heavy look. 

    • Categories placed in large buttons for easy selection, and for a more organized, less cluttered look. 

    • Categories placed in order of most used from left to right, according to my research. 

  8. Footer

    • Some information that is in the sidebar of the existing site is condensed into the footer. 

    • Considered placing Google Play and Apple store badges along with ‘get the app’, but it did not blend well with the rest of the page. 

Interactive Prototype

With more time, I would: 

  • Spend more time in information architecture and conduct a card sort with users to see if my assumptions in combining some of the categories makes sense. 

  • Conduct usability testing to find out: 

    • If users are able to accomplish their tasks and find the information they need with the new layout.

    • If having users enter their location makes sense, and explore if the location is remembered if the user returns to the home page after their initial search. 

  • Spend more time on the footer and consider:

    • How the mobile app can be better highlighted. 

    • Did I make the right decision to combine the safety tips link into the help link.