Juho Kastemaa's profile

Craigslist redesign

Craigslist offers a unique way to find goods and services online. There was a problem that I encountered recently: Extremely minimalist design that lacks a user-friendly appeal. Craiglist's minimalist design has been around for years without many changes. I was happy to redesign Craiglist and create a unique new look for it.
Craigslist’s new, seamless, and clear logo with CL-abreviation. CL stands for Craigslist and is used independently in responsive layouts. CL-abreviation remains in user’s minds.
 
User can change location with ease. Complimentary color scheme is used to give clarity as well as contrast. The color choice was inspired by the Golden Gate Bridge. The banner image changes after changing location. Component style is inspired from Twitter Bootstrap and can easily be interpreted/converted to HTML5 and CSS3.
 
Location symbol is familiar from maps. Clear and simple search bar is a modern way to search for items. Gradiation for the button is used to give a 3D-effect and help the user to recognize it as a button. That is also based on user’s mental model of buttons.
 
All the categories can be reached from the Search Bar’s drop-down list as well as by scrolling down. Categories are simplified and more options are available after clicking on the icon of the category. The reason for this design was to simplify the layout and remove all extra text from the index page. Small icons were illustrated to give a visual indicator of the category. This helps the user to navigate around the site. The frames correspond to the Golden Cut rule. It gives a feeling of beauty, balance and simple aesthetics.
This page is the full web version of Craigslist's housing page. Banner is lower in this page to give space for other elements. I have refreshed the Craiglist brand with a new logo and colors.
 
In the search bar the user starts from the left to choose the Housing type as well as How many Bedrooms he/she wants. Search bar is created user and usability in mind. Listings of the pages and indication of how many pages to show on one page. Options are marked from 6-100.(6, 25, 50, 100).
 
Clear visuals and use of white space groups picture and text together to form a Gestalt. Use of symmetry and clear lines throughout the entire design of bith the full web version as well as mobile version.
 
Consistent design theme found in both sites and can be seen when scrolling down the page. This also helps the design to seamlessly flow between full web version and the mobile version.  
Craisgslist web site's responsive layouts for mobile. This is how the interface looks like on a mobile phone screen.
Craisgslist web site's responsive layouts for mobile. Housing page.
This is how the seach bar will look when the seach bar is active. This style is widely used, for example, at Twitter Bootstrap design.
Craigslist redesign
Published:

Craigslist redesign

The purpose of this project was to redesign Craigslist's search and housing pages and create clear visual hierarchy in interface layouts to creat Read More

Published: