Craigslist Redesign

A team project included the Heuristic Evaluation, contextual inquiry, and an alternative design for Craigslist.   

Project Detail

Timespan: Feb.2018 - Apr.2018

Team Size: 3 people

My Role

User Researcher

UX Designer

UI Designer

Tool

Axure

Figma

Introduction

Craigslist is the biggest classified advertisements website with high traffic. However, the usability of the website doesn't go with its popularity. In this project, we pointed out several usability issues based on the Heuristic Evaluation principle by Professor Charles Schneider and proposed the solution with suitable design patterns focusing on the posting flow.

Project Overview

Problem

Except for addressing the usability issues we found through heuristic evaluation, we also tried to solve the problems users had encountered to enhance the overall experience.

The information design is not effective enough to help user complete their goal.  

It's hard to tell if the sellers or buyers are scammers or not.

The contact method of sending emails through the system is overwhelming.

Solution Highlights

Collapsible Cards

We grouped the categories on the home page with cards and applied the progressive disclosure design pattern to show only the popular categories at the beginning. 

Profile Page

We suggested adding an optional account feature. With the profile page, users can learn about the activity records of the sellers or buyers for security.

Users could also choose to chat directly on the website to avoid the overwhelming emails.

Listing Categorizing

When selecting the subcategory of a new listing, users can still see the selected main category and easily change the previous choice.

Process
My Contribution

During the user research, we came up with interview questions together. I interviewed two of the participants and collected some reviews through the internet.

During the heuristic evaluation, we discovered the usability issues and brainstormed the solutions. After having the consensuses for our solutions, I converted the sketch of the home page to low fidelity wireframe and then the prototype.

After finishing the project with my team, I designed the visual styling on my own.

User Profile

螢幕快照 2020-02-17 上午2.53.33.png

Persona

Objectives

  • Address the current usability issues 

  • Provide the information they might be interested in to increase engagement

  • Reduce the possibility of getting scammed

Evaluation & Redesign

Heuristic Definition

Our Heuristic Evaluation was based on the guideline of Professor Charles Schneider's heuristic definition.

Homepage

The current homepage is full of clickable links displayed at the same time which could increase users' cognitive load. Also, the information hierarchy is not clear enough. 

Alternative Design

We separated all the categories into sections with a background color to group them more clearly. We adopted the progressive disclosure design pattern to reduce the shown information. Users could expand the section they are interested in individually. 

Calendar

The event calendar on the homepage doesn't show the month which violates the Perceptibility of System State. It also violates the External Consistency because of showing the dates of two months at the same time which is not consistent with the analogous system. In addition, it doesn't comply with User Control and Freedom since users couldn't switch to the other months.   

Alternative Design

We added the month on the top of the calendar and arrows which allow users to switch to the next or previous month. The date in next month and before today will show as unclickable to avoid errors.

Location Sidebar

The location sidebar on the right side of the homepage is an accordion menu but there is no signifier to show that it's a collapsible content. The structure hierarchy is not clear that users might not be able to distinguish the submenu from the menu.     

Alternative Design

We modified it to a drop-down menu and placed it at the bottom of the homepage where the location option usually be. 

Listing Page

There are some unclickable information of this advertisement below the content area, post id, posted time, and also some clickable buttons next to them. Due to the gestalt principle of proximity, users may think those buttons and information have similar functionality because they are close to each other. It violates the principle of Group like widgets/functions since those buttons and information labels have different functions.

Alternative Design

We grouped the information of the advertisement together, such as the post id, posted time, and the user who posted it. We also grouped the share button and save to favorite button together. And placed them in different areas.

Email to friend
螢幕快照 2018-09-12 上午12.09.00.png
Alternative Design

We used lightbox as the alternative design which provided users the information about the post while sharing it.

After clicking the “email to friend” button on the posting page, the website will jump to a new page to enter the user's email and destination email address. But there is no information that can remind users about the posting. It violates the principle of Recognition rather than Recall because the system should minimize the user's memory load by making actions and information visible.

lightbox2.png
Post Process

In the posting process, after selecting the category in the first step, the website will jump to the next step immediately without clicking the continue button. Users cannot go back to the previous step and they wouldn’t know which step they are in which. It violates the principle of Error Recovery because the system should help users recover from either system or user errors such as choosing the wrong option. Also, it may increase users’ cognitive load with too many options.

Alternative Design

We used the wizard design to inform users which step they are taking. Also, we only showed users part of the categories to reduce users’ cognitive load. Users could still change the previous option after choosing the next one. 

process1Re.png
New Features
NewFeature.png

We suggested a profile page to show the users' posting history and the reviews of their posting from other users. The page also provides the verified contact methods to secure the safety of trading and the authenticity of the advertising. Moreover, users could communicate directly through the website instead of sending emails.

Guerilla testing

Research Questions
  • What do users expect to see on the website while posting an Ad?

  • Can users complete posting without any help?

Scenario

You are now moving to a new city from Rochester and you don’t want to keep all the furniture with you, so you are trying to sell a second-hand chair on Craigslist. You already have an account.

Usability findings
Post Button

Some participants pointed out that the post button is not obvious enough in the prototype. The issue has been solved by adding color afterward.

Login State

During the user test for the first prototype, some participants pointed out that they didn't know if they were logged in or not. We added the user status afterward. 

Post without login

Post after login

Final Design

Home page
Desktop - 1.png
Login page
Desktop - 2.png
Create a posting
Desktop - 3.png
Desktop - 4.png
Desktop - 7.png
Listing page
Profile page

Limitation

Due to the time constraint, we didn't manage to redesign the whole website. The user tests also focused on only one flow with few tasks. More user tests with diverse users are needed to know more about the effect of our designs.

©2018 by YUNG CHIA YUN.

© COPYRIGHT 2020 by YUNG CHIA YUN.