Bid pattern card

The bid card pattern display the bid indormation in a single element.

Usage

Usage Card
Bid cards are for use on the project proposals page. They provide the project owner an overview of all the freelancers that have bid on their project.
Bid search cards have been designed to meet the following objectives:
to provide potential clients an easily digestable and scannable overview of bids that freelancers have placed on their project.
to allow freelancers to present a quick, digestable snapshot of their bids to project owners.

Anatomy

Bid cards will contain the following information, taken from the information provided in their bids, as well as some basic information about the freelancer from their user profile page.
Anatomy Card
1. User profile image
To give the project owner a visual glance at the freelancer who has bid on their project.
2. User information
Compact and quickly scannable information about the freelancer taken from their user profile.
This includes:
their username
any relevant badges to their account
their 5 star reputation score
the number of reviews they have received
their earnings score
their percentage of jobs successfully completed
their country
3. Bid amount
This will be in the form of a fixed price and delivery time for a fixed price project, or a hourly rate for an hourly project.
4. Bid proposal information
A compact version of the bid proposal which the freelancer would have entered when bidding on the project.
5. Bid review widget
Only visible to the owner of the project, allowing them to create a confidential assigned rating realting to the quality of a bid. This widget contains:
Hide bid - dismisses and hides a bid from the bid list
Rate bid - give the bid a rating out of 5
Add private note - adds a private custom note to a bid
6. Call to actions
Chat - engaging the freelancer directly via Messaging
Award - directly awarding the project to the freelancer

Variations

Depending on the context of a bid and who is veiwing it, bid cards are adaptable to allow for a number of different variations.
Non project owner POV
A user who is not the owner of a project viewing a bid card will view a variation of the UI. The Bid review widget will be hidden as this functionality will not be available to them, and the call to actions will change depending on the context.
If a viewer is the owner of a bid the actions will change to:
Retract - allowing the user to withdraw their bid from the project
Edit - allowing the user to make edits to their bid proposal
Bidder Card
If a viewer is not the owner of a bid the actions will change to a single ‘Report Bid’ link, allowing them to report any bids they deem inappropriate.
Freelancer Card
Sealed bids
The freelancer has the ‘Sealed’ optional upgrade attached to their bid, then their bid card will display the ‘Sealed’ tag. This upgrade hides the bid proposal content to other users who are not the project owner, and this alters the information displayed on the card respectively.
If the viewer is the owner of the project, the bid card will appear as default with all information visible but with the ‘Sealed’ tag added to the bottom.
Sealed Owner Card
If a viewer is not the owner of the project then the bid amount and bid proposal description is hidden and replaed with the ‘Sealed’ tag.
Sealed Freelancer Card
Add private note extension (project owner POV)
As part of the Bid review widget the project owner has the option to leave a private note for the bid. This extends the bid card to make room for a field to add a note, and once completed will add the private note to the bottom of the card.
Sealed Freelancer Card
Sealed Freelancer Card

Responsive Behavior

Bid cards are built to scale responsively, and then snap to a more condensed layout for mobile.
Desktop
Desktop card

Mobile
Mobile card
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.