Sep 28, 2020

FREELANCING WEBSITE DESIGN

FREELANCING WEBSITE DESIGN

INTRODUCTION : -

As a former freelance web developer, I learned how it’s difficult for a freelance web developer (especially if junior) to find good projects online. The main problem I experienced is that on Freelance Marketplaces there are usually poor descriptions like “Simple website – We are looking for a web developer for a simple website in clothing industry”.

For developers it’s not easy to understand the real size and complexity of the project to make a right price quotation. My goal with this research was to understand if the problem was only mine, or if other developers have this problem too. After that, I managed to design a developer-friendly freelancer marketplace, to simplify the process of pricing evaluation.

Research

Research Goals

I wanted to learn how freelance developers look for clients and jobs online right now. In particular, on those who use freelancer marketplace but are not completely satisfied about it. My goal was to understand if developers are interested in a platform to simplify the research of projects they could work on and make better price quotations.

Study 1: User Interviews

5 participants, Freelance Web Developers who:

Are looking for new clients/projects
Do not invest a lot of time in personal branding or networking
Know at least one freelance marketplace

I used the interview script as a guide and ask follow-up questions based on answers from the users

Study 2: Survey

This study focused on better understanding users needs related to online job research for Freelance Web Developer. In addition, I collected data to understand which percentage of users currently makes a bid on projects they look.

Research questions

How can freelance marketplace better support freelance developers when looking for projects?
Which functions/features users like in the freelance marketplaces they currently use?
Which other functions/features would they like to have?

Research Results

Key Findings

Users need a deep understanding of the project
Users would like to see a clear distinction between client and professionist areas
Users use mainly desktop devices to visit freelance marketplaces

Recommendations

The idea was to design a web platform similar to Behance of Dribble where UI Designer and Agencies can upload their project with mockups/prototype and explain the better as possible the functionalities of the website/app they need to be developed. In this way, developers can send a price quotation for coding these projects having more information.

Next Steps

The app will be designed with a desktop-first approach
The browser app will have a clear distinction between the section dedicated to pricing offers (Freelance) and the section dedicated to the projects uploading (clients)
Developers will see a link where they can see the mockup or prototype of the project (uploaded on InVision, Marvel, Figma, etc.). In this way, the developer will be able to see the required functions of the website/app, user workflow, and graphic style guides
The single project page will provide additional standardized info: programming language/framework required, Device and browsers required compatibility

Brainstorming and prioritizing features

After collecting data and insights with User Research, I brainstormed to come up with Feature ideation. After that, using Complexity vs Value model, I identified priority features.

Low-Fidelity Prototype

Based on my sketches I developed low | mid fidelity interactive prototype

Prototype functionalities

Users can open a Mockup or Prototype in an external source (eg. InVision, Figma, MarvelApp, etc.)
Users can Make a Bid (the money request to develop the project)

Usability test

An usability test was useful to quickly understand if my idea of functionalities was sustainable or not. As often happens, most of the features needed improvements

Low Fidelity Prototype – Iteration

Based on Usability Test results, I iterated my design and improved it.

High Fidelity Design

Design System

After the iteration on Low Fidelity Prototype, I started working on Design system. So I looked for inspiration and then I created Style Guides and Design Pattern.

1st Prototype Version

Based on Low-Fidelity Prototype, Style Guides and Design Pattern, I created a first version on High Fidelity Design of Single Project page.

Accessibility improvements

Working on the accessibility of the project design, I found out three possible improvements:

Include an error message with an icon (in addition to red subline) for display input errors. This will help people affected by Deuteranopia, Protanopia, and Achromatopsia to better understand the error (as they can’t clearly recognize red color)
Increase button size. This will help people to click on the right button, in particular in mobile navigation.
Increase paragraph font size. Increasing the font size of the paragraph will help people with low vision to better see the description text.

I reported improvements on the Figma frames and placed them side by side in a new frame called “Accessibility Improvement” to show the improvement.

Usability Tests

I used Look Back to test my Final design with remote unmoderated sessions.

After that, I choosed a Kpi, decrease time on task to iterate and improve my design. The hypothesis I formulated is that Users want to have separate flows for Making a Bid and for Writing a message to the client.

I used these insights to improve the Single Project page:

7 out of 11 participants didn’t try to compile the “(Optional) Write a message to the client” field in “Make a bid modal”
8 out of 11 of users spent time to think what to write in “(Optional) Write a message to the client” input field
4 out of 11 participants asked for the possibility to write to the client before making a Bid
P4 said “I won’t Make any Bid if I don’t understand the project. I would like to send a message to the client before making a bid, to ask additional information or schedule a call”

Iteration and final design