DEV Community

loading...
Cover image for Full Freelancing Workflow

Full Freelancing Workflow

adriantwarog profile image Adrian Twarog ・7 min read

The full freelancing workflow I go through when I take a project from start to end involves a number of steps which I plan to go through in depth. This includes the initial engagement, sorting out a price, designing the initial wireframe, as well as the entire design, and finally developing it.

I wanted to cover each one of these aspects in a bit more detail for those interested in freelancing and running up your own project. These steps will also cover how you should complete each aspect. For those who prefer, I have an audio version of this article where I talk through them in more detail, but it's more or less the same content!


Freelancing Process

Freelancing Bundle!

Today we have a sponsor! It's from Study Web Development. If you want to learn more about getting started for freelancing, a fantastic fellow called Kyle has a freelancing bundle to get you started. Freelancing has so many aspects to it which is impossible to cover in one article/video, but if you check out Kyles bundle, you will get to see an in-depth look at freelancing workflows, proposals, invoicing, much more. I've added a link in the description below. Over 3000 people have already bought this, and I've added a discount code below for 20% off if you guys are interested:

https://studywebdevelopment.com/freelancing.html

Use the offer code AW20 to get 20% off the complete bundle!

Alt Text

Initial Engagement

I am going to assume you met your first client and they have asked you to do some work for them. The initial engagement follows this step, and is the process by which a scope of work and price is agreed on. It can last days weeks or even months, but in small businesses or freelance work, it usually only take a few interactions where we both agree to what needs to be done, and how it needs to be done. What you want to figure out in the initial example includes:

  • What is the objective for the work? (Website, app, etc?)
  • What is the expectation of quality and scope for the work? (Examples of similar sites, competition, etc)
  • What is the timeline and expected due date they require?
  • What budget has been decided for the work? (Your price and their budget might vary, so best to find a middle point between the two)
  • Does the budget align with the expectation of quality and scope? (If not, find a happy medium)

These basic answers will help you build a structure for the project. Using them, we can move to our next step.

Pricing is one of the most important aspects for the initial engagement for you to be happy with. People price in different ways, some price per hour, while others price per project, and of course there is value based pricing too. If you are beginning out, hourly might be the easiest, and you will need to make some general estimates based on the answers above. I can’t really tell you how long it will take, because this will be different for every person and project.

I can tell you that I prefer to do value based pricing. This involves finding out what the value of the job is, which means how much money it will bring it, or how many problems it will fix, and the cost to that, and base the price from there. There are aspects we can take a look at later, but making sure the price is within the budget for the client and the affordablility for you to deliver the project.

In terms of payment, I would recommend doing 50% payment upfront and 50% on delivery. This is usually the easiest in terms of trust.

Alt Text

Wireframe Design/Project Plan

This is a critical part for any work especially in freelancing where the initial engagement and expectation of work still might be a bit different from both parties. The wireframe and project design plan helps makes sure both parties have the same point of view. This usually involves two parts.

  • The first is to bring together a few use case examples of similar work within the clients expectation for what you plan to deliver.
  • The second, is to create a simple high level mock up as a wireframe of what the actual deliver will be.

If you are designing a simple website from a pre-made template, this is quite easy, as you will just be passing across example templates for the client to choose from. However if you are making a custom design for the website or app, it will involve investigating the competition in order to find exactly what the client is after. Sometimes the client might not know what they are after, and this step has to be entirely skipped, but this is where the second part of wire framing comes into play.

Designing a simple high level wireframe of the look and feel and content of the website or application will ground the next part of the design and development in place. It’s sort of like the blueprint architecture of building a house. Once we agree to the layout, we can flesh out the colours, images, content a bit more.

After the wireframe stage has been agreed on, we move onto creating the design in full.

Alt Text

Designing the Project

If you have heard of measure twice, cut once, this is the principle that will save you a lot of time in freelancing. A common situation we all face in freelancing is ever changing scopes and expectations for deliver. The wireframe and design stages help ensure this doesn’t happen. In this stage, we actually build out the design for the project. You can use whatever tools you feel like, I personally like Figma or Sketch, but after designing the project to the requirements of the client, it’s very important to create a presentation for it.

The presentation is where you highlight your work, how your design delivers on the expectations that have been built up so far. A presentation is not simply sending the freelancing work to your client. This is a big no. You want to have either an in person or online meeting where you go over the work itself. Describe the thinking process that went into selecting, colours, layouts, and how they meet the goals for the job. The client doesn’t know what you are thinking, and might be confused at some of the decision you made, and this in person or online meeting can answer those in a structure manager.

Once the design is agreed to, there are sometimes a few minor changes that might be made, but we move onto the actual development of the work. As a general rule, development can usually take twice as long as the design for small projects, but this is just my own experience.

Alt Text

Development of the Project

The development of a project for me happens in two stages. The is the initial stage where I build a local website on my own machine, with the design in mind and the requirements, until it is a basic MVP. At this stage, I usually put it online on a development server URL where the client can access. Once its ready for client access, I like to organise another meeting showing them the progress personally, going over how it matches the design and requirements, and the estimates on when it will be delivered. This way the client can be assured there is progress being made, and can see it happening.

It is also a good opportunity to slowly train the client to use the system. It’s great to build a project, but so many times the handover stage misses the critical part of training the client to make use of the website or app. If you can do so in small parts as you also show the development of each part, you can knock down two birds with one stone.

The development stage can take a while, with lots of revisions, and it’s important to stay inside the scope of the original agreement. So many times I’ve seen projects extend far beyond what was originally agreed. As soon as you see this begin to happen, absolutely agree to do it, but for a price. Make it clear you want to help, support, and do the extra work, but be clear that it isn’t part of what the price covered, and that we can do a quick estimate to add it in. This helps both parties stay in sync, knowing positive progress is being made, rather than run into arguments on what is or isn’t able to be done.

Alt Text

Final Presentation, Documentation and Go Live

You’ve finally finished the project. It’s best to do one final meeting with the client to go over the whole journey. This is to clarify how much work you’ve put in, how you’ve followed the requirements, and delivered the project to what they were after. If communication is clear then freelancing work can be awesome.

This is a good time to do one final round of training with the client to make sure they understand how the system works and that they are happy with it. Once all is agreed, send the final invoice for the work once everyone is indeed in agreement and to put together some proposals for on-going changes and work costings. Setting up an expectation that additional work is now outside of the project delivery will help establish trust if and when the client needs to follow up work done later.

I hope this helps you get a better idea of some of the journey's we go through when doing freelancing work.

Discussion (5)

pic
Editor guide
Collapse
reythedev profile image
Rey van den Berg

Nice and clear, thanks Adrian! That mention of value based pricing is great🙌 Preventing scope creep is a must for developer sanity 😄

Collapse
allanbugyi profile image
allanbgy

Very nice. Thanks!

Collapse
adamj_web_dev profile image
Adam Johnson

Great read, answered a lot of questions I’ve had about going freelance.

Collapse
rolypolie profile image
Sky

Great read man, thanks.. the wireframing is something I'll have to learn , skipped that one initially lol.

Collapse
sollabong profile image
Gabor Soltesz-Keri

This is super useful. As a beginner freelancer I should print this out and put it on my wall :)