08 // Project Flow: Design to Live Site

we-create-the-internetToday’s We Create the Internet discussion on Project Flow was one that a lot of people requested and that filled up incredibly quickly once I put it up on the calendar. I suppose it’s not a very glamorous topic and therefor not one that gets a lot of air time. This seems to be particularly true in the freelancer/ micro-design & development company world where we don’t have project managers and projects are often shared across multiple people.

I’ll come back and edit this post after our discussion with a brief summary and any tips/ tricks/ resources that come out as we chat, but I wanted to also outline what project flow often looks like in my business, since I think it will help support the discussion and it also fits nicely into my occasional series of posts on self-employment as a web person.

becoming-self-employed

There are 7-ish phases within the lifespan of a website project, at the way I organize and think of things:

  1. Initial Inquiry
  2. Quoting & Estimates
  3. Signing On & Scheduling
  4. Design Phase
  5. Design Transfer
  6. Development Phase
  7. Site Completion & Launch

Of course there are lots of sub-steps and variations to this overall process, but these are the major stages that I track and that happen in just about every project ever, so these are what I’ll focus on describing in more detail.

1. Initial Inquiry

I get inquiries in one of two ways – through the form on this site, or via email. The vast majority of inquiries, even those that are initiated elsewhere (Twitter, in person, casual emails, etc), get funneled through that form as it helps me better manage information and archive it in a way that I can easily access it at a later date if necessary. I do take some inquiries directly over email if they’re from designers I’ve worked with previously or that I know have enough experience to give me all the info I need in a well-organized email.

As I’ve hinted at, my inquiries tend to come from two places: (1) designers, who are inquiring about contracting my services for their client projects, or (2) the end client/ site owner. The bulk of my current work is through designers.

The actual physical (digital?) inquiry message comes into an inbox that is shared between myself and my project assistant, Marina. Marina will typically guide new potential clients through their inquiry process until we have enough information to actually quote a project, at which point the information gets turned over to me for quoting and writing up the estimate. I do handle most of the designer-specific emails myself, although sometimes Marina helps with those for time/ efficiency reasons.

2. Quoting & Estimates

Once I have all the information I need about a given project, I use Pancake App to write up an estimate for the project. I try to be very detailed in the estimate so that everyone is on the same page about project scope for the quoted price. This is helpful both for reference down the line when I want to know what on earth I said I’d provide as I check a finished website for completeness, and it’s a first strike against scope creep.

The estimate gets sent to the client and we make notes in our internal systems about when to follow up and when the estimate expires (30 days from when it’s created, usually) so that we can check in and archive any projects that aren’t moving forward.

Sometimes it’s also helpful to schedule early phone calls at this point in the process, either to gather more information or to determine whether the project and the people are all a good fit.

3. Signing On & Scheduling

Once the estimate is accepted, Marina converts the estimate to an invoice (which is just a couple of clicks), sets up the payment plan and sends it back out with information about submitting a deposit. She also sends out the contract at that time, via RightSignature  (SignNow looks like a decent cheaper, more bare-bones version).

I don’t hold time on my project schedule until the contract and deposit (usually 50%) have been returned, and I let clients know that multiple times during the estimating and invoicing process so that they know what to expect. That keeps my scheduling fair and also helps me maintain a more accurate schedule based on projects where the client has already shown a commitment by getting those initial steps taken care of, and it also helps me maintain my business’ cash flow (which is especially important for managing payroll).

4. Design Phase

From there, the client is usually working with a designer on the site design. I let both parties know that I’m available by phone or email if there are questions about functionality or if they want to run anything by me.

I’m also currently working on improving my systems so that Marina or I has a chance to check in with the client or designer in the week leading up to the scheduled design transfer to check whether the schedule is on track, and to start gathering information like hosting account logins.

5. Design Transfer

Once the design is finished, the designer typically sends me a zip folder (or shared DropBox folder) with all the project files. Usually that means PSDs and/or AI files, a few content images, some font files, and a bunch of notes. I also gather account information from the client so that I can access all the various accounts I need to use to get everything up and running.

Ideally, I take some time right after getting the files to open them all and look through them, although to be quite honest this doesn’t always happen right away. I do find it helpful when I can make the time, as it helps me identify anything that might be different from the original project scope, files that might be missing, or information I might need that isn’t clearly specified in the files (like hover states or dynamic functionality).

It’s best to do this as soon as possible because it allows more time for any back and forth, and also because it feels less like a “gotcha” when potential scope issues, licensing needs, or other concerns are identified relatively early in the process. That said, it’s still a task that only I can do for the files I’m working with, and there’s only one of me so it doesn’t always get done as soon as I’d like it to.

6. Development Phase

From there, I start coding! Depending on the situation with the client’s hosting and whether they have an existing site or not, I work either on their server or on my own server on a development site. Depending on the project and designer, I often give the designer access before I share the site with the client so they can do a review of their own.

At this stage, I only enter the content necessary to do the page layouts and get everything squared away in terms of functionality. Especially if I’m working on development site, it often doesn’t make sense to go too far into the content since it won’t necessarily transfer easily to the final production site, and it’s also part of my contractual terms that I’m not responsible for all content entry.

Once the site is pretty much finished, Marina and I do some cross browser and device testing, and then I make any final tweaks or fixes. I try to be pretty strict about sticking to project scope with clients and designers – my main method for this is just to nicely answer tweaks requests with something along the lines of “I’m happy to do XYZ for you, but it’ll take about ABC minutes at my hourly rate since it’s outside the original project scope” and then I link to the detailed itemized invoice as a reference.

If it’s a client that has been especially lovely to work with and/or the project has just sailed by easily then I’ll sometimes throw in extras at no extra cost, but most of the time I charge for anything and everything above the original scope because that’s how project agreements and scopes work :)

7. Site Completion & Launch

Once the site is all done, I get it over to the production server (if necessary), and record a short video tutorial showing the client how to work with their site. I focus on any custom features and try to tailor the videos to the client to the extent that I know how tech-savvy they are.

Once the site is finished coding-wise, final payment is due and I consider the project complete!

One important note about that is that projects can be complete before the site is launched. This most often happens when the client is still working on content – I usually will make it so they can easily launch the site when they’re ready, and I don’t wait around until they’re done. I’ve learned from experience that doing so can make the project drag on endlessly, so I am very clear in my contract about the project being finished at the end of coding.

Of course once it launches, it’s celebration & social media time! And then on to the next project.

  1. JP

    Funnily, I am in the process of rebranding, and put up a much simpler maintenance page…I’ll be using this in the future for other scheduled maintenance times, definitely.

Leave a Comment

Your email address will not be published. Required fields are marked *

About posting code: Please use a Gist or similar to share any extended code samples, and any code other than basic HTML, CSS, or jQuery/ JS, so as to keep the comments clean and readable. Basic HTML, CSS & jQuery can be shared in the comment surrounded by <code> tags. Thanks for commenting!