HOW TO: Organize Web Development Projects Like a Pro ~ vZhai: Info Sharing Blog

HOW TO: Organize Web Development Projects Like a Pro

"

This is a guest post from Jay Melone, founder @ DigitalXBridge, which provides web and mobile design + development, SEO, eMail Marketing and hosting services out of the NYC area.
While web designers and developers are touted as being the tech-savvy and brilliantly creative types, they also have the unfortunate rap of being some of the most disorganized individuals on the planet. Luckily, most design shops come equipped with overly attentive, detail-oriented project managers. For those freelance designers working solo, or small web shops still operating in cowboy-code-slinging mode, this post is especially for you. Take some notes on the process employed below and begin pitching your services as Grade-A Professional. These process tips and tools will help you stay on top of your deliverables, submit dates to your clients you can reasonably hit, track changes requests along the way and, in the end, deliver a quality product. Do all of this well and expect your customers to become your word-of-mouth marketing evangelists, overnight.
Note: I’ll be speaking to traditional desktop browser web design and development (PHP).

Phase 1: Research & Analysis

If you’ve ever heard the expression “measure twice cut once”, this the measuring phase. During R&A you’re familiarizing yourself with the client, their project, their business and their industry. Before you can spend a minute on actual design and development, you should immerse yourself in the client’s vision. This is not only important in nailing the proposal/estimate, but helps ensure you build what the client asked for and avoid costly changes to scope and aesthetics at the 11th hour.

Before any exchange of information takes place, be upfront and ask the lead/client if they’d like you to sign an NDA. This will show you’re considering their IP (intellectual property) in their best interest and help avoid any awkward feelings some clients may have about asking you to sign one in the first place.
Project intro questionnaire — At DigitalXBridge we have a tailor-made questionnaire we ask all of our new leads/clients to fill out. It’s a 1-pager, so it’s short enough not to overwhelm the client with homework on day one, but insightful enough to provide the answers to 90% of the introductory Q&A that takes place at the outset of a new engagement.
Follow-up discussion — Once the client submits the questionnaire, give them a call and go through each answer provided to make sure you’re both on the same page. It’s also a good idea to take notes for both you and the client during this discussion. Later, the client can review the notes again in writing. Measure twice.
Proposal (aka Estimate or Quote) — Now that you and the client are speaking the same language, it’s time to take those line items and start applying effort and costs to each. We use FreshBooks for all of our accounting, including estimate-writing. The more detailed a proposal, the less questions you’ll have to field and the more the client will understand how you arrived at the numbers you did. If you send them a 1-liner with one big number at the bottom, expect your phone to ring with a confused and frustrated client, at best. At worst they walk away without giving you the chance to explain yourself. Ride the transparency train as often as you can.
Review the Proposal with your client and discuss next steps — If the project is approved, now is when you should gather up 3rd party credentials such as registrars, hosting accounts, payment gateways, SSL certs, etc. If you use any project management software (we use Basecamp), this is also a good time to officially kick off the project whereby all previously gathered notes are dumped in the project workspace and some early to-dos and milestones established.
Site Plan — The final step of the R&A phase, and only once the project is approved, is the site plan. The site plan can come in a variety of forms (from hand-written sketches to outputs from the plethora of online tools), but the premise is that you’re asking your client to convey to you the basis structure of the site; i.e. the top-level navigation and transitions from page to page. 9 out of 10 clients will struggle to pull this all together so it’s important to use your skills as a designer to coach them through this so you have enough to get started on Phase 2: Design.

Phase 2: Design

While you were busy measuring repeatedly during phase 1 you had the opportunity to gather up all of your client comments, project specs and meeting notes. Now during phase 2 it’s time to turn all of that scribbling into eye-popping visuals.

Client Content — Before any designer can really dig in, they need some direction on content (copy, images, colors, product/customer data) from the client. Keep the requests light as you just need a nudge.. you’re still the designer and they’re still the client. This input should simply feed the Creative Concept step below, of which the client can focus on their most important page (e.g. Home Page) and supply all relavent content. Then they can move on to the rest of the site as the designer completes the Creative Concept. This job is almost always heavily underestimated by the client and once they realize they need to supply things like Policies and Terms, they hit a wall. Make sure you prep them for this assignment and give them adequate time and support. If you have copy writers available, make sure you make them available.
Creative Concept — This is your first design draft (images only; e.g. PSDs, no HTML just yet) of whichever page the client cited as most central to the theme and vision of the entire business and website, to which they provided content for in the previous step. The designer set of tools we use most for all web-related design work is Adobe Creative Suite.
Creative Walkthrough — Considering this is the client’s first encounter with not only your creative work but in seeing their idea come to life, you’ll want to discuss your first draft of the creative over the phone (in-person is even better). Explain the theme, where you drew your inspiration for colors, layout, fonts, etc and then hear them out on any tweaks they’d like made for the next version. Once you nail the general aesthetic of the site based on the initial page creative, you can get started on the remaining (“inner”) pages. To make the process of submitting designs and gathering client changes/feedback more efficient, you could take advantage of tools like ConceptShare (which recently launched an entire new v3 product). We’ve found it to streamline all of the countless emails and phone calls with a simple, visual interface.
Design sign-off — Before you move onto Phase 3: Implementation, you want to have creative sign-off from your client. Going back and changing design after coding begins can be costly to the budget so don’t underestimate the importance of this step.

Phase 3: Implementation & QA

Implementation is a fancy word for coding. Hand those beautiful PSDs off to your engineers to develop.. the site is ready to come to life. And because we encourage working iteratively, QA comes along for the ride during this heavy development period. That said, testing, as a whole, is a post in itself (to be covered later), so we’ll keep the view at 30k feet for now.

Client-side Coding — Start with HTML and CSS, then move onto any JavaScript, AJAX, Flash, etc, wherever applicable. If you have separate people handling design and development, communication between the two needs to be fluid so as to maintain the visual concepts born during phase 2. In fact it’s best if the designer can hand the page off to developer once client approval is received so that everything regarding that page is top-of-mind.
Client-side QA – Again, each of these points can be expanded upon but the general testing routines you want to validate here include: (1) typography/formatting, (2) accessibility, (3) and browser/OS compatibility.
User Guide – Well-written documentation not only conveys how things were built, but how to use the site and any administrative functionality (e.g. an admin panel or CMS). It also serves as a training manual and cut down on subsequent support calls post-launch. Finally, this document will serve as a guideline during client testing (UAT) within phase 4.
Site Demo – As pages get layered with client-side coding, it’s a good idea to share links with clients. The images produced during phase 2 are pretty to look at, but often you won’t begin to receive true client feedback until they can point and click.
Server-side Coding – Time to hook the client up to the server with PHP coding.
Hosting Account Setup – Whether or not you’ll be hosting the site, now’s the time to make sure the hosting account is established, email accounts exits, DNS entries are accurate, SSL certs are in place and implemented wherever necessary on-site and any other IT administrative steps have been carried out.
Functional QA: Includes testing (1) features/forms/fields, (2) cookie settings, (3) performance, (4) server-side communication and (5) security/penetration checks. Once all of the internal (i.e. completed in-house by you/your team) QA has been completed you can prepare to officially hand the site over to the client for testing and approval in Phase 4.

Phase 4: UAT & Training

While you’ve been keen at keeping the client informed of your progress along the way and asking for regular feedback, it’s been light in terms of formal client testing to this point. Now it’s time to really hand the reigns to your paying customer and iterate through a cycle (or two, or three) of UAT – User Acceptance Testing.

Training – One of the biggest mistakes we used to make when we started building client sites was to build something, turn it over to the client and say “good luck, let us know if you find anything wrong.” No good. For one, most of your clients will not understand technology like you do – some may need to understand the basics of website protocol; others may even be a bit more advanced but still need a primer on how to, say, upload catalog merchandise via FTP. Hold their hand. Send them the User Guide crafted during phase 3 and then take them step-by-step through each page and process. We like to use GoTo Meeting for client demos, where we’ll often run a scenario and then give keyboard and mouse control to the client and ask them to give it a shot. It works well and pays huge dividends to do it in a simulated training environment now and while you’re moderating vs. later in production when the boss is standing over their shoulder and you’re not around to lean on.
UAT – Now that your client is a pro with what’s under the hood of their site, UAT begins. But before they begin, coach them on best practices for reporting issues; e.g. trace their steps, break out expected vs. actual outcomes and provide screenshots whenever possible (with annotations on the screenshot.. even better!). If you use a PM tool you’ll probably want to capture all discussions and issues/changes found during this process there so that as you apply fixes, the entire process is tracked and documented. The more you guide them on the testing approach that works best for you and your team, the more streamlined the entire process will remain. Even though the client is testing on their end, the responsibility to deliver a high-quality product remains on your shoulders. Make sure you own this process, just as you have the previous steps.
Sign-Off – As UAT comes to a wrap, you want to somehow have your client both acknowledge that they’re approving of the work produced as well as give you permission to publish it to the world. Some shops use very formal documentation, others use email or even IM. Whatever works for you, both semantically and legally; but I’m sure most would recommend having it in writing. Whatever your approach, once you have their blessing it’s time for Phase 5: Go-Live.

Phase 5: Go-Live

You’ve made it. Blood, sweat and tears have been shed by you and your client (hopefully not too many tears) and now it’s time for publishing to the live, production hosting account.

Planning – Before you actually release the site into the wild, sit down with your client and explain the release process. We typically put client sites live during off-peak (local) hours. So say we’re launching a site in NY, we would typically plan to begin this process at 3am EST so as to give ourselves plenty of time to run the release procedures, or worst case, take the site offline and notify the client of problems/delays.
Private URL Launch – Upload the site to their production environment with a private URL (e.g. just an IP or http://test.domainname.com) and then..
Smoke Testing – Immediately upon launch you want to make sure everything is stable. Run through all pages and perform a basic level of functional QA to ensure the site is still standing. If the site is transactional (e.g. eCommerce) place a couple test orders and validate the workflow on the back-end and database, as well verify email notifications. If we’re good to go..
Go-Live – Flip over to the public domain and notify your client that their site is officially live.
Check-In – Don’t forget to keep an eye on things over the coming days and weeks. You want to make extra sure that if there are problems, you’re the first to find them. There’s nothing worse than a client calling to tell you the site is down.. it will erase all those hours of hard work as well as the trust you’ve built with your client.

Summary

Designing and building websites includes lots of moving parts however the most important element throughout is communication. Whether things are going smoothly or falling apart, keep your client in the loop and work through things together. The process above is not a one-size-fits-all, but, at its core, contains a good guide to keep you and your web projects on track.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!
Web :: http://digitalxbridge.com

Skype :: jaymelone | Yahoo IM :: digitalxbridge

Social :: Facebook | Twitter

"