Craigslist
Improving Craigslist's usability and reputation by making it user-friendly and a secure platform for buying and selling items.
Product - IOS App | Duration - 2-3 weeks | Role - Product Designer
Overview
Project Background Craigslist is a classified advertisements website with sections devoted to jobs, housing, for sale, items wanted, services, community service, gigs, résumés, and discussion forums. Craigslist gets lots of visitors, so I wanted to make it simpler and secure to use.
Problem 2.14 billion online shoppers, 27% of global population. E-commerce growth emphasizes safe user experience. Marketplaces like Craigslist have been popular for a long time, but they are not known for being very safe or easy to use.
Objective The goal is to improve Craiglist's online presence, making it more user-friendly and reliable. This will boost its reputation as a trustworthy marketplace where users can comfortably buy and sell items with heightened security measures in place.
Empathize
Why Using secondary research and self evaluation to better learn about the user and their needs.
How Secondary Research + Self Evaluation using Usability Heuristics for UI Design
Secondary Research (User Reviews)
“Craigslist changed everything from how it is being used. Alot of extra unnecessary steps to look for stuff and is getting confusing and frustrating.”
“They have nothing in order. The platform is plain and old. I think that people are starting to realize this more and more. It lacks so much its impossible to name it all in this post. Another thing is that most the time people do not check the ads in most categories.”
“So far everyone who has contacted me is a scammer.”
“Terrible site, worse community. Its just spam and scams. Legitimate posts get flagged repeatedly. No sense in using a site/app that doesnt work, you cant contact anyone for help with the site. If you cant even make a legitimate post without it being flagged, its UNUSABLE! Please, for the love of god, let this site die.”
“Craigslist used to be a good place. No security anymore. All that money they make and total scammers on there!!! They rely on the community to flag scammers!! That's a joke. Again. All that money they make and no security!”
“I do not like how sellers do not have some kind of rating so as to show if they reliable. I have heard storied of misleading information products that come in the mail that do not match what was on the site.”
“Its not advanced at all. They never moved with technology so now they are scurrying to keep up but to many competitors passed them up.”
“The categories are kind of ambiguous as some things could fit in two or more categories. Also searching can be cumbersome.”
“I mostly hate the aesthetics, and that not many people answer back to ads, if any. Its hit or miss.”
Assessing Craigslist with Usability Heuristics
User Persona My research debrief revealed a tech enthusiast (Ali) who loves to collect electronics.
Ideate
Define
Why Utilize past research to set main objectives and determine top priorities for Craigslist features.
How User Persona
Sitemap | Using Miro, I created a sitemap for FashionEase. Starting with the navigation menu and working my way down, referring to my "must-haves" on my feature roadmap to ensure all the features are there.
Scenerio #2: You come across the airpods that you want, so you contact the seller to buy them and then give feedback on the user.
Task Flows Using the same tool, I created three task flows for the main functions the app should have.
Scenerio #1: User logs into their Craigslist account with the intention of buying used airpods. They come across an ad that seems suspicious so they decide to flag it.
Sketching Wireframe Using the Balsamiq app on my iPad, I started drawing my wireframes. I used my sitemap and task flows to help me decide which screens to draw.
How | Sitemap + Task Flow + WireFrame Sketches
Why With the user persona and essential feature roadmap defined, it was time to brainstorm and imagine how Craigslist could be revamped.
Craigslist Item View
Current Design
Revised Design
1.
Updated the location title to ‘location’ instead of ‘Toronto’ as this page is pre sign-in.
2.
Increased the size of category icons to utilize white space better.
6.
Added a hover state on the item that the user will be hovering over to highlight it.
Design
How UI Design
Craiglist Homepage
Why I refined FashionEase's appearance by meticulously crafting its interface and visual aesthetic, ensuring it was polished and visually appealing, before proceeding to test it on the online platform.
Protoype
Why Now that the detailed wireframes are done, I tested my ideas for the task flows. I used the Figma file to build a clickable prototype with simple interactions and animations.
How High-fidelity click-through prototypes
Test
Affinity Map Findings
User testing sessions went well. All users completed the tasks easily, and their feedback focused mainly on making things clearer, suggesting improvements, and discussing hypothetical cases that were not part of the project.
All the users suggested that the upgrade was much needed and there is a drastic improvement in the overall design. They described the overall feel as minimal, fresh and clutter-free.
Everyone found the website easy to navigate, and appreciated the chat and flag feature as it make communication easier.
Most of the feedback was around UI, which included (but not limited to):
Category banner of the second page needs improvement to look highlighted as currently it looks a bit dull, and the icons also need to be bigger in size.
Users pointed out that text and image alignment is required throughout. Another suggestion required updating the secondary buttons.
Addition of favourites icon on the images was suggested and users also wondered how they can view the favourited items.
In conclusion, the iterations that were suggested were minor but will make a big impact for the user experience.
Priority Revisions Matrix
The next step was to choose which issues and ideas to address. By organizing the notes in my Affinity Map into a priority chart based on user value and effort to implement, I could easily identify problems to solve right away (high value, low effort), those to tackle next (high value, high effort), and issues to ignore if they had low user value and were not recurring.
11.
Updated the chat bubble color scheme so it doesn’t look similar to the rating menu and the buttons (based on the initial design).
Re-positioned the chat window to so the placement is better aligned with the screen.
Iterate
3.
Added an area in the menu bar called “Favourite” to see favourited ads.
4.
Updated the banner by changing the color and border, as well as increased the font and icon size to improve legibility.
5.
Removed line borders around the pictures to achieve a cleaner aesthetic.
Craigslist List View
7.
Added rating for the seller so that the buyer can view the rating at first glance.
8.
Added a black border around to show which icon is enabled.
9.
Updated the color scheme of the primary and secondary buttons to make them more consistent.
10.
Added a black stroke under the mini image of the airpods, highlight which picture is currently enlarged.
Responsive Design Below are the various screens I designed specifically for Craigslist users who prefer browsing and navigating the site on their mobile devices.
Final Prototype
Last but not least, I would like to invite you to take a moment to thoroughly enjoy and appreciate my final prototype! Your feedback and thoughts would be invaluable to me.
As you go through the prototype, keep in mind the below tasks:
Login on Craigslist to look for airpods, and flag the post as suspicious.
Once you have found the airpods (same post), inquire about them from the seller and the rate the seller.
Why With my prototype successfully up and running, it was finally time to carefully validate and thoroughly test my product, as well as make any necessary revisions based on the feedback and results I obtained during the testing.
How Usability Testing, Affinity Map and Priority Revisions Matrix
Usability Testing
Total User Testing Participants: 4
Duration: 5 hours
Goal: To test my assumptions of how users would navigate the website and if users would find the features useful when compared with the original site.
# of Tasks: 2
Each user had to finish 2 different tasks during the session. After completing the first task, I asked specific questions to understand their actions, expectations, frustrations, and overall views on the experience. I also recorded each user testing session to capture the dialogue and interactions, which helped produce detailed final results.
Outlined below are the 2 scenerios that were provided to the users.
You log into your Craigslist account with the intention of buying used airpods. You come across an ad that seems suspicious so decide to flag it.
You then come across the airpods that you want, so you contact the seller to buy them and then give feedback on the user.
Affinity Map
I made an Affinity Map to summarize my usability testing results, noting Successes, Concerns, and Suggestions, and used color coding to distinguish between users.
Why To enhance my product's overall usability, it is essential to carefully analyze and implement improvements based on the valuable feedback provided by users. This process will help ensure that the product meets their needs and expectations more effectively.
Revisions Here are the main changes I made to my wireframes, showing the updates and improvements made during the design process.