If you have ever visited Craigslist, you have probably noticed that they do not have the best user experience. The flow of the website does not always make sense, and the design is not very aesthetically appealing. My challenge was to identify what the problems are with the current design, to come up with solutions for how to solve those problems, and to design a new user experience for someone using the Craigslist website.
First I had to identify the problems with the current Craigslist design. In order to do this, I conducted user testing. Each user had to complete two task sets, and in this process, they would identify the challenges that they encountered while navigating the website.
Task Set A
1. Select housing and then select apartments/housing
2. Search Clifton and set filters to "has image" and "1-2 bedrooms"
3. Select the first result and review details
The Home Page
Both users pointed out the abundance of information on the home page. They were still able to navigate to the correct categories, but it took some time to sift through all of the options.
The Post Button
Each of the tested users had significant difficulty in finding the post button. They both searched around the page for over 20 seconds looking for the button. This would indicate that it is not made visible enough, and that it is not placed consistently across the platform.
Task Set B
1. Select the jobs category and then select art/media/design
2. Select the first job listing and review the details
3. Create a new post seeking a job
4. Review the details, add an image, and publish a post
The tested users had some difficulty in the process of using the filter options. They were not categorized, so one user spent a few seconds hovering over the page in search of options. This could be simplified with a more clear filter feature.
The Post Process
Throughout the post process, the users seemed overwhelmed by the flow of information. Advancements to the next step brought frustration, because they thought they were done at other points. Additionally, the fields of required information seemed unclear, as one user was not able to complete all of the information on the first attempt.
Next, I generated a task flow diagram highlighting the process of my two users navigating the task.
Task Set A
Task Set B
Then, I made a task flow diagram of the ideal flow of the states in the design. In this step, I began to identify problems that the users encountered.
Task Set A
Task Set B
Here, I identified the problems from the task flow diagrams and user tests, and I determined solutions that I could explore in the re-design process.
Solution to Implement in Redesign
Problem With Current Website
Next, I made a set of wireframe prototypes. I presented these to different users, and received feedback on what was working and what was not.
- The homepage may still be overwhelming. Are the uses of these boxes actually necessary?
- The filter system is more organized, but the order of info can be considered. What is more important? Also make more
distinction between typable and selectable information.
- The grid system in use here does not vary much from the original design, can this be improved or simplified?
-Using a pop-up system for the results might not be realistic in terms of loading page data.
More Digital Iterations :
- The gridded homepage system is much less overwhelming. However, there may still be difficulty in distinguishing between
selected and not selected options.
- Provide stronger cancellation options
-Change headers to keep more consistency across pages. Make sure a whole new page can still relate to the previous.
- This first filter mockup categorizes filters more than the original design. However, the size variation across options
can be confusing. There could be a stronger solution to typable fields than to use boxes.
- The second filter mockup provided more structure to information flow and typability, but the typable fields should be
more distinguished from the selectable fields. Additionally, the use of transparency deducts from the perceived importance
of this information.
- The pop-up results mock up would not prove realistic on the actual website due to data size. This option does not allow
users the option to reply or create a posting.
-The second results option also does not provide a reply option. The thumbnails, while proving a scrollig option, still take
away from the results content due to size.
- The first results page seen here was improved from the paper mockup so that all details were not visible and cluttering
the grid space. In this option, having more info as a drop down menu would be redundant, as that same information
would be available in the preview and then again in the post.
-The second mockup shows thumbnails off to the side, but without clear indication that scrolling through results is possible.
Additionally, the thumbnail sizes and visibility may confuse viewers about the hierarchy of result information.
- The first homepage concept places too much emphasis on unnecessary information. It would cause too much compositional
shift between states.
-The second mockup would also cause too much of a change in composition once a category is selected. This could be
solved by providing enough space in the original layout for a drop down that would not shift other features.
- The original “Success” message banner was not very visible to viewers and could confuse viewers on what stage they were in and whether their post was actually active or not.
- The original drop down menus created an unnecessary hierarchy in information. Because of transparency, this information seemed less important that the typable information. This was given full opacity to even out importance.
- The difference between selected and not selected options was not distinct originally. The transition between “>” and “O” was too drastic. Additionally, the non-selected results became more transparent to provide a clear confirmation on what was being selected.
The design standards for my rethought Craigslist interface. This style guide insures consistency across the system and between each task to be completed.
Task Set A
Task Set B