Craigslist

Redesigning the usability analysis and assessment for an existing app.
Craigslist is a popular online classifieds platform that connects users with local opportunities across categories like housing, jobs, and items for sale. Launched in 1995, it features a simple, no-frills design focused on functionality. Despite its minimalist interface, Craigslist remains effective and trusted, allowing users to easily post and browse listings. Its straightforward approach and community focus have made it one of the most visited websites globally.

Project showcase laptop mockup
Project showcase laptop mockup
Project showcase laptop mockup

01

General Features

This section highlights the core functionalities of the Craigslist web application, emphasizing its user-friendly interface and essential tools for navigation and interaction. From locating services and products in various regions to creating and managing postings, Craigslist offers a straightforward approach to connecting users with their local communities.

Craigslist General Features
Craigslist General Features
Craigslist General Features

02

Persona

John, a 28-year-old IT professional, recently moved to a new city and is searching for affordable, reliable services and products. His priorities include safety, security, and credible information. John's main frustrations are the risk of scams, lack of seller responses, and outdated websites. He is cautious, comparing options and negotiating before making purchases. This persona underscores the need for secure, user-friendly platforms to meet the needs of users like John.

Project showcase laptop mockup
Project showcase laptop mockup
Project showcase laptop mockup

03

User Journey Map

Awareness: This phase starts with the user searching for a platform to meet their needs. They perform a Google search or ask friends for recommendations, leading them to consider Craigslist.

Consideration: The user visits Craigslist and selects their location, but encounters confusion on the homepage. They struggle to navigate directly to the location of their choice, often resorting to additional Google searches for guidance.

Exploration: As the user browses through options, they find themselves overwhelmed by the numerous categories and sub-options. Scouting for the right choice becomes challenging, especially with the side panel navigation adding to the complexity.

Engagement: The user attempts to filter through options to find the most relevant results. However, trust issues arise, making it difficult for them to confidently make a choice. The filtering process itself may lead to confusion, as the user struggles to remember previous selections.

Conversion: In the final stage, the user connects with a seller using the provided information. Despite this, they experience discomfort about sharing personal details, expressing a wish for a more secure and seamless in-app communication system.

User journey map
User journey map
User journey map

04

User Analysis

Method:

  • Hosted a user research clinic physical and virtual (zoom, teams, etc) platforms.

  • Collected the user response via Pre and Post interface evaluation questionnaire.

  • Observed the participant while performing the task to analyze their response to the user interface.

  • Tasks were timed to see how long it took to reach the goal, and each task was also timed to understand the effort required.

Procedure: 

  • Prepared an evaluation sheet consisting of a set of questionnaire to record participant response to various interfaces within the website.

  • Documented the responses and summarized the results as shown in the presentation.

05

User Scenario

These user scenarios are showcased in 3 major tasks that are listed

  • View Events

  • View Post

  • Create Postings

06

Task Flows with Improved Usability

These task flows illustrate the design of user interactions aimed at enhancing usability within a platform. The first task flow focuses on creating postings, simplifying the interface by reducing the number of screens and incorporating features like saving progress, aligning with usability heuristics. The second task flow improves the process of viewing posts by introducing chat-based and recommendation features, which enhance user engagement and search efficiency. The third task flow outlines the viewing of events, emphasizing clear communication and categorization for better aesthetics and usability, adhering to principles like minimalism and real-world system alignment.

View post task flow
View post task flow
View post task flow
events task flow
events task flow
events task flow
create a post task flow
create a post task flow
create a post task flow

07

High Fidelity and User Guides

The user guide provides detailed steps for viewing events on the platform, guiding users through selecting categories, applying filters, and viewing event details. The high-fidelity prototypes shown offer a comparison between the current screen, low-fidelity wireframe, and the final high-fidelity design. These prototypes demonstrate the evolution of the user interface, focusing on improved aesthetics, usability, and user engagement by introducing refined visual elements and enhanced functionality. This approach ensures users have a seamless and intuitive experience while interacting with event listings on the platform.

7.1 A

High Fidelity: View Event

The high-fidelity screens demonstrate a polished and realistic design of the event viewing platform, showcasing clear navigation, organized content, and refined aesthetics. These prototypes accurately represent the final product, allowing users to engage with the interface as it would appear in the live environment, facilitating more effective feedback and validation.

7.1 B

User Guide: View Event

View Events

  • Click on Events tab

  • Select the tags that apply to your preference

  • Select the Event that you like

  • Click on the link to see more pictures

To reply

  • Click on the reply button to reply about the event

  • Choose from suggested text

  • Click send

7.2 A

High Fidelity: Create Postings

The high-fidelity design for creating postings introduces a modern, user-friendly interface with a clean layout and intuitive form fields. It streamlines navigation and enhances the user experience with clear labels and organized sections. The redesign makes the posting process more efficient and visually appealing, ensuring users can easily create and manage their listings.

7.2 B

User Guide: Create Postings

Create Posting

  • Click on create posting button

  • Click on get started

  • Fill up the form

  • Review the form in terms of how it will look in the post after it’s submitted.

  • Click on submit.

7.3 A

High Fidelity: View Post

The high-fidelity design for viewing posts introduces a modern, user-friendly layout with improved visual hierarchy and organized content. It enhances readability and navigation, making it easier for users to interact with and respond to posts. The clean design and clear call-to-action buttons ensure a more engaging and efficient user experience.

7.3 B

User Guide: View Post

Sign up/Login

  • Click on sign up with email or sign up with google or facebook.

  • Fill in all the information. Click on Sign up.

  • Fill in the location details or click on ‘detect my current location’.

  • Click on save

View Post

  • Select the category (Click on Artist).

  • Click on Search.

  • Click on Search- ‘ Bicycle Servicing’.

  • Checkbox the filter ‘Free’.

  • Click on the post of bicycle servicing.

  • Click on Reply.

  • Type on the message.

  • Click on Send.

08

Usability Expectation

TASK

TASK

TASK

CHANGES

CHANGES

CHANGES

CHANGE RATIONALE
(WHY?)

CHANGE
RATIONALE

(WHY?)

CHANGE RATIONALE
(WHY?)

USABILITY HEURISTICS

USABILITY
HEURISTICS

USABILITY
HEURISTICS

Color-coded filters

Color-coded

filters

Color-coded filters

Ease of identification and

improved usability

Ease of

identification

and improved

usability

Ease of identification and

improved usability

Aesthetic and minimalist design

Aesthetic and

minimalist

design

Aesthetic and minimalist

design

VIEW POST

VIEW POST

Categorizing options in tabular

format

Categorizing

options in

tabular format

Categorizing options in

tabular format

Organize the options to improve

aesthetics and avoid clutter

Organize the

options to

improve aesthetics

and avoid clutter

Organize the options

to improve aesthetics

and avoid clutter

Aesthetic and minimalist design,

Flexibility and efficiency to use

Aesthetic and

minimalist design,

Flexibility and

efficiency to use

Aesthetic and minimalist

design, Flexibility and

efficiency to use

Addition of ‘Reply’ feature

Addition of

‘Reply’ feature

Addition of ‘Reply’ feature

Respond to ad posters directly using

built-in suggested templates

Respond to ad

posters directly using

built-in suggested

templates

Respond to ad posters

directly using built-in

suggested templates

Flexibility and efficiency to use

Flexibility and

efficiency to use

Flexibility and efficiency

to use

Redesign of user input page

Redesign of user

input page

Redesign of user input

page

Equipped with simple and

easy-to-understand prompts

Equipped with

simple and

easy-to-understand

prompts

Equipped with simple

and easy-to-understand

prompts

Consistency and standards,

Recognition rather than recall

Consistency and

standards,

Recognition rather

than recall

Consistency and

standards, Recognition

rather than recall

CREATE POST

CREATE POST

Single-screen user input page

Single-screen

user input page

Single-screen user input

page

Enhanced user input review and

minimized back-and-forth navigation

Enhanced user

input review and

minimized back-

and-forth navigation

Enhanced user input

review and minimized

back-and-forth navigation

Minimalist design, Error prevention,

Flexibility and efficiency to use

Minimalist design,

Error prevention,

Flexibility and

efficiency to use

Minimalist design, Error

prevention, Flexibility and

efficiency to use

Introducing ‘save’ feature

Introducing

‘save’ feature

Introducing ‘save’ feature

To save the progress while

form-filling and improve efficiency

To save the

progress while

form-filling and

improve efficiency

To save the progress

while form-filling and

improve efficiency

Flexibility and efficiency to use

Flexibility and

efficiency to use

Flexibility and efficiency

to use

VIEW EVENT

VIEW EVENT

Addition of recommendation feature

Addition of

recommendation

feature

Addition of

recommendation feature

Enhances user experience by

suggesting better matching options

Enhances user

experience by

suggesting better

matching options

Enhances user experience

by suggesting better

matching options

Flexibility and efficiency to use

Flexibility and

efficiency to use

Flexibility and efficiency

to use

09

Usability Testing

  1. Remote Testing: A SUS (System Usability Scale) survey collects user feedback on the platform's usability through a Likert scale questionnaire, covering aspects like ease of use, visual appeal, and confidence in using the site.


  2. Think Aloud Testing: Participants interact with the prototype in a controlled environment, verbalizing their thoughts as they complete specified tasks. The process captures real-time insights into user behavior and potential usability challenges.


  3. Heuristic Evaluation: Usability experts assess the prototype based on 10 heuristic principles, documenting violated principles, severity levels, and recommendations for improvement. The evaluation captures expert-level analysis of user experience and functionality issues.

10

Data Analysis

10.1

SUS (System Usability Scale)

The original Craigslist design had a low SUS score of 49.1, indicating poor usability. Post-redesign, the score improved to 68.4, reflecting better user interaction and overall usability improvements.

10.2

Satisfaction Ranking

Users reported higher satisfaction with the new design, with task-specific rankings showing significant improvement in ease of use, confidence in navigation, and overall satisfaction compared to the original interface.

10.3

Think Aloud Testing Analysis

The time taken to complete tasks, such as signing up or creating a post, was reduced in the redesigned version. Users experienced fewer failures, smoother navigation, and higher success rates, indicating a more efficient design.

10.4

Heuristic Analysis

The heuristic checklist revealed several usability issues in the original design, including poor feedback and error prevention. These issues were addressed in the new prototype, leading to a more intuitive and error-free experience for users.

11

Discussion

The key usability issues identified during the evaluation and offers solutions based on severity and violated usability principles.

  1. Visibility of System Status: While color-coded subcategories indicate selection, users found it hard to recognize this quickly, which violates the principle of visibility. Enhancing the clarity of color coding can reduce confusion and improve recognition.


  2. Control and Freedom: The lack of an edit button on the review page limits users' ability to correct mistakes, violating the principle of user control. Providing an editable form on the review page would grant users more control and prevent errors.


  3. Help and Documentation: Users faced difficulty understanding next steps, particularly when replying to sellers. Clear guidance and documentation would ease navigation, improving user support and reducing cognitive load.

12.1

Iteration 1

Problem Identified:

  • The state filter near the search seems redundant since there is a possibility that the user might want to change the city frequently but not the state.

Principle Observed:

  • Match between the system and the real world.

  • Customizability.

12.2

Iteration 2

Problem Identified:

  • In the events section, the user was confused about the date. He did select the option to filter it to next weekend and did not know what date he was looking at.

Principle Observed:

  • Recognition rather than recall.

  • Customizability, Feedback, Visibility.

12.3

Iteration 3

Problem Identified:

  • There was confusion with the sub-categories, didn’t understand whether it came under the category selected or was independent of it.

Principle Observed:

  • Match between the system and Error prevention.

  • Design and layout, Visibility.

12.4

Iteration 4

Problem Identified:

  • The colour-coded filters need high contrast, or reduced colour.

Principle Observed:

  • Aesthetic and minimal design.

  • Design and layout.

12.5

Iteration 5

Problem Identified:

  • The review page doesn't have an edit option.

Principle Observed:

  • Error prevention.

  • Efficiency, Controllability.

13

Final Design

14

Conclusion

In addition to addressing visibility/observability and feedback issues and enhancing aesthetics and design, the usability of the current Craigslist website has been improved through the following changes:

  • Simplifying the website's navigation structure to make it easier for users to find what they are looking for.

  • Improving search functionality to enable more accurate and relevant results.

  • Reducing clutter on the website to create a cleaner and more organized layout.

As a result of these changes, users of the Craigslist website can expect a more intuitive and efficient experience, with easier navigation and more effective search capabilities.

Let’s Collaborate

SIDDHI DURVE

©

siddhidurve

2024

Let’s
Collaborate

©

siddhidurve

2024

Let’s
Collaborate

SIDDHI DURVE

©

siddhidurve

2024