Craigslist-Redesign

​

​

Dana Nasr, Mark Robinson, Nekha Radha Das, Sydneigh Vitlen, Victoria Walton

The Problem:

​

The Craigslist website is extremely outdated and home page is too packed with information for current usage standard.

PROJECT OVERVIEW

The Solution:

Create a responsive device that allows users to have easy access to apply for jobs across the country.

Role: UX/UI Designer/ FE Developer

Tools: Figma, GitHub, Bootstrap, Google Drive

DESIGN PROCESS

01

Research

Our Craigslist U.I. update was designed to achieve more user engagement and successful job searches. We have observed that the site isn’t meeting completed goals, high user engagement, pleasing aesthetic, and responsive design, which is causing users to experience confusion or frustration within the website. How might we improve the craigslist website so that the users are successful in finding a specific job posting?

PROBLEM STATEMENT

Usability testing

Interviews

Research Methodology

Industry Analysis

Craigslist is an Internet phenomenon that continues to be one of the top go-to sites for local classifieds.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

(Source: https://www.trendhunter.com/slideshow/craigslist-innovations)

​

​

​

​

​

​

Traffic and Visitor Engagement

In July 2022 craigslist.com received 1.6M visits with the average session duration 08:39. Compared to June traffic to craigslist.com has decreased by -29.3%.

​

​

​

Visits: 1.6M -29.3%

Pages / Visit-1.2

Avg. Visit Duration-08:39

Bounce Rate-84.17%

Segment-Neutral

Research -13,390 clicks

Proto-Persona

Affinity Diagram

User insights

�During user testing, we discovered that users cannot navigate to the correct category they are looking for on the website.

​

Therefore, we believe that increasing the UI style and optimizing categorization so that we might be able to help if we shorten the length of time to complete a task.

​

Competitor Analysis

Storyboard

02

DESIGN

Wireframe Sketches

Low-Fidelity & Mid-Fidelity Wireframes |

HTML Tags

Low-Fidelity & Mid-Fidelity Wireframes |

HTML Tags

03

PROTOTYPE

UI Style Guide

High-Fidelity Prototype →

Iterations following High-Fidelity

User Testing

1. Breadcrumbs

3. Homepage Carousel for additional user engagement

2. Hotjar Analytics: User Feedback Collection

04

FRONT END DEVELOPMENT

The Numbers

Interests�3.3 min

​

Pages/ Visit

1.2

​

Bounce Rate

84.17%

​

Mobile Users�98%

What the numbers indicate…

​

• Users are spending time on the site.
• ​
• Users are leaving without clicking further links.
• ​
• Users are leaving due to poor navigation and UI as indicated in testing

Front End Development: Design #1

How?

​

• Make it easier for Users to navigate?

​

• Increase page visits while lowering bounce rates?

​

• Make the site pleasurable?

​

• All while maintaining the original “communal” intent of the design?

Front End Development: Design #1

The

Answer…

• Create from the inside-out. A mobile-first approach

​

• Streamline site-mapping

​

• Emphasize UI

​

• Interactivity

Craigslist Redesign: Version #1 (Desktop)

Craigslist Redesign: Version #1 (Mobile)

Craigslist Redesign: Version #1

KPI’s: What are our users doing and how?

KPI’s

3 main things

• Time on task

​

• Number of clicks to complete the task

​

• Time to locate a call-to-action button

​

​

Front End Development

Github Repository →

Github Pages Prototype →

Future Developments

1

2

3

Additional Interactive Pages on our Prototype

Further Usability Testing

Additional Interactive Features

THANKS!

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik