Our Website Design Process

We’ve had the fortune of working with some amazing clients in our time. Over that period, we have developed an amazing website design process that takes advantage of our clients’ unique offerings and our expertise to deliver fully optimized websites, on a budget and on tight deadlines.

Before we list the process, we have to point out a few assumptions. First, we assume that the client is hiring us for our expertise – not to tell us what to do. Second, we assume that the main goal of the website is to complement the client’s business goal.

For example, if our client is a charitable foundation, the main purpose of the website is to increase donations and volunteers. If our client is a law firm, the main purpose of the website is to get more clients or to manage existing clients more effectively and efficiently. If our client is a retailer, the main purpose of the website is to increase sales or lower cost.

You get the point.

This is important because we will use our expertise to further those goals. They take primary importance, and should a disagreement arise, the primary goals will direct the outcome.

With that in mind, here is our process.

Planning

Also called discovery, this stage sets the direction for the entire project and is crucial for its success. We break it into the following steps, which we follow sequentially, meaning we can’t proceed to the next step until the preceding step is 100% completed.

1. Requirements Gathering

   During this step, we work with our client to develop their goals, an ideal customer profile (target audience), detailed feature requests and as much relevant information as possible.

2. Point of Contact

   We require a single point of contact for each project. Obviously, the contact person may change during the project, but, at any given point, we need to know who will be responsible for providing information and approval throughout the lifetime of the project. Emails can be gigantic time wasters. That’s why we rarely use email to communicate with a client. To keep things as efficient as possible, before the project kicks off, we set aside 30 minutes to an hour each week for the new client. During this meeting, we take questions, concerns and feedback from the point of contact and update the point of contact on our progress. Anything that would normally go in an email (unless it is an emergency) is discussed during this weekly status meeting. In the case of an emergency, the client should email the project manager. If not response comes within 30 minutes, the client can then escalate the emergency to our general email list and finally, call our 24-hour support number.

3. Project Charter

   The Project Charter shortly summarizes what we developed in based on the Requirements Gathering. We develop this on our own and present it to the client, who then either accepts or rejects the charter. If the charter is rejected, we make modifications and bring a revised charter to the client. The charter includes required client material, timelines, deliverables and serves as the guide for the duration of the project.

   The deadline portion of the charter is critical. The deadline represents the latest date the website will launch. Client delays that push the launch date passed this deadline will be billed to our client.

4. Project Deposit

   Once the client has signed the charter, we are ready to begin committing time and material to the project, so we need a deposit from the client. We require 50% of the total estimate to complete this step.

5. Delivery of Client Material

   Before we can go any further, we need access to all of the client material that we’ll need to complete the project. This will be spelled out in the charter, but includes items like username and passwords for DNS, host, control panel, databases, social networks and other accounts (PayPal, Authorize.net, etc). If we’re using Authorize.net, we need terms of service, privacy policy, return policy, approximate product prices and shipping information.
   Product titles and product descriptions. Additionally, we need any content that client wants included on the site (text, pdfs, graphics, videos, etc). The client is responsible for adding any content not provided to the website after the completion of the project.

Design

Now we’re ready for the design phase. During this phase, we basically combine the elements from the first phrase into a visual representation for client approval. At the end of this phase, our clients know exactly what their site will look like. In the next phase, we’ll make it functional as a full website.

1. Conceptualization

   The first step in the design process also is a critical one. At this point, we use the information from the first phase to build four things: wireframe, sitemap, color palate, and font book The wireframe will be a visual representation of how the content of the client’s website will be structured – basically all the elements (text, navigation, footer, header, etc) positioned but with no design. There will be a wireframe for each unique page type for the site. The sitemap will list, in a hierarchical order, that will show how the pages in our client’s site will be organized. The color palate shows our client the colors we think our best suited to their brand and goal. Finally, the font book shows our client the fonts we think our best suited to their brand and goal.

   The client then has one week to provide specific feedback for revisions or approve the Conceptualization. Upon approval, we move to the next stage. Unless prior arrangements are made, no feedback within a week is considered implicit approval and we move on to the next stage. Should the client require more than one round of revisions, we bill the client at our hourly rate.

2. Design Compositions/Mock ups

   We’ve heard this step referred to as the composition stage or the mock up stage. In either case, this step involves us taking the wireframes, colors, fonts and client content from the previous steps and combining them in Photoshop to provide the client with a visual representation of how their site will look. Generally, we will build a comp for each wireframe from the previous step.

   The client then has one week to provide specific feedback for revisions or approve the comps. Upon approval, we move to the next stage. Unless prior arrangements are made, no feedback within a week is considered implicit approval and we move on to the next stage. Should the client require more than two rounds of revisions, we bill the client at our hourly rate.

   It’s important to note that the comps are designed based upon the approval from the preceding step. Because of that, any revisions that would require us to go back to the conceptualization stage get billed at our hourly rate. Also, we encourage the client to meticulously examine the comps. At this point, this is exactly what the website will be. The client should not make any assumptions. For example, just because there is a newsletter gallery does not mean there will be an awards gallery.

Development

The development stage is where we turn our clients composition into a living website that visitors can interact with and our clients can manage. The steps here will all be done in a testing environment. This allows us to create a fully functional website without affecting any existing website. Then, during the next phase, we will launch the website, making it publicly accessible.

1. Template Coding

   During this step, our developers or producers take the composition from our design team and cut it up into pieces that can be used in HTML and CSS. For each unique composition (home, general content, video gallery, contact form, check out, etc), they will develop a template to host the content.

2. Content Population

   The content provided during the first phase then will be added to these templates. This step usually just involves copying and pasting content and uploading images. If the client opted for our content transfer services, we will manage this step. If not, the client will be responsible for transferring the content.

3. Testing

   At this point, the client can fully test the site just as the public will see it. Both the client and our developer test the site, checking to make sure it works on various computers and browsers (we support IE8 and up, Firefox 3 and up, Chrome 8 and up and Safari 3 and up). Any bugs (defects that prevent the site from working) will be fixed until they are all fixed.

   Once the bugs are all fixed, the client then has one week to provide specific feedback for revisions or approve the site. Upon approval, we move to the next phrase. Unless prior arrangements are made, no feedback within a week is considered implicit approval and we move on to the next stage. Should the client require more than two rounds of revisions, we bill the client at our hourly rate.

Launch

We’re now ready to show the client’s site to the world. During this phase, we clone the testing environment, configure it for production and deploy it to the world.

1. Final Payment

   Before we start the process of pushing the site live, we require the final 50% payment from the client.

2. Clone Testing Environment

   During this step, our developers copy all of the content and settings and prepare them for production (public viewing).

3. Configure DNS and Servers

   If there is an existing site, we change the configurations to point at the new site, and within hours, visitors will begin being directed to the new site. Note, there will be no down time. Visitors will either get the old site or the new site until all the changes have propagated throughout the Internet.

4. Party!

Now that the new site is launched, our project and contract is considered fulfilled unless we have combined management or Marketing into the work contract. Interestingly, even though we’re done, the life of the site is just getting started.

If it’s going to meet its goals, it needs to be Marketing (Search, Social, etc) and updated regularly. Some of our clients choose to take this part on themselves and others retain us to manage these areas for them.