Freelance Pro

A Chrome Extension for Upwork freelancers that gave them a greater understanding of how much they will earn from a job in their local currency.
Azure
Next.js
Google Chrome
Chrome Extension
Side Project
An image of this project
Upwork is one of the largest online platforms connecting freelancers with work opportunities and clients across the world. Early on in my freelancing career, I used the site to find clients and small projects, and I've since used it as a client searching for talent. However, I encountered several frustrations both as a client and as a freelancer, which led me to develop my first Chrome Browser Extension, Freelance Pro.

Upwork Pain Points

There were two key areas that I wanted to address with my product: the usage of US Dollars throughout the Upwork platform, and the complicated fee structures that made it difficult to accurately estimate earnings.

Despite being a global platform, Upwork lacked support for showing pricing in local currencies. While this streamlined things for Upwork as a US-based company, for freelancers in other countries it made it difficult to determine project prices in their local currency. Generally, when bidding on a job, I found myself working with an Excel spreadsheet or doing an approximate calculation in my head to covert into GBP.

Upwork also employed a complicated fee structure whereby your first $500 earned with any client was "taxed" at 20%, the next $9499 was taxed at 10%, and anything above $10,000 had 5% deducted. As well as being quite costly for freelancers working on multiple small projects, the fee structure made it challenging to calculate bid rates based on the amount you wanted to take home in your local currency. There must be a more intuitive way, I thought, to ensure freelancers aren't accidentally charging too little for a job.

The Freelance Pro Chrome Extension

The initial release of Freelance Pro in June 2023 aimed to address both pain points mentioned above. The extension converted Upwork fees into more than 150 supported local currencies and displayed a button that triggered the opening of a modal with more information, offering a clear breakdown of earnings for both fixed-fee and hourly jobs.

This image shows an animated GIF of the Freelance Pro Chrome Extension in action on the Upwork website. The extension overlays additional information on the standard Upwork interface, providing freelancers with immediate insights into job details. It displays the payment a freelancer would receive for a particular job, converting and presenting it in British Pounds (ÂŁ697), alongside the original listing in US Dollars ($1,000.00).
The Freelance Pro extension button displayed on the Upwork job details page, providing the user with more information about the job in their local currency.

For fixed-fee jobs, the modal showed how much Upwork would take from your earnings in both US Dollars and your local currency. For hourly jobs, you could input the job duration alongside an estimate of how many hours a day you'd be working to calculate how much you would earn after fees and, by extension, your effective hourly rate.

 The image is a screenshot of an Upwork job listing page with the Freelance Pro Chrome Extension interface displaying an enhanced view of a job titled "Java Spring Boot Expert." The Freelance Pro extension adds a detailed breakdown of the job's financial aspects in both USD and Japanese Yen (ÂĄ).
The Freelance Pro modal displays a full breakdown of earnings based on hourly rate and estimated job length.
Building the Product

Honestly, I thought building a Chrome Extension would be much easier than it turned out. Iassumed I would need only a simple UI pop-up and a script to extract data and send it to the backend for analysis, along with some HTML code to display the result. Unfortunately, the end process turned out far more complicated. I won't go into the full details, but here's a brief overview of the product’s frontend and some of the challenges I encountered in development:

Pop-up UI

I used my usual tools in building this app, employing a simple React app with Tailwind based on the information in this helpful blog post. The main challenges here focused on creating build scripts to compile the app into as few files as possible so that the extension could use it.

Content Script

The content script is the heart of the extension. The script has access to the web page and is loaded whenever the user visits an Upwork URL. The content script gathers data from the page and sends analysis requests, then inserts the UI components onto the page and injects another script.

Injected Script

Due to understandable but frustrating restrictions, the content script couldn't interact with the page’s "window" object where Upwork stores pricing data. To address this, I had to inject a script to gain access and send the data back to the content script via a message event.

Background Script

Since security restrictions make sending an API request from the content script impossible, this script sits outside the web page and sends data to and from the API, returning it to the content script.

Extension UI

Initially, I wanted to use Tailwind to style these components. However, after briefly experimenting with the idea of injecting a mini React app, I discovered LitElement, a simple base class for creating fast, lightweight web components {Link} that can be styled using Tailwind and then easily injected onto a page. As a bonus, they also use Shadow DOMs {link}, which means all styles are isolated and unaffected by the site's style.

The image is a flowchart diagram illustrating the architecture of the Freelance Pro Chrome Extension. It outlines the interaction between various components of the extension and the Upwork site. The components are represented as blocks with arrows indicating the flow of information or control.
Flowchart showing the architecture of the Chrome Extension and the scripts required to extract data from the Upwork site and send it to our servers for analysis.
Using Upwork as an Early User Acquisition Tool

To find Upwork users who could beta test the product, I decided to use Upwork itself as a paid acquisition tool. I created a job paying beta testers five dollars to try out a new Chrome Extension and fill out a survey after a few days. I received a surprising amount of interest and onboarded around 30 users from a range of countries, all of whom used local currencies in place of the US Dollar. After accepting the job, applicants were instructed to fill out a short survey, download the app and then use it during the ordinary course of their work for three days before completing a final survey. Despite the nominal payment, I received a lot of excellent responses and valuable feedback – many freelancers seemed pleased to complete an easy job on the platform that could help to improve their ranking.

Launch and Marketing

After a short beta test, Freelance Pro launched on the Google Chrome Store with a number of good reviews from early testers, which helped attract new users and propelled it up the search results for "Upwork". I also made posts on Reddit and Product Hunt, with limited success – the Product Hunt site has changed so much that you need to put a lot more effort into your launch strategy than I did {link}!

I made use of a few introductory advertising offers from Reddit and Google, of which Google Adwords was probably the most useful. Initially, I found myself inundated with spam and people looking to make a quick buck online, but after honing my keywords and disabling the automated campaign (as recommended by a Google Rep), I received much better results. Disabling ads from mobile devices and targeting desktop users who could download a Chrome extension was probably the most effective change and removed much of the noise

Using the same code, I also made an online "Upwork Fee Calculator" that allowed users to quickly calculate earnings in their local currency. Using Next.js static generation, I generated a calculator page for the 150+ currencies we supported, which really helped with SEO. In a few countries, the calculator appeared in the first couple of results for "upwork fee calculate" or in searches for Upwork support.

The image is a screenshot of a webpage titled "Freelance Pro Japanese Yen Upwork Fee Calculator". It presents an online calculator designed to help users determine how much they will be paid for their work on Upwork by converting US Dollars into Japanese Yen (JPY), indicating a tool to assist with currency conversion and fee calculations without the need for manual spreadsheets.
The Upwork Fee Calculator built to market the Chrome extension, using Next.js static generation to create an individual page for each currency
The image is a screenshot of the results section from the "Freelance Pro Japanese Yen Upwork Fee Calculator" webpage. This section, titled "Calculated Earnings," shows the outcome of a fee calculation based on the entered job details.
The calculator displays a breakdown of Upwork fees in the user’s selected currency.
Upwork Makes Some Changes

My experience with other projects has taught me that building your product around pre-existing ones can introduce complications. Shortly after Freelance Pro launched, Upwork addressed both of the pain points that led me to create the product. The site now displays pricing in some (but not all) local currencies and has also greatly simplified the fee structure to a flat 10% for all users. Though I can't claim to have influenced Upwork's decision in any way, the changes brought validation that I was addressing something people found frustrating.

I had plenty of other ideas to make the product useful for freelancers. These ideas included utilizing ChatGPT to analyse job listings and provide concise summaries, assigning a score to each job based on its compatibility with the freelancer’s skills and desired hourly rate, and issuing warnings regarding potentially unreliable clients – for instance, those who posed numerous jobs without making any hires. The goal was to streamline the freelancer’s experience, to conserve time and energy, and reduce the connect credits freelancers spent when bidding on jobs.

However, upon reflection, I concluded that constructing a software product on top of someone else's is a fraught process that leaves you playing a cat-and-mouse game you will never win. Conversation with customers revealed that most of the Upwork users I attracted were new to the platform and in no position to pay for a product like mine. Monetising the app would be a difficult task, especially with the introduction of AI features for which I would be charged on a consumption basis.

With those thoughts in mind, I decided to shut down the project and move on to others with a more realistic chance of success. At the very least, many ideas for Chrome Extensions have emerged from this project, and I now have the robust framework necessary to build them!

The image is a screenshot of the Chrome Web Store listing for a Chrome extension named "Freelance Pro." The listing features the Freelance Pro logo and indicates that the extension has a rating of 4.9 stars from 16 ratings.

“It was very useful honestly, it makes the calculation of the fee so easy and has a good synergy with Upwork. After I installed it didn't feel invasive or a external tool [...] - it felt like it was a feature of Upwork.”

— Freelance Pro User, Argentina