PayAds.io

Classifieds Site

This is a website that allows members to create ads, in order to sell specific services, and it is our most ambitious project yet. Everything about the project revolves around maximizing user engagement.

We're constantly studying the best practices around the biggest sites out there and implementing and testing them on this platform.

Every step of the process of searching and contacting users has been detailed below.

Apart from the public part of the site, most of the magic happens in the Panel area of every user, where they're able to setup everything about their profile.

All of the resources, such as member comments to any of the advertised profiles, ads updates, top rated members and such are publicly listed.

Listing

Listing is the main part of the website that the members interact with, hence we were especially careful when we were designing this page.

At the top we're displaying the main filters that allow members to pick the city that they're in. This being a very important filter, we're displaying it as a carousel to display as many options as possible and to be easily scrollable.

The majority of the traffic is mobile, so this also works very well on mobile phones.

Right under those, we're displaying advanced filters for the user to be able to pick and choose exactly what they want.

They don't stand out so much because not many users actually use them, but they're always available for those who now exactly what they want.

Registration

The registration process is pretty straight forward for users, however, for members that want to post ads about themselves, we're requiring them to fill in some important information that allows us to create the profile page and the filtering options.

This information has been divided into 5 steps, because people don't actually like to fill long forms, so we're trying to make the process as simple as possible.

The steps are divided with the sole purpose to make it looks like they'll almost done.

These are the steps in order of appearance:

Videos

To keep the users engaged with the site we're listing all of the member videos on a separate dedicated page for people that want to discover our members that way.

This page has been designed to keep the user interactions to a minimum. Once you click a video, the autoplay kicks in and plays the next videos for you.

Easy support for arrow navigation as well as scrolling up and down to skip a video is also implemented.

Updates

We've implemented an updates page that lists what changed in a specific member's profile when they edit something from their end.

Apart from it being a way to tell the community who's more active, this is also a great way to allow members to push their profiles to the top. This technique makes the members return to the site more frequently to make these updates and build upon their profile engagement.

This page lists everything from new approved photos, about me text, rates, etc.

Comments

We're listing the user comments that appear on the member profiles.

This way we're allowing users to support in an "upvote" manner the members they like by raising their profile on this page.

The chat is enabled everywhere and allows everybody to participate in discussion.

However, on the profile pages, the chat is enabled only if the member is online on the site at that moment. This way, we're providing direct communication with the member and at the same time, making the user to spend more time on the site.

The chat allows all the necessary features from the other IM apps, including @mentions, private messages, and so on.

Profile

At the top we're displaying simple navigation for the users that came in from the search page. We're taking under account their filters and are navigating through them to make it easier for users to visit all the results of their filters in great detail.

Profiles allow our members to present what they have to offer. That's why, next, we're focusing the attention on what matters the most, the photos. On mobile, this section occupies most of the view port so it's going to steal all the attention.

Below, we're displaying all the information that has been filled in by the member when they're signed up.

On the right, we're displaying location and contact information in order to keep things handy just in case they decide to contact the member.

Also on the right we display options to report the member as having a fake profile or something similar.

Just below the member's information, we're displaying comments by the other users that have interacted with this member.

Users also have the option to add the member to their favorites list.

The Panel

This is the control panel of every user. It's full of customizations and information related to their activity and resources (comments, ratings, flags, support tickets, and more).

The Dashboard presents the user with notifications and updates and it also reminds the users to fill in required information if they haven't already.

The Premium page allows the members to upgrade their accounts. Premium packages offer higher visibility on the search pages.

The "Edit My Profile" page is an SPA allowing members to edit their public information that gets displayed on the Profile page.

The gallery allows members to update their photos and videos.

The comments page displays all the comments that they've received on their Profile page.

Smalltalk is a bulletin board section that members of the same user type can use to discuss anything they want.

"Mes Suiveurs" or "My Favorites" display a list of users that liked their Profile page.

The Blacklist is a collection of complains created by members to help others identify bad clients and such.

Next is the Support area where they open tickets for moderators to look at.

The Settings page allows them to change basic information like email or password.